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> องค์ประกอบ