การเขียน JavaScript มักเริ่มต้นโดยการเลือกออบเจ็คที่จะทำงานด้วย ระบุคำสั่งหรือระบุเหตุการณ์ให้ทำงานต่างๆ การเลือกออบเจ็คในภาษา JavaScript ถ้ามีเงือนไขที่ซับซ้อนก็จะเขียนได้ยากเพราะต้องใช้วิธีไต่ DOM เข้าไปที่ละชั้นๆ JQuery เข้ามาแก้ปัญหาส่วนนี้โดยมี API selectors เข้ามาทดแทนให้เขียนได้ง่ายขึ้น อย่าง เช่น
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <form id="demoF"> <table class="democlass"> <tr> <td><label for="q0">เพศ</label> <select name="prename" id="q0"> <option value="1">นาย</option> <option value="2">นาง</option> <option value="3">นางสาว</option> </select></td> </tr> <tr> <td><label for="q1">ชื่อ</label> <input name="firstname" id="q1" /></td> </tr> <tr> <td><label for="q2">นามสกุล</label> <input name="lastname" id="q1" /></td> </tr> <tr> <td><label for="q3">ตกลง</label> <input type="checkbox" name="agree" id="q3" value="agree" /></td> </tr> </table></form> |
| เลือก | รูปแบบ JQuery | ตัวอย่าง |
| id | $(‘#ชื่อ id’) | $(‘#demoF’) |
| attribute | $ (‘[attribute|=value]’) | $ (‘[name|=firstname]’) |
| Checkbox ที่ถูกเลือก | $(“:checkbox”) | $(‘:checkbox’) |
| Selected ที่ถูกเลือก | $(“select option:selected”) | $(“select option:selected”) |
| เลือกจาก CSS class | $(.ชื่อ class) | $(‘.democlass’) |
| ลูกตัวแรก | $(“แม่:first”) | $(“tr:first”) |