แนะนำให้รู้จักกับ jQuery
06 Jan 2012
Downloading and Including the Library
ก่อนที่เราจะเริ่มต้นเรียนรู้ jQuery เราต้องดาวน์โหลดและติดตั้งมันเสียก่อน โดยเราสามารถดาวน์โหลดได้ที่ http://www.jquery.com ณขณะที่เขียนนี้ผมดาวน์โหลดเวอร์ชัน 1.7.1 ในเว็บไซต์จะมีให้ดาวน์โหลดสองรูปแบบย่อยด้วยกันคือ แบบ Production และแบบ Development ซึ่งแบบ Development เหมาะสำหรับการเอาซอร์สโค้ดมาดัดแปลงแก้ไขหรือศึกษาทำความเข้าใจ ในขณะที่แบบ Production เหมาะกับการนำไปใช้งานจริง เพราะได้ตัดช่องว่างและปรับเปลี่ยนตัวแปรภายในให้สั้นลง เพื่อลดขนาดของไฟล์ลง ก็เลือกเอาตามความต้องการนะครับ (หากคลิกดาวน์โหลดแล้วมันเปิดขึ้นมาเป็นข้อความก็อย่าได้ตกใจไป เพราะมันคือไฟล์ .js เหมือน JavaScript ทั่วไป และเบราว์เซอร์ของคุณอาจมองว่ามันเป็น Text ชนิดหนึ่ง ก็ให้เซฟเว็บเพจนั้นซะ)
เมื่อเราได้ไฟล์ jquery-x.y.z.js หรือ jquery-x.y.z.min.js แล้ว ลำดับถัดไปก็คือการอ้างอิงใช้มันในไฟล์ HTML ซึ่งก็จะเหมือนกับการอ้างอิงใช้งานไฟล์ JavaScript ทั่วไปดังนี้
<script src="jquery-1.7.1.min.js">
</script>
โดยเขียนโค้ดข้างต้นไว้ในแท็ก <head> เท่านี้เราก็พร้อมที่จะใช้งาน jQuery แล้ว อย่างไรก็ตามในการใช้งานจริงเราอาจอ้างอิง src จากเซิร์ฟเวอร์อื่นๆได้ดังนี้
- http://code.jquery.com/jquery-x.y.z.min.js
- http://ajax.microsoft.com/ajax/jquery/jquery-x.y.z.min.js
- http://ajax.googleapis.com/ajax/libs/jquery/x.y.z/jquery.min.js
ซึ่งจะช่วยลดโหลดของเซิร์ฟเวอร์ของเรา อีกทั้งยังมีความเป็นไปได้ที่เว็บเบราว์เซอร์จะ Cache ไฟล์ jQuery ไว้จากการเข้าเว็บไซต์ใหญ่ๆที่อ้างอิงใช้ไฟล์เดียวกับเราด้วย
สิ่งที่เราต้องรู้เกี่ยวกับการใช้ jQuery
การใช้งาน jQuery Library จะใช้งานผ่านฟังก์ชัน jQuery() เป็นหลัก ยกตัวอย่างเช่น หากต้องการเข้าถึงแท็ก <title> เราสามารถเขียนได้ดังนี้
jQuery("title")
และเนื่องจากมันเป็นฟังก์ชันหลักที่เราต้องเรียกใช้อยู่ตลอด ผู้คิดค้นจึงเตรียมฟังก์ชัน $() ไว้เป็น Shortcut ให้เราเรียกใช้ได้โดยสะดวก ดังนั้นตัวอย่างข้างต้นจึงเขียนได้ใหม่ดังนี้
$("title")
จากตัวอย่างที่ยกมาข้างต้นนี้เมื่อเราเข้าถึง Elements ต่างๆได้แล้ว เราก็สามารถเรียกใช้ฟังก์ชันต่างๆเพื่อดัดแปลงแก้ไข Elements นั้นได้ ไม่ว่าจะเป็น Text, Attribute, หรือ CSS เป็นต้น ตัวอย่างเช่น
$("title").text("Hello jQuery");
ตัวอย่างข้างต้น "title" คือ Selector หรือตัวกำหนดว่าจะเข้าถึง Elements ใด โดย Syntax จะใช้รูปแบบเดียวกับ Selector ใน CSS ส่วนเมธอด text() คือเมธอดสำหรับแก้ไขข้อความใน Element นั้นๆ (เมื่อเรา Select อะไรได้แล้ว ทุกอย่างคือออบเจกต์ ดังนั้นฟังก์ชันภายในออบเจกต์ก็คือเมธอดนั่นเอง)
นอกจากนี้ jQuery ยังนำเสนอรูปแบบการเขียนที่เรียกว่า Method Chainning กล่าวคือเมื่อเราได้ออบเจกต์ (Elements) ที่ต้องการแล้ว เราสามารถเรียกใช้หลายๆเมธอดเป็นลำดับขั้นได้ (และเขียนมันภายในบรรทัดเดียว) ตัวอย่างเช่น
$("h1").text("One more?").css("font-style","italic");
ในตัวอย่างข้างต้นนี้เราเข้าถึงแท็ก <h1> (สมมุติว่ามีเพียงแท็กเดียวในเอกสาร HTML) และเปลี่ยนแปลงข้อความในแท็กให้เป็น "One more?" ด้วยเมธอด text() จากนั้นเราจึงเรียกเมธอด css() เพื่อกำหนดสไตล์ให้กับแท็ก <h1> อีกที นี่แหละเทคนิคที่เรียกว่า Method Channing และจะ Chain มากกว่าสองครั้งก็ได้
สิ่งที่ควรรู้อีกก่อนการเรียน jQuery
ยังมีอีกเรื่องหนึ่งซึ่งเราควรต้องรับรู้เสียก่อนก่อนจะศึกษา jQuery ในรายละเอียดต่อไป นั่นก็คือฟังก์ชัน jQuery() ถูกออกแบบมาเพื่อให้เรียกใช้ได้หลากหลายรูปแบบและสถานการณ์ หรือในทางเทคนิคเรากล่าวได้ว่ามันถูก Overload มานั่นเอง หรืออธิบายได้อีกอย่างหนึ่งก็คือ เราสามารถส่งผ่านพารามิเตอร์ให้ฟังก์ชัน jQuery() ได้หลากหลายรูปแบบ การใช้ฟังก์ชัน jQuery() มี 4 รูปแบบหลักๆด้วยกันดังต่อไปนี้
Selector as Parameterรูปแบบนี้เป็นรูปแบบหลักที่เราใช้เป็นส่วนใหญ่ กล่าวคือการใช้ฟังก์ชัน jQuery() เพื่อเข้าถึง Elements ต่างๆดังที่ได้เห็นในตัวอย่างก่อนหน้านี้ สำหรับรายละเอียดการใช้ Selector นั้น เรียกได้ว่าเขียนกันได้เป็นบทความหรือหนังสือบทหนึ่งเลยทีเดียว
JavaScript Object as Parameterรูปแบบที่สองนี้เราสามารถส่งผ่านพารามิเตอร์ด้วยออบเจกต์ใน JavaScript ได้เช่น $(document), $(window) ทั้งนี้ทั้งนั้นเพื่อห่อหุ้มมันด้วยออบเจกต์ jQuery ซึ่งจะทำให้เราสามารถเรียกเมธอดของ jQuery จากออบเจกต์ใน JavaScript ได้
HTML Text as Parameterรูปแบบที่สามนี้คือการส่งผ่านพารามิเตอร์ด้วยโค้ด HTML ซึ่ง jQuery จะถือว่าเป็นการสร้าง HTML Elements ใหม่ ตัวอย่างเช่น
$("<a href='http://www.jquery.com'>Go to jQuery web site</a>")
จากนั้นเมื่อได้ Elements แล้วจะแทรกหรือใส่ลงไปในเอกสาร HTML ตำแหน่งใดอย่างไร ก็ทำได้ด้วยการเรียกเมธอดต่อไป เช่น
$("<a href='http://www.jquery.com'>Go to jQuery web site</a>").insertAfter("p");
ตัวอย่างข้างต้นเราก็จะได้ลิงค์ใหม่ต่อจาก Paragraph (สมมุติว่ามีแท็ก <p> เพียงแท็กเดียวในเอกสาร)
Function as Parameterรูปแบบสุดท้ายคือการส่งผ่านพารามิเตอร์ด้วยค่าฟังก์ชัน (Function Literal) คุณอ่านถูกแล้วครับ ฟังก์ชันใน JavaScript ถือได้ว่าเป็นค่าค่าหนึ่ง (Functional-oriented Programming) ในกรณีนี้ jQuery จะถือว่าเป็นการสั่งรันฟังก์ชันเมื่อเว็บเบราว์เซอร์โหลดเอกสาร HTML เสร็จสิ้นสมบูรณ์ (DOM Ready) ตัวอย่างเช่น
var fn = function(){ . . . };
$( fn );
โปรดสังเกตนะครับว่าตัวแปร fn ที่ส่งผ่านเป็นพารามิเตอร์เข้าไปในฟังก์ชัน jQuery() ไม่มีวงเล็บ () !! เพราะเราไม่ได้จะเรียกฟังก์ชันเดี๋ยวนั้น เราเพียงแค่ส่งรายละเอียดของฟังก์ชันที่เราต้องการให้เรียกเมื่อเว็บเบราว์เซอร์โหลดเอกสาร HTML เสร็จ หรือเราอาจเห็นบางคนเขียนโค้ดในอีกลักษณะหนึ่งดังนี้
$(document).ready( fn );
ซึ่งก็จะได้ผลลัพธ์เท่ากัน กล่าวคือเป็นการผูกฟังก์ชันเข้ากับเหตุการณ์ onready ของออบเจกต์ Document
สำหรับรายละเอียดของแต่ละรูปแบบข้างต้นก็คือสิ่งที่เราจะต้องไปศึกษาต่อกัน เอาหล่ะที่นี้ก็จบสิ่งที่ควรรู้ก่อนเบื้องต้นแล้ว ตอนนี้ก็ได้เวลาลงมือเขียนโค้ดกันแล้ว
