การใช้งาน jQuery ฉบับเริ่มต้น ตอนที่ 1 Hello, jQuery

บทความนี้จะอธิบายเกี่ยวกับการใช้งาน jQuery ตั้งแต่เริ่มต้นกันเลยทีเดียว เพราะมีน้องๆ หลายคนมาถามว่าแล้วต้องเริ่มต้นยังไง ก็เลยเอามาเขียนอธิบายไว้ในบล็อกนี้เลย เผื่อมีน้องๆ หรือเพื่อนๆ คนอื่นสนใจที่จะใช้ jQuery แต่ไม่รู้ว่าจะต้องเริ่มยังไง แต่ว่าอย่างน้อยเพื่อนๆ หรือน้องๆ ต้องมีพื้นฐานเกี่ยวกับ javascript และ dom (Document Object Model) บ้างนะครับ ^^



ดาวน์โหลด jQuery
เราสามารถดาวน์โหลด jQuery ได้ที่นี่เลยครับ หลังจากดาวน์โหลดเสร็จแล้วก็เอาไฟล์ jquery.js ไปวางไว้ที่ Root Document หรือจะเอาไปรวมไว้กับไลบรารี่อื่นๆ ก็ได้ครับ ขอให้เรารู้ก็แล้วกันว่ามันอยู่ที่ไหนจะได้อ้างไปหาถูกที่ครับ ^^

เริ่มต้นด้วย Hello World (ตามสไตล์การเริ่มต้นเขียนโปรแกรม :p)
เริ่มต้นด้วยการสร้างไฟล์ html ง่ายๆ ขึ้นมาก่อนครับ

 <html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
   // เราจะเขียนโค้ด javascript ของเราที่นี่ครับ
 </script>
 </head>
 <body>
   <!-- ส่วนตรงนี้เราก็จะเขียนโค้ด html ของเราครับ -->
 </body>
 </html>

หน้านี้จะโหลดไลบรารี่ jQuery (ดูให้ดีนะครับว่า อ้างไปหาไฟล์ jquery.js ที่เราได้โหลดมา ตัวอย่างนี้จะวางไว้ที่ระดับเดียวกันกับหน้า html นี้นะครับ) และมีคอมเม้นท์อยู่สองส่วนคือ ส่วนที่เราจะเขียน javascript และส่วนที่จะเขียน html ครับ

ก่อนที่เราจะใช้ jQuery ในการจัดการกับ DOM เราต้องแน่ใจก่อนว่า DOM อยู่ในสถานะที่พร้อมใช้งานหรือกว่าโหลดเสร็จแล้ว (ready) ซึ่งเราสามารถทำได้ด้วยการเรียกใช้ฟังก์ชัน ready ดังนี้

 $(document).ready(function() {
   // เพิ่มคำสั่งที่ต้องการเมื่อ DOM โหลดเสร็จแล้ว
 });

แทนที่เราจะให้ javascript alert ข้อความซึ่งฟังก์ชัน alert ไม่จำเป็นต้องรอให้ DOM โหลดเสร็จก็สามารถทำได้อยู่แล้ว เราจะให้ alert ข้อความหลังจากที่มีการคลิกลิงค์ (<a>) แทน

เพิ่มโค้ด html ข้างล่างเข้าไปในแท็ก <body>:

<a href="">Link</a>

เพิ่มโค้ด javascript ที่เป็น $(document).ready:

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello jQuery!");
   });
 });

เอาล่ะลองมาดูซิว่าโค้ดข้างบนทำอะไรบ้าง $(“a”) เป็น jQuery selector ซึ่งในที่นี้มันจะเลือกเอาแท็ก a ทั้งหมด ส่วนเครื่องหมาย $ เป็นตัวย่อยของคลาส jQuery ดังนั้น $() จะหมายถึงการสร้าง (construct) ออฟเจ็คท์ของ jQuery ขึ้นมาใหม่ ต่อมาก็จะเป็นฟังก์ชัน click() ของ jQuery จะทำงานเมื่อมีการคลิกที่ jQuery selector ตัวอย่างนี้ก็จะเป็นแท็ก a ทั้งหมด ( $(“a”) ) ดังนั้นถ้าเราคลิกที่ลิงค์ก็จะมีการ alert คำว่า “Hello jQuery!” ครับ

เดี๋ยวในบทความต่อไปจะสอนเกี่ยวกับการใช้งาน jQuery selector เบื้องต้นครับ แล้วเจอกันครับ ^^