ในบทนี้ เราจะได้เรียนรู้วิธีค้นหาองค์ประกอบบนหน้าตามคุณลักษณะ

ใน jQuery การเลือกองค์ประกอบตามแอตทริบิวต์จะดำเนินการตามข้อกำหนด CSS

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

ตัวอย่างเช่น:

... ... ... // เลือกองค์ประกอบ a ที่มีแอตทริบิวต์ $("a");

ค่าแอตทริบิวต์ในนิพจน์ตัวเลือกจะต้องอยู่ในเครื่องหมายคำพูด ทำได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้:

• เครื่องหมายคำพูดคู่ภายในเครื่องหมายคำพูดเดี่ยว: $("a")
• เครื่องหมายคำพูดเดี่ยวภายในเครื่องหมายคำพูดคู่: $("")
• หลีกเลี่ยงเครื่องหมายคำพูดเดี่ยวภายในเครื่องหมายคำพูดเดี่ยว: $("a")
• หลีกเลี่ยงเครื่องหมายคำพูดคู่ภายในเครื่องหมายคำพูดคู่: $("a")

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

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) ที่มีค่าเท่ากับสตริงที่กำหนด (ค่า) หรือเริ่มต้นด้วยสตริงที่กำหนด (ค่า) ตามด้วยยัติภังค์

ตัวอย่างเช่น เลือกองค์ประกอบ div ทั้งหมดที่มีแอตทริบิวต์คลาสที่มีค่าเท่ากับ alert หรือเริ่มต้นด้วย alert-

...

... ... ... ... ... //เลือกองค์ประกอบ div ทั้งหมดที่มีแอตทริบิวต์คลาส //ด้วยการแจ้งเตือนค่าหรือด้วยค่าที่ขึ้นต้นด้วย alert- $("div");

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) ด้วยค่าที่มีสตริงย่อยที่ระบุ (ค่า)

ตัวอย่างเช่น: เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ href ซึ่งมีสตริงย่อย youtube เป็นค่า:

...... ... //เลือกองค์ประกอบที่มีแอตทริบิวต์ href ที่มีค่า //ประกอบด้วยสตริงย่อย youtube $("");

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) โดยมีค่าที่มีค่าที่กำหนด (ค่า) เป็นหนึ่งในค่าของมัน (เช่น แยกจากค่าอื่นด้วยช่องว่าง) หรือเท่ากับค่านั้น (ค่า)

ตัวอย่างเช่น เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์คลาสที่มีค่าที่มีค่า btn เป็นหนึ่งในค่าของมัน (เช่น แยกจากค่าอื่นด้วยช่องว่าง) หรือเท่ากับ btn:

... ... ส่ง ... ... $("a");

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) ด้วยค่าที่ลงท้ายด้วยค่าที่กำหนด (ค่า)

ตัวอย่างเช่น เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ href ที่ลงท้ายด้วย ".zip"

... ... ... //เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ href ลงท้ายด้วย .zip $("a");

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) ตั้งค่าเป็นค่า

ตัวอย่างเช่น เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ประเภทด้วยปุ่มค่า:

ข้อมูลการสั่งซื้อ $("");

เลือกองค์ประกอบที่ไม่มีแอตทริบิวต์ที่ระบุ (ชื่อ) หรือที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) แต่ไม่มีค่าที่ระบุ (ค่า)

ตัวอย่างเช่น เลือกองค์ประกอบที่ไม่มีแอตทริบิวต์ rel หรือมีแอตทริบิวต์ แต่ไม่มีค่า nofollow

... ... ... ... $("a");

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) ด้วยค่าที่เริ่มต้นด้วยค่าที่กำหนด (ค่า)

ตัวอย่างเช่น เลือกองค์ประกอบทั้งหมดที่มีคลาส btn และแอตทริบิวต์ href ที่มีค่าขึ้นต้นด้วย "http"

...... ... $("a.btn");

เลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ (ชื่อ) ค่าของแอตทริบิวต์ (ชื่อ) นี้สามารถเป็นอะไรก็ได้

ตัวอย่างเช่น เลือกรูปภาพ (img) ที่มีแอตทริบิวต์ Alt:

$("img");

- เลือกองค์ประกอบที่มีคุณสมบัติที่ระบุ (name1 และ name2) มีค่าที่สอดคล้องกัน (Value1 และ Value2)

หากจำเป็น คุณสามารถใช้ตัวเลือกแอตทริบิวต์ต่างๆ ร่วมกันเพื่อเลือกองค์ประกอบได้ ในกรณีนี้ เฉพาะองค์ประกอบที่ตรงกับตัวเลือกที่ระบุทั้งหมดเท่านั้นที่จะถูกเลือก:

- //attr1 - ตัวเลือกแอตทริบิวต์ 1 //attr2 - ตัวเลือกแอตทริบิวต์ 2 //attrN - ตัวเลือกแอตทริบิวต์ N

ตัวอย่างเช่น เลือกองค์ประกอบที่มีแอตทริบิวต์ id แอตทริบิวต์ href ที่ขึ้นต้นด้วย http และแอตทริบิวต์คลาสที่มีค่าที่มี btn เป็นหนึ่งในค่าหรือเท่ากับ btn:

... ... $("ก");

วิธีการนี้มีกรณีการใช้งานสามกรณี:

ค้นหาองค์ประกอบภายในองค์ประกอบที่เลือก โดยปล่อยให้องค์ประกอบเหล่านั้นอยู่ในวัตถุ jQuery ที่กำหนด

ค้นหาองค์ประกอบ องค์ประกอบภายในองค์ประกอบที่เลือก พารามิเตอร์ องค์ประกอบถูกระบุเป็นองค์ประกอบ DOM

ตัวอย่างการใช้งาน:

ตัวอย่างข้างต้นเป็นเพียงการสาธิตความสามารถของเมธอด .find() เท่านั้น ตัวอย่างเช่น การค้นหาองค์ประกอบ span ที่อยู่ภายใน div ในลักษณะนี้จะถูกต้องมากกว่า:

$("ช่วง div")

Find() ใช้งานได้สะดวกเมื่อพบองค์ประกอบบางอย่างแล้ว และคุณจำเป็นต้องค้นหาองค์ประกอบภายในองค์ประกอบเหล่านั้น:

// ค้นหาองค์ประกอบ ul ทั้งหมดบนหน้า var $ulElements = $("ul"); // ----- โค้ดบางส่วน... ----- // ค้นหาองค์ประกอบ li ด้วยคลาส userBox ภายใน $ulElements $ulElements.find("li.userBox");

นอกจากนี้ .find() ยังสะดวกสำหรับการใช้งานในเมธอดเชน:

$("ul") // ค้นหาองค์ประกอบ ul ทั้งหมดบนเพจ addClass("listElements") // เพิ่มคลาส ul listElements .find("li.userBox") // ค้นหาองค์ประกอบ li ด้วยคลาส userBox ภายใน ul" ov.remove(); // และลบทิ้ง

jQuery รองรับเฉพาะตัวเลือก CSS ที่เลือก องค์ประกอบ DOM- ตัวอย่างเช่น ไม่รองรับ :visited , :hover และ :first-line

ตัวเลือกพื้นฐานจะคุ้นเคยกับคุณหากคุณเคยสร้างเทมเพลต CSS อย่างน้อย 1 รายการ คุณอาจใช้ตัวเลือกเหล่านี้ 90% ของเวลาที่คุณทำงานกับ jQuery:

คุณยังสามารถรวมตัวเลือกหลายตัวให้เป็นอันเดียวได้โดยใช้เครื่องหมายจุลภาค jQuery จะเลือกองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกใด ๆ ตัวอย่างเช่น:

// เลือก div ทั้งหมดด้วย class.myClass รวมถึงย่อหน้าทั้งหมด var SelectedElements = $("div.myClass, p");

ตัวเลือกพื้นฐานมีประโยชน์มากเมื่อคุณต้องการเลือกย่อหน้าทั้งหมดในหน้าหรือองค์ประกอบที่คุณต้องการเลือก คลาสซีเอสเอสหรือบัตรประจำตัว

อย่างไรก็ตาม บางครั้งคุณจำเป็นต้องเลือกองค์ประกอบเฉพาะที่ไม่มีคลาสหรือ ID และไม่มีวิธีใดที่จะเพียงแค่เพิ่มคลาสหรือ ID ลงไป องค์ประกอบนี้ในมาร์กอัป สถานการณ์นี้อาจเกิดขึ้นเมื่อใช้ CMS กับการแก้ไข เทมเพลต HTMLหรือเมื่อทำงานกับเนื้อหาที่ผู้ใช้สร้างขึ้น

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

• รูปภาพโดยแอตทริบิวต์ src
• ลิงก์ตามแอตทริบิวต์ href
• ช่องป้อนข้อมูลแบบฟอร์มทั้งหมดที่มีแอตทริบิวต์ type="checkbox"

jQuery มีตัวเลือกมากมายที่สามารถใช้เพื่อเลือกองค์ประกอบตามแอตทริบิวต์:

คุณสามารถรวมตัวเลือกแอตทริบิวต์เพื่อจำกัดการเลือกของคุณให้แคบลง ตัวอย่างเช่น:

// เลือกเฉพาะรูปภาพที่มีความกว้าง 300 px และสูง 200 px var SelectedImages = $("img");

ตัวเลือก "แอตทริบิวต์ประกอบด้วยคำนำหน้า" ดูไม่มีประสิทธิภาพ แต่ถูกสร้างขึ้นเพื่อจัดการแอตทริบิวต์ภาษา เช่น lang="en" และ lang="en-US"

หากไม่สามารถจำกัดขอบเขตการเลือกให้แคบลงด้วยตัวเลือกและคุณลักษณะพื้นฐานได้ คุณสามารถ "เจาะลึก" เข้าไปในเนื้อหาขององค์ประกอบเพื่อพิจารณาว่าเหมาะสมสำหรับการเลือกหรือไม่ jQuery มีตัวเลือก 4 ตัวสำหรับงานนี้:

ตัวอย่างต่อไปนี้แสดงวิธีใช้ :contains() ร่วมกับตัวเลือกคลาส เพื่อเลือกย่อหน้าที่มีคลาสเฉพาะ โดยมีเงื่อนไขเพิ่มเติมว่าเนื้อหาของบรรทัดใดบรรทัดหนึ่ง (หรือบรรทัด) ปรากฏอยู่:

// เลือกย่อหน้าทั้งหมดที่มีคลาส "intro" // และยังมีข้อความ "MegaWidget" var SelectedElements = $("p.intro:contains("MegaWidget")"); // เลือกย่อหน้าทั้งหมดที่มีคลาส "intro" // และมีทั้ง "MegaWidget" และ "WonderWidget" var SelectedElements = $("p.intro:contains("MegaWidget"):contains("WonderWidget")");

อีกวิธีหนึ่งในการเลือกองค์ประกอบใน jQuery คือการพิจารณาว่าองค์ประกอบเหล่านั้นเกี่ยวข้องกันอย่างไรบนเพจ คุณอาจรู้จักตัวเลือกเหล่านี้มากมายจากการทำงานกับ CSS:

นอกจากภารกิจแล้ว หมายเลขเฉพาะเด็กที่ใช้:nth-child() คุณสามารถระบุคู่ (เพื่อเลือกลูกที่เป็นเลขคู่ทั้งหมด) คี่ (เพื่อเลือกลูกที่เป็นเลขคี่ทั้งหมด) หรือนิพจน์ (เช่น "li:nth-child(3n+) 2) " เลือกทุกองค์ประกอบที่สามในรายการ และเริ่มนับจากองค์ประกอบที่สอง)

ตัวอย่างต่อไปนี้เลือกเซลล์แรกของแถวคี่ทั้งหมดในตารางที่มีรหัส "myTable" :

Var SelectedElements = $("table#myTable tr:nth-child(odd) > td:first-child");

องค์ประกอบของฟอร์มมีคุณสมบัติเฉพาะบางอย่างที่ต้องใช้เทคนิคบางอย่างในการเลือก ตัวอย่างเช่น ช่องทำเครื่องหมาย รวมถึงช่องประเภทอื่นๆ มากมาย ถือเป็นองค์ประกอบอินพุต ดังนั้นในการเลือกช่องทำเครื่องหมายในแบบฟอร์มคุณต้องใช้ $("input")

ในทำนองเดียวกัน การระบุรายการที่เลือกในรายการที่เลือกหรือช่องทำเครื่องหมายที่เลือกไว้บนแบบฟอร์มอาจเป็นเรื่องน่าเบื่อ

โชคดีที่ jQuery มีตัวเลือกเฉพาะแบบฟอร์มหลายตัวที่ทำให้ชีวิตง่ายขึ้น:

นอกเหนือจากสิ่งที่เขียนไว้ คุณสามารถใช้ $("input:checkbox") เพื่อเลือกช่องทำเครื่องหมายทั้งหมดบนเพจได้ อย่างไรก็ตาม $("input:checkbox") จะเร็วกว่าเนื่องจาก jQuery สามารถใช้งานได้ ฟังก์ชันจาวาสคริปต์ getElementsByTagName() เพื่อจำกัดการค้นหาของคุณให้เหลือเพียงองค์ประกอบอินพุตอย่างรวดเร็ว นี่เป็นเรื่องจริงสำหรับ jQuery โดยทั่วไป - เพื่อเร่งความเร็วโค้ดของคุณ ให้จำกัดขอบเขตสำหรับตัวเลือกในการทำงานเสมอเมื่อเป็นไปได้ ตัวอย่างเช่น $("*") ช้ามากเนื่องจาก jQuery ต้องค้นหาทุกองค์ประกอบบนหน้า

ตัวอย่างต่อไปนี้ค้นหาแบบฟอร์มที่มีแอตทริบิวต์การดำเนินการที่มีค่า "mailform.php" จากนั้นเลือกปุ่มตัวเลือกที่เลือกไว้ทั้งหมดในแบบฟอร์ม:

Var SelectedElements = $("form input:radio:checked");

บางครั้งคุณจำเป็นต้องเลือกองค์ประกอบที่คุณทราบว่าอยู่ในชุดขององค์ประกอบที่เลือกไว้ก่อนหน้านี้ ตัวอย่างเช่น คุณต้องเลือกย่อหน้าแรกซึ่งมีคลาส "myClass" เพื่อให้ตัวอย่างซับซ้อนขึ้น สมมติว่าคุณต้องเลือกรายการทั้งหมดในรายการที่มีคลาส "myClass" จากนั้นเลือกรายการที่ 5 จากชุดผลลัพธ์

jQuery มีตัวเลือกเจ็ดตัวที่สามารถใช้เพื่อจำกัดขอบเขตการค้นหาตามตำแหน่งขององค์ประกอบ:

โปรดทราบว่าตัวเลือกเหล่านี้ไม่ทำงานในลักษณะเดียวกับ :first-child , :last-child ฯลฯ ตัวอย่างเช่น li.myClass:first-child เลือกเฉพาะรายการที่มีคลาส "myClass" ซึ่งเป็นรายการแรกในรายการที่เกี่ยวข้อง และ li.myClass:ขั้นแรก ค้นหารายการทั้งหมดบนเพจที่มีคลาส "myClass" จากนั้นเลือกรายการแรกในชุดผลลัพธ์การค้นหา

ตัวอย่างต่อไปนี้เลือกเซลล์ทั้งหมดในสองแถวแรกของตารางที่มี ID "myTable" :

Var SelectedElements = $("table#myTable tr:lt(2) > td");

หากไม่มีตัวเลือกในรายการช่วยคุณเลือกองค์ประกอบที่ต้องการ ให้ลองใช้ตัวเลือกต่อไปนี้:

ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดบนเพจ ยกเว้นส่วนหัว h1:

Var SelectedElements = $(":header:not(h1)");

ในบทความนี้ เรามาดูวิธีการเลือกองค์ประกอบโดยใช้ตัวเลือก jQuery ถูกรื้อถอน ประเภทต่อไปนี้ตัวเลือก:

• ตัวเลือกพื้นฐานที่จะใช้ส่วนใหญ่ในการทำงานกับโปรเจ็กต์
• ตัวเลือกแอตทริบิวต์สำหรับการเลือกองค์ประกอบตามชื่อแอตทริบิวต์และค่าของมัน
• ตัวเลือกเนื้อหาซึ่งช่วยให้คุณสามารถเลือกองค์ประกอบตามเนื้อหาได้
• ตัวเลือกลำดับชั้น ซึ่งสามารถใช้เพื่อเลือกองค์ประกอบตามความสัมพันธ์กับองค์ประกอบอื่นๆ บนเพจ
• ตัวเลือกฟิลด์ฟอร์ม ซึ่งมอบวิธีง่ายๆ ในการเลือกองค์ประกอบฟิลด์ฟอร์มต่างๆ
• ตัวเลือกตำแหน่งสำหรับการเลือกองค์ประกอบตามตำแหน่งในชุดองค์ประกอบ
• ตัวเลือกเพิ่มเติม เช่น :not() เพื่อเลือกองค์ประกอบที่ไม่ตรงกับตัวเลือก และ :animated เพื่อเลือกองค์ประกอบแบบเคลื่อนไหว

อัปเดตครั้งล่าสุด: 11/11/2558

ฟังก์ชั่นที่สำคัญอย่างหนึ่งของ jQuery คือการเลือกองค์ประกอบ ในการทำบางสิ่งกับองค์ประกอบ จัดการองค์ประกอบเหล่านั้น ใช้วิธีการ jQuery กับองค์ประกอบเหล่านั้น อันดับแรกเราต้องได้รับองค์ประกอบเหล่านั้นก่อน ไลบรารีช่วยให้เราสามารถเลือกองค์ประกอบตามตัวเลือกได้อย่างสะดวก เราเพียงแค่ต้องส่งตัวเลือกไปยังฟังก์ชัน jQuery และเราจะได้องค์ประกอบที่เราต้องการซึ่งตรงกับตัวเลือกนี้ ตัวอย่างเช่น หากเราต้องการได้รับองค์ประกอบ img ทั้งหมด เราก็สามารถใช้นิพจน์ต่อไปนี้: $("img") ในกรณีนี้ "img" จะทำหน้าที่เป็นตัวเลือก

ลองดูที่ตัวเลือก jQuery พื้นฐานที่ใช้ในการเลือกองค์ประกอบ

เราสามารถใช้ตัวเลือกหลายตัวพร้อมกันเพื่อปรับแต่งการเลือกองค์ประกอบโดยละเอียดยิ่งขึ้น ตัวอย่างเช่น เรามีหน้าเว็บลักษณะนี้:

พจนานุกรม jQuery World

ในกรณีนี้ เราใช้ตัวเลือก #tab นั่นคือเราเลือกตารางซึ่งมี id=tab นิพจน์ CSS("สีพื้นหลัง", "สีเงิน") จะกำหนดสีขององค์ประกอบ - ในกรณีนี้คือสีเงิน

เมื่อเปิดหน้านี้ในเว็บเบราว์เซอร์ เราจะได้ภาพต่อไปนี้:

แต่เรายังสามารถใช้ชุดตัวเลือกเพื่อดำเนินการโดยละเอียดเพิ่มเติมได้ ตัวอย่างเช่น เราต้องการเพียงบรรทัดแรกซึ่งมีแอตทริบิวต์ class="tabhead" เท่านั้นที่จะแรเงา จากนั้นเราสามารถใช้ตัวเลือกต่อไปนี้: $("#tab .tabhead") ในกรณีนี้ ตัวเลือกจะเลือกองค์ประกอบที่มี class="tabhead" ที่อยู่ภายในองค์ประกอบที่มี id="tab"

ในเวลาเดียวกัน เราสามารถใช้ตัวเลือกที่แตกต่างกันมากมายเพื่อจำกัดการเลือกให้แคบลง เช่น: $("div#menu a.redStyle") ตัวอย่างเช่น ตัวเลือกนี้สามารถค้นหาองค์ประกอบต่อไปนี้:

เชื่อมโยงไปยังเว็บไซต์

ในกรณีนี้ เราใช้ตัวเลือกแบบลำดับชั้น ซึ่งหมายความว่าองค์ประกอบที่มีตัวเลือกตัวที่สองจะต้องอยู่ในองค์ประกอบที่มีตัวเลือกตัวแรก แต่นอกจากนี้ เรายังสามารถใช้ตัวเลือกลำดับชั้นได้หลายตัว:

เพื่อจำกัดการค้นหาให้แคบลง นอกเหนือจากตัวเลือกพื้นฐานและลำดับชั้นที่กล่าวถึงข้างต้น เราสามารถใช้ตัวเลือกแอตทริบิวต์ได้ ในกรณีนี้ jQuery จะส่งกลับองค์ประกอบตามค่าและคำจำกัดความของแอตทริบิวต์ที่ระบุ

ด้านบนเราใช้สัญกรณ์ต่อไปนี้เพื่อเลือกองค์ประกอบ: $(selector) สำนวนนี้มองผ่านทุกสิ่ง ต้นไม้ DOMไม่ว่าองค์ประกอบจะตรงกับตัวเลือกหรือไม่ อย่างไรก็ตาม เราสามารถจำกัดการค้นหาได้โดยใช้บริบทการค้นหา บริบทคือตัวเลือกซึ่งจำเป็นต้องเลือกองค์ประกอบ ตัวอย่างเช่น เรามีหน้าเว็บลักษณะนี้:

โลกของ jQuery jQuery(document).ready(function())( $(".open", "div#menu").css("พื้นหลังสี", "silver"); ));

เรามีลิงก์สามลิงก์ในหน้านี้ ซึ่งทั้งหมดมีคลาสเดียวกันที่กำหนดไว้ แต่มีลิงก์สองลิงก์ที่อยู่ในองค์ประกอบ div และนั่นคือสิ่งที่เราต้องการได้รับ จากนั้นเราใช้นิพจน์ $(".open", "div#menu") - ที่นี่พารามิเตอร์ตัวเลือกที่สองจะเป็นบริบทการเลือก และผลลัพธ์ในกรณีนี้จะเป็นหน้าต่อไปนี้:

สิ่งสำคัญคือต้องไม่สับสนระหว่างนิพจน์นี้กับการเลือกโดยใช้ตัวเลือกหลายตัว เช่น $(".open, div#menu ") ซึ่งเป็นนิพจน์ที่แตกต่างกันซึ่งจะให้ผลลัพธ์ที่แตกต่างกัน