Jul
8
2010

jQuery Selectors type

Comments Off

ความสามารถที่โดดเด่นของ jQuery เลยก็คงจะหนีไม่พ้นเรื่องของการใช้ Selector ครับ เพื่อนๆที่พึ่งจะลองจับ jQuery อาจจะยังไม่รู้จักว่า Selector มันคืออะไร จริงๆแล้วถ้าเคยเขียน JavaScript แบบเพียวๆมาก่อนถ้ายกตัวอย่างให้ดูนี่ คงต้องอ๋อกันทุกคนครับ ( document.getElementById(“id”) ) คุ้นๆใหมครับกับรูปแบบนี้ Selector ของ jQuery ก็ทำงานเหมือนกับ ที่ผมยกตัวอย่างขึ้นมาครับ แต่มันสั้นกว่า และง่ายกว่ามาก ความสามารถนี่เอาไปปรับใช้กับงานได้อย่างรวดเร็ว ใครสนใจหัวข้อนี้คลิกเข้ามาอ่านได้เลยครับผมจะยกตัวอย่าง Selector บางชนิดให้พอเป็นข้อมูลเพื่อเอาไปต่อยอดกันได้อีกนะครับ

Element ตัวอย่าง $(“td”) ตัวอย่างนี้เป็นการ select HTML element tag “TD” ที่อยู่ใน tag Table
#id ตัวอย่่าง $(‘#myDIV”) เป็นการ selector element ด้วยชื่อข id ของ element นั้นๆ
selector,selector ตัวอย่าง $(“input:buttom,input:text”) เป็นการ select แบบ multi หรือ select แบบหลายๆ element โดยใช้ comma “,” ในการขั้น
ancestor descendant ตัวอย่าง $(“#myDIV a”) เป็นการ select tag HTML “a” ใน element ที่มี ID ชื่อ id=”myDIV”
:filter ตัวอย่าง $(“input:button) เป็นการ filter เอาเฉพาะ element ที่มี type เป็น button เท่านั้น

นี่เป็นตัวอย่างของการใช้ selector ของ jQuery ครับส่วน selector แล้วจะเอาไปทำอะไรต่อนั้นก็ขึ้นอยู่กับเราละครับว่าจะเอาไปใช้งาน หรือ ทำอะไรต่อ เพราะเวลาเรา select element นั้นๆได้แล้ว เราก็จะได้ object ของมันออกมาด้วย ก็ลองๆทำความเข้าใจในส่วนนี้ดูครับ ถ้าไม่เข้าใจตรงใหนเข้าไปตั้งกระทู้สอบถามได้ที่ Webboard ของเราได้เลยนะครับ http://www.jquery.in.th/forums