jQuery ตัวเลือก

เลือกตัวแปลอนุญาตให้คุณปฏิบัติต่อกลุ่มตัวแปลหรือตัวแปลเดี่ยว

jQuery ตัวเลือก

ในบทที่ผ่านมา เราได้แสดงตัวอย่างเกี่ยวกับวิธีการเลือกตัวแปล HTML

จุดสำคัญคือการเรียนรู้ว่า jQuery ความเลือกเลือกตัวแปลที่คุณต้องการให้มีผลกระทบ

เลือกเลขฉันท์ element และเลือกเลขฉันท์ของ jQuery จากคุณสมบัติ อนุญาตให้คุณเลือก element HTML ผ่านแบบออกแบบ ชื่อแท็ก หรือเนื้อหา

เลือกเลขฉันท์ อนุญาตให้คุณปฏิบัติต่อกลุ่ม element หรือ element หนึ่ง

ในคำว่า HTML DOM:

เลือกเลขฉันท์ อนุญาตให้คุณปฏิบัติต่อกลุ่ม element หรือ node DOM หนึ่ง

เลือกเลขฉันท์ element ของ jQuery

jQuery ใช้เลือกเลขฉันท์ CSS เพื่อเลือก element HTML

$("p") คัดกรอง element <p>

$("p.intro") คัดกรอง element <p> ที่มี class="intro"

$("p#demo") คัดกรอง element <p> ที่มี id="demo"

เลือกเลขฉันท์ของ jQuery จากคุณสมบัติ

jQuery ใช้ XPath แสดงความเห็นเพื่อเลือก element ที่มีคุณสมบัติเฉพาะ

$("[href]") คัดกรอง element ที่มี attribute href

$("[href='#']") คัดกรอง element ที่มีค่า href เท่า "#"

$("[href!='#']") คัดกรอง element ที่มีค่า href ไม่เท่า "#"

$("[href$='.jpg']") คัดกรอง element ที่มีค่า href สิ้นสุดด้วย ".jpg"

เลือกเลขฉันท์ CSS ของ jQuery

เลือกเลขฉันท์ CSS ของ jQuery สามารถเปลี่ยนคุณสมบัติ CSS ของ element HTML ได้

ตัวอย่างด้านล่างนี้เปลี่ยนสีหลังของ element ทั้งหมด <p> ให้เป็นสีแดง:

ตัวอย่าง

$("p").css("background-color","red");

ลองเลือกเลขฉันท์ด้วยตัวเอง

ตัวอย่างเลือกเลขฉันท์

ศัพท์ทั้งหมด คำอธิบาย
$(this) element HTML ปัจจุบัน
$("p") ทั้งหมด element <p>
$("p.intro") ทั้งหมด element <p> ที่มี class="intro"
$(".intro") ทั้งหมด element ที่มี class="intro"
$("#intro") element ที่ id="intro"
$("ul li:first") element <li> แรกของแต่ละ <ul>
$("[href$='.jpg']") ทั้งหมด attribute href ที่มีค่าที่สิ้นสุดด้วย ".jpg"
$("div#intro .head") ทั้งหมด element ที่มี class="head" ใน element <div> ที่ id="intro"

สำหรับคู่มือเลือกเลขฉันท์ที่เต็มที่ โปรดเข้าชม คู่มือเลือกเลขฉันท์ jQuery。