ตัวเลือก jQuery
ตัวเลือก jQuery เป็นหนึ่งในส่วนที่สำคัญที่สุดของไลบรารี jQuery
ตัวเลือก jQuery
ตัวเลือก jQuery ให้คุณเลือกและจัดการองค์ประกอบ HTML
ตัวเลือก jQuery ใช้เพื่อ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML ตามชื่อ รหัส คลาส ประเภท คุณลักษณะ ค่าของแอตทริบิวต์ และอื่นๆ อีกมากมาย มันขึ้นอยู่กับตัวเลือก CSS ที่มีอยู่ และนอกจากนี้ยังมีตัวเลือกที่กำหนดเองบางตัว
ตัวเลือกทั้งหมดใน jQuery เริ่มต้นด้วยเครื่องหมายดอลลาร์และวงเล็บ: $()
ตัวเลือกองค์ประกอบ
ตัวเลือกองค์ประกอบ jQuery เลือกองค์ประกอบตามชื่อองค์ประกอบ
คุณสามารถเลือก<p>องค์ประกอบทั้งหมดบนหน้าดังนี้:
$("p")
ตัวอย่าง
เมื่อผู้ใช้คลิกที่ปุ่ม<p>องค์ประกอบทั้งหมดจะถูกซ่อน:
ตัวอย่าง
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
ตัวเลือก #id
ตัวเลือก jQuery ใช้แอตทริบิวต์ id ของแท็ก HTML เพื่อค้นหาองค์ประกอบเฉพาะ#id
รหัสควรไม่ซ้ำกันภายในหน้า ดังนั้นคุณควรใช้ตัวเลือก #id เมื่อคุณต้องการค้นหาองค์ประกอบเดียวที่ไม่ซ้ำ
หากต้องการค้นหาองค์ประกอบที่มีรหัสเฉพาะ ให้เขียนอักขระแฮช ตามด้วยรหัสขององค์ประกอบ HTML:
$("#test")
ตัวอย่าง
เมื่อผู้ใช้คลิกที่ปุ่ม องค์ประกอบที่มี id="test" จะถูกซ่อนไว้:
ตัวอย่าง
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class Selector
ตัวเลือก jQuery .classค้นหาองค์ประกอบที่มีคลาสเฉพาะ
หากต้องการค้นหาองค์ประกอบที่มีคลาสเฉพาะ ให้เขียนอักขระจุด ตามด้วยชื่อของคลาส:
$(".test")
ตัวอย่าง
เมื่อผู้ใช้คลิกที่ปุ่ม องค์ประกอบที่มี class="test" จะถูกซ่อนไว้:
ตัวอย่าง
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
ตัวอย่างเพิ่มเติมของ jQuery Selectors
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
ใช้jQuery Selector Tester ของเรา เพื่อสาธิตตัวเลือกต่างๆ
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือก jQuery ทั้งหมด โปรดไปที่การอ้างอิงตัวเลือก jQueryของ เรา
ฟังก์ชันในไฟล์ที่แยกจากกัน
หากเว็บไซต์ของคุณมีหน้าเว็บจำนวนมาก และคุณต้องการให้ฟังก์ชัน jQuery ง่ายต่อการบำรุงรักษา คุณสามารถใส่ฟังก์ชัน jQuery ไว้ในไฟล์ .js แยกต่างหากได้
เมื่อเราสาธิต jQuery ในบทช่วยสอนนี้ ฟังก์ชันต่างๆ จะถูกเพิ่มลงใน<head>
ส่วนโดยตรง อย่างไรก็ตาม บางครั้งควรวางไว้ในไฟล์แยกต่างหาก เช่นนี้ (ใช้แอตทริบิวต์ src เพื่ออ้างถึงไฟล์ .js):
ตัวอย่าง
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>