jQuery - ตัวเลือก

ไลบรารี jQuery ใช้ประโยชน์จากตัวเลือก Cascading Style Sheets (CSS) เพื่อให้เราเข้าถึงองค์ประกอบหรือกลุ่มขององค์ประกอบใน Document Object Model (DOM) ได้อย่างรวดเร็วและง่ายดาย

jQuery Selector เป็นฟังก์ชันที่ใช้นิพจน์เพื่อค้นหาองค์ประกอบที่ตรงกันจาก DOM ตามเกณฑ์ที่กำหนด คุณสามารถพูดได้ว่าตัวเลือกถูกใช้เพื่อเลือกองค์ประกอบ HTML อย่างน้อยหนึ่งรายการโดยใช้ jQuery เมื่อเลือกองค์ประกอบแล้วเราสามารถดำเนินการต่างๆกับองค์ประกอบที่เลือกนั้นได้

ฟังก์ชันโรงงาน $ ()

ตัวเลือก jQuery เริ่มต้นด้วยเครื่องหมายดอลลาร์และวงเล็บ - $(). ฟังก์ชั่นโรงงาน$() ใช้ประโยชน์จากสิ่งปลูกสร้างสามแบบต่อไปนี้ในขณะที่เลือกองค์ประกอบในเอกสารที่กำหนด -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1

Tag Name

แสดงชื่อแท็กที่มีอยู่ใน DOM ตัวอย่างเช่น$('p') เลือกย่อหน้าทั้งหมด <p> ในเอกสาร

2

Tag ID

แสดงแท็กที่พร้อมใช้งานกับ ID ที่ระบุใน DOM ตัวอย่างเช่น$('#some-id') เลือกองค์ประกอบเดียวในเอกสารที่มี ID ของ some-id

3

Tag Class

แสดงแท็กที่มีอยู่ในคลาสที่กำหนดใน DOM ตัวอย่างเช่น$('.some-class') เลือกองค์ประกอบทั้งหมดในเอกสารที่มีคลาสบางคลาส

รายการข้างต้นทั้งหมดสามารถใช้ด้วยตัวเองหรือใช้ร่วมกับตัวเลือกอื่น ๆ ตัวเลือก jQuery ทั้งหมดใช้หลักการเดียวกันยกเว้นการปรับแต่งบางอย่าง

NOTE - ฟังก์ชั่นโรงงาน $() เป็นคำพ้องความหมายของ jQuery()ฟังก์ชัน ดังนั้นในกรณีที่คุณใช้ไลบรารี JavaScript อื่นอยู่ที่ไหน$ เครื่องหมายขัดแย้งกับสิ่งอื่นคุณสามารถแทนที่ได้ $ ลงชื่อโดย jQuery ชื่อและคุณสามารถใช้ฟังก์ชัน jQuery() แทน $().

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ใช้ประโยชน์จากตัวเลือกแท็ก สิ่งนี้จะเลือกองค์ประกอบทั้งหมดที่มีชื่อแท็กp.

การสาธิตสด
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีใช้ Selectors?

ตัวเลือกมีประโยชน์มากและจะต้องใช้ในทุกขั้นตอนขณะใช้ jQuery พวกเขาได้รับองค์ประกอบที่แน่นอนที่คุณต้องการจากเอกสาร HTML ของคุณ

ตารางต่อไปนี้แสดงรายการตัวเลือกพื้นฐานสองสามตัวและอธิบายด้วยตัวอย่าง

ซีเนียร์ ตัวเลือกและคำอธิบาย
1 ชื่อ

เลือกองค์ประกอบทั้งหมดที่ตรงกับองค์ประกอบที่กำหนด Name.

2 #ID

เลือกองค์ประกอบเดียวที่ตรงกับที่กำหนด ID.

3 . ชั้น

เลือกองค์ประกอบทั้งหมดที่ตรงกับที่กำหนด Class.

4 สากล (*)

เลือกองค์ประกอบทั้งหมดที่มีอยู่ใน DOM

5 หลายองค์ประกอบ E, F, G

เลือกผลลัพธ์รวมของตัวเลือกที่ระบุทั้งหมด E, F หรือ G.

ตัวอย่างตัวเลือก

เช่นเดียวกับไวยากรณ์และตัวอย่างข้างต้นตัวอย่างต่อไปนี้จะทำให้คุณเข้าใจเกี่ยวกับการใช้ตัวเลือกที่มีประโยชน์ประเภทต่างๆ -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1

$('*')

ตัวเลือกนี้จะเลือกองค์ประกอบทั้งหมดในเอกสาร

2

$("p > *")

ตัวเลือกนี้จะเลือกองค์ประกอบทั้งหมดที่เป็นลูกขององค์ประกอบย่อหน้า

3

$("#specialID")

ฟังก์ชันตัวเลือกนี้รับองค์ประกอบที่มี id = "specialID"

4

$(".specialClass")

ตัวเลือกนี้ได้รับองค์ประกอบทั้งหมดที่มีระดับของspecialClass

5

$("li:not(.myclass)")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ที่ไม่มี class = "myclass"

6

$("a#specialID.specialClass")

ตัวเลือกนี้ตรงกับการเชื่อมโยงที่มี ID ของspecialIDและชั้นของspecialClass

7

$("p a.specialClass")

ตัวเลือกนี้จับคู่ลิงก์กับคลาสspecialClass ที่ประกาศไว้ภายใน <p> องค์ประกอบ

8

$("ul li:first")

ตัวเลือกนี้ได้รับเฉพาะองค์ประกอบ <li> แรกของ <ul>

9

$("#container p")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <p> ที่เป็นลูกหลานขององค์ประกอบที่มี ID ของภาชนะ

10

$("li > ul")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <ul> ซึ่งเป็นลูกขององค์ประกอบที่จับคู่โดย <li>

11

$("strong + em")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <em> ที่ตามด้วยองค์ประกอบพี่น้องที่จับคู่โดย <strong> ทันที

12

$("p ~ ul")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <ul> ตามองค์ประกอบพี่น้องที่จับคู่โดย <p>

13

$("code, em, strong")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <code> หรือ <em> หรือ <strong>

14

$("p strong, .myclass")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <strong> ที่เป็นลูกหลานขององค์ประกอบจับคู่โดย <p> เช่นเดียวกับองค์ประกอบทั้งหมดที่มีระดับของMyClass

15

$(":empty")

เลือกองค์ประกอบทั้งหมดที่ไม่มีลูก

16

$("p:empty")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <p> ที่ไม่มีลูก

17

$("div[p]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <div> ที่มีองค์ประกอบที่ตรงกับ <p>

18

$("p[.myclass]")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <p> ที่มีองค์ประกอบที่มีระดับของMyClass

19

$("a[@rel]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <a> ที่มีแอตทริบิวต์ rel

20

$("input[@name = myname]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <input> ซึ่งมีค่าชื่อเท่ากับmyname ทุกประการ

21

$("input[@name^=myname]")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <input> ที่มีค่าชื่อขึ้นต้นด้วยmyname

22

$("a[@rel$=self]")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <a> ที่มี relค่าแอตทริบิวต์ที่ลงท้ายด้วยตนเอง

23

$("a[@href*=domain.com]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <a> ที่มีค่า href ที่มี domain.com

24

$("li:even")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> ที่มีค่าดัชนีคู่

25

$("tr:odd")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <tr> ที่มีค่าดัชนีคี่

26

$("li:first")

เลือกองค์ประกอบ <li> แรก

27

$("li:last")

เลือกองค์ประกอบ <li> สุดท้าย

28

$("li:visible")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ที่มองเห็นได้

29

$("li:hidden")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ที่ซ่อนอยู่

30

$(":radio")

เลือกปุ่มตัวเลือกทั้งหมดในแบบฟอร์ม

31

$(":checked")

เลือกกล่องกาเครื่องหมายทั้งหมดในแบบฟอร์ม

32

$(":input")

เลือกเฉพาะองค์ประกอบของฟอร์ม (อินพุตเลือกพื้นที่ข้อความปุ่ม)

33

$(":text")

เลือกเฉพาะองค์ประกอบข้อความ (input [type = text])

34

$("li:eq(2)")

เลือกองค์ประกอบ <li> ที่สาม

35

$("li:eq(4)")

เลือกองค์ประกอบ <li> ที่ห้า

36

$("li:lt(2)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> องค์ประกอบก่อนองค์ประกอบที่สาม กล่าวอีกนัยหนึ่งคือสอง <li> องค์ประกอบแรก

37

$("p:lt(3)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <p> องค์ประกอบก่อนองค์ประกอบที่สี่ กล่าวอีกนัยหนึ่งคือสาม <p> องค์ประกอบแรก

38

$("li:gt(1)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> หลังจากองค์ประกอบที่สอง

39

$("p:gt(2)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <p> หลังจากองค์ประกอบที่สาม

40

$("div/p")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <p> ซึ่งเป็นลูกขององค์ประกอบที่จับคู่โดย <div>

41

$("div//code")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <code> ซึ่งเป็นลูกหลานขององค์ประกอบที่จับคู่โดย <div>

42

$("//p//a")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <a> ซึ่งเป็นลูกหลานขององค์ประกอบที่จับคู่โดย <p>

43

$("li:first-child")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ซึ่งเป็นลูกคนแรกของพาเรนต์

44

$("li:last-child")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ซึ่งเป็นลูกคนสุดท้ายของพาเรนต์

45

$(":parent")

เลือกองค์ประกอบทั้งหมดที่เป็นพาเรนต์ขององค์ประกอบอื่นรวมทั้งข้อความ

46

$("li:contains(second)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> ที่มีข้อความที่สอง

คุณสามารถใช้ตัวเลือกทั้งหมดข้างต้นกับองค์ประกอบ HTML / XML ในลักษณะทั่วไป ตัวอย่างเช่นถ้าตัวเลือก$("li:first") ใช้ได้กับ <li> องค์ประกอบแล้ว $("p:first") ยังใช้งานได้กับ <p> องค์ประกอบ