วันพุธที่ 6 มีนาคม พ.ศ. 2556

Jquery : มาดูวิธีการเลือก element ต่างๆ กันครับ (Selection)

jquery เกริ่นหน่อย jquery เป็น javascript ครับ การใช้งานก็ต้องไปโหลด jquery.js มาก่อน ซึ่งปัจจุบันที่ผมเขียนนี้คือ 1.9.1 ครับ

การเลือก element ของ jquery ง่ายมากๆ ครับ
$('p')  เลือก p element ทั้งหมด
$('div')  เลือก div element ทั้งหมด
$('h1') เลือก h1 element ทั้งหมด
$('input') เลือก input element ทั้งหมด

ในการเลือกเรามี 3 สัญลักษณ์ครับ

(#)id ใส่ # แล้วตามด้วย id จะเป็นการเลือกตาม id ครับ
(.)classname ใส่ . แล้วตามด้วยชื่อ class จะเป็นการเลือกตามชื่อ class นั้นๆ ครับ
(:) ใช้ในการ filter ครับ เช่น even , odd , first , last , eq()

---------------------------------------------------------------
เริ่มสนุกแล้วใช่มั้ยหละครับ มาลองเล่นกันเลย

$('#firstselect tr') คือเลือก tr ที่ต่อจาก element ที่มี id เป็น firstselect ครับ

$('div.fancy p span') คือเลือก span ที่ต่อจาก div คลาส fancy และต่อด้วย p ครับ

--------------------------------------------------
การทดสอบว่าเลือกได้เท่าไหร่ใช้ .length() ครับ

alert($('#firstselect tr').length + ' elements!');

ซึ่งถ้าได้ 0 แสดงว่าหาไม่เจอครับ แต่ถ้าได้ค่าอื่นก็แสดงว่าเจอตามจำนวนนั้นๆ ครับ

-----------------------------------------------------------------
มาเล่นต่อด้วย filter กันเลยครับ

alert($('#firstselect tbody tr:even').length + ' elements!');

อ่าฮะ เห็นอะไรรึเปล่าครับ เรากำลังเลือก แถวที่เป็นเลขคู่อยู่นั่นเอง

ซึ่งมีให้เล่นเป็น
:odd เลขคี่ 
:first element แรกที่เจอ
:last element สุดท้ายที่เจอ
:eq() สำหรับเลือกเช่น element ที่ 3 ได้ครับ

--------------------------------
สุดท้ายเราสามารถเลือกหลาย element ทีเดียวได้ครับ
$('p,div,h1,input') 555 เลือกหมดเลย 4 tag ครับ

ความรู้จาก Sitepoint Jquery Novice To Ninja Feb 2010 ครับ


ไม่มีความคิดเห็น:

แสดงความคิดเห็น