selectors ใน jQuery ถึงแม้ว่าจะเป็นจุดเล็กๆ น้อยๆ แต่ก็ปฏิเสธไม่ได้ว่าเป็นสิ่งที่เราใช้บ่อยที่สุด เพราะเราต้องมีการเลือก element/s ก่อนที่จะนำไปทำอย่างอื่นต่อ ดังนั้น หากเราให้ความสำคัญและปรับแก้ให้มันมีประสิทธิภาพตามที่มันควรจะเป็น ก็จะเป็นการเพิ่มประสิทธิภาพให้กับเว็บไซต์ของเราไปด้วย
jQuery จะมี .length ซึ่งเป็นหนึ่ง property ของ jQuery collection ที่จะเก็บค่าของจำนวนของ element ที่ตรงกับ selector เช่น “#myid”, “.myclass” ที่เราส่งเข้าไปในฟังก์ชันของ jQuery การใช้งานเพื่อตรวจสอบว่ามี element ตามที่เราระบุไว้ใน selector หรือไม่ก็สามารถใช้ได้ดังนี้ครับ
ไม่ได้อับเดทมานานสองเดือนเลยทีเดียวคิดถึงๆ ก็เลยหาเกร็ดเล็กเกร็ดน้อยมาอัพเดทซักนิดดีกว่า เอาเป็นวิธีการเลือก (selector) input ที่เป็น checkbox ด้วย jQuery ก็แล้วกันครับ
1. วิธีการดึงเอา input ที่เป็น checkbox ทั้งหมด
var allCheckbox=$('input:checkbox');
2. วิธีการดึงเอา input ที่เป็น checkbox ที่ถูกเลือก (checked)
var checkedList=$('input:checkbox:checked');
3. วิธีการดึงเอา input ที่เป็น checkbox ที่ไม่ถูกเลือก (uncheck)
var uncheckList=$('input:checkbox:not(:checked)');
ถ้าต้องการระบุชื่อของ checkbox นั้นด้วยก็เพิ่ม [name=checkboxname] เข้าไปครับ เช่น
var mycheckbox=$('input[name=mycheckbox]:checkbox:checked');
จะเป็นการดึงเอา checkbox ที่มีชื่อว่า mycheckbox ที่ถูกเลือก (checked) ครับ
มาดูวิธีการเพิ่มความเร็วให้กับการทำงานของ jQuery อีกวิธี ในการใช้งาน selector นั่นก็คือ การใช้ select โดยใช้ ID แทนที่จะใช้ Class ครับ แล้วมันเร็วขึ้นแค่ไหนล่ะ ลองเอาโค้ดไปทดสอบดูนะครับ วิธีทดสอบเราจะสร้างแท็ก ul ขึ้นมาโดยมีแท็ก li ซัก 1000 แท็ก แล้วลองดึงแต่ละแท็กด้วย ID และ Class เปรียบเทียบกันดู
ปกติแล้วการใช้ selector ของ jQuery เราชอบที่จะใช้โดยไม่มีการระบุ context คือ
var selectedItem = $('#listItem'+i);
แต่ฟังก์ชัน jQuery นั้นสามารถรับ argument ตัวที่สอง ซึ่งเป็นการระบุ context (เป็นการระบุว่าเราจะเริ่มค้นหาไอเทมของเราจากตรงไหน) ดังนี้
jQuery(expression,context)
จากโค้ดข้างบนเราก็แค่เพิ่ม context เข้าไป คื่อ
var selectedItem = $('#listItem'+i,$('#list'));
การเพิ่ม context ให้กับ selector นั้นจะช่วยเพิ่มความเร็วด้วยนะครับ