บทความนี้จะอธิบายเกี่ยวกับการใช้งาน jQuery ตั้งแต่เริ่มต้นกันเลยทีเดียว เพราะมีน้องๆ หลายคนมาถามว่าแล้วต้องเริ่มต้นยังไง ก็เลยเอามาเขียนอธิบายไว้ในบล็อกนี้เลย เผื่อมีน้องๆ หรือเพื่อนๆ คนอื่นสนใจที่จะใช้ jQuery แต่ไม่รู้ว่าจะต้องเริ่มยังไง แต่ว่าอย่างน้อยเพื่อนๆ หรือน้องๆ ต้องมีพื้นฐานเกี่ยวกับ javascript และ dom (Document Object Model) บ้างนะครับ ^^
[imooh_google_ads]
ดาวน์โหลด 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 เบื้องต้นครับ แล้วเจอกันครับ ^^