การเขียน JavaScript มักเริ่มต้นโดยการเลือกออบเจ็คที่จะทำงานด้วย ระบุคำสั่งหรือระบุเหตุการณ์ให้ทำงานต่างๆ การเลือกออบเจ็คในภาษา JavaScript ถ้ามีเงือนไขที่ซับซ้อนก็จะเขียนได้ยากเพราะต้องใช้วิธีไต่ Dom เข้าไปที่ละชั้นๆ JQuery เข้ามาแก้ปัญหาส่วนนี้โดยมี API selectors เข้ามาทดแทนให้เขียนได้ง่ายขึ้น อย่างเช่น
<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”) |
About the author