jQuery - DOM Traversing
jQuery เป็นเครื่องมือที่ทรงพลังมากซึ่งมีวิธีการส่งผ่าน DOM ที่หลากหลายเพื่อช่วยให้เราเลือกองค์ประกอบในเอกสารแบบสุ่มและในวิธีการตามลำดับ DOM Traversal Methods ส่วนใหญ่ไม่ได้ปรับเปลี่ยนอ็อบเจ็กต์ jQuery และใช้เพื่อกรององค์ประกอบออกจากเอกสารตามเงื่อนไขที่กำหนด
ค้นหาองค์ประกอบตามดัชนี
พิจารณาเอกสารง่ายๆที่มีเนื้อหา HTML ต่อไปนี้ -
<html>
<head>
<title>The JQuery Example</title>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ด้านบนทุกรายการมีดัชนีของตัวเองและสามารถระบุตำแหน่งได้โดยตรงโดยใช้ eq(index) วิธีการดังตัวอย่างด้านล่าง
ทุกองค์ประกอบย่อยเริ่มต้นดัชนีจากศูนย์ดังนั้นรายการ 2จะเข้าถึงได้โดยใช้$("li").eq(1) และอื่น ๆ
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างง่ายๆที่เพิ่มสีให้กับรายการที่สอง
<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() {
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
การกรององค์ประกอบออก
filter( selector )สามารถใช้วิธีการกรององค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับตัวเลือกที่ระบุ เลือกสามารถเขียนได้โดยใช้ไวยากรณ์เลือกใด ๆ
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างง่ายๆที่ใช้สีกับรายการที่เกี่ยวข้องกับชนชั้นกลาง -
<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() {
$("li").filter(".middle").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list item 1</li>
<li class = "top">list item 2</li>
<li class = "middle">list item 3</li>
<li class = "middle">list item 4</li>
<li class = "bottom">list item 5</li>
<li class = "bottom">list item 6</li>
</ul>
</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ค้นหาองค์ประกอบลูกหลาน
find( selector )สามารถใช้วิธีการเพื่อค้นหาองค์ประกอบที่สืบทอดทั้งหมดขององค์ประกอบบางประเภท เลือกสามารถเขียนได้โดยใช้ไวยากรณ์เลือกใด ๆ
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่เลือก <span> องค์ประกอบทั้งหมดที่มีอยู่ใน <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").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<p>This is 1st paragraph and <span>THIS IS RED</span></p>
<p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
วิธีการกรอง JQuery DOM
ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์ซึ่งคุณสามารถใช้เพื่อกรององค์ประกอบต่างๆออกจากรายการองค์ประกอบ DOM -
| ซีเนียร์ | วิธีการและคำอธิบาย |
|---|---|
| 1 | eq (ดัชนี) ลดชุดขององค์ประกอบที่ตรงกันให้เหลือเพียงองค์ประกอบเดียว |
| 2 | ตัวกรอง (ตัวเลือก) ลบองค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับตัวเลือกที่ระบุ |
| 3 | ตัวกรอง (fn) ลบองค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับฟังก์ชันที่ระบุ |
| 4 | คือ (ตัวเลือก) ตรวจสอบการเลือกปัจจุบันเทียบกับนิพจน์และส่งกลับค่าจริงหากองค์ประกอบของการเลือกอย่างน้อยหนึ่งรายการตรงกับตัวเลือกที่กำหนด |
| 5 | แผนที่ (โทรกลับ) แปลชุดขององค์ประกอบในวัตถุ jQuery เป็นชุดของค่าอื่นในอาร์เรย์ jQuery (ซึ่งอาจมีหรือไม่มีองค์ประกอบก็ได้) |
| 6 | ไม่ (ตัวเลือก) ลบองค์ประกอบที่ตรงกับตัวเลือกที่ระบุออกจากชุดขององค์ประกอบที่ตรงกัน |
| 7 | สไลซ์ (เริ่ม, [จบ]) เลือกส่วนย่อยขององค์ประกอบที่ตรงกัน |
วิธีการข้าม JQuery DOM
ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์อื่น ๆ ซึ่งคุณสามารถใช้เพื่อค้นหาองค์ประกอบต่างๆใน DOM -
| ซีเนียร์ | วิธีการและคำอธิบาย |
|---|---|
| 1 | เพิ่ม (ตัวเลือก) เพิ่มองค์ประกอบที่จับคู่โดยตัวเลือกที่กำหนดให้กับชุดขององค์ประกอบที่ตรงกัน |
| 2 | และตนเอง () เพิ่มการเลือกก่อนหน้าในการเลือกปัจจุบัน |
| 3 | เด็ก ๆ ([ตัวเลือก]) รับชุดขององค์ประกอบที่มีชายด์ที่ไม่ซ้ำกันทั้งหมดของชุดองค์ประกอบที่ตรงกัน |
| 4 | ใกล้เคียงที่สุด (ตัวเลือก) รับชุดองค์ประกอบที่มีองค์ประกอบหลักที่ใกล้เคียงที่สุดซึ่งตรงกับตัวเลือกที่ระบุซึ่งรวมองค์ประกอบเริ่มต้น |
| 5 | เนื้อหา () ค้นหาโหนดลูกทั้งหมดภายในองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) หรือเอกสารเนื้อหาหากองค์ประกอบนั้นเป็น iframe |
| 6 | จบ () เปลี่ยนกลับการดำเนินการ 'ทำลายล้าง' ล่าสุดโดยเปลี่ยนชุดขององค์ประกอบที่ตรงกันเป็นสถานะก่อนหน้า |
| 7 | ค้นหา (ตัวเลือก) ค้นหาองค์ประกอบลูกหลานที่ตรงกับตัวเลือกที่ระบุ |
| 8 | ถัดไป ([ตัวเลือก]) รับชุดองค์ประกอบที่มีพี่น้องถัดไปที่ไม่ซ้ำกันของแต่ละชุดองค์ประกอบที่กำหนด |
| 9 | ถัดไปทั้งหมด ([ตัวเลือก]) ค้นหาองค์ประกอบพี่น้องทั้งหมดหลังองค์ประกอบปัจจุบัน |
| 10 | ชดเชยผู้ปกครอง () ส่งคืนคอลเล็กชัน jQuery ที่มีตำแหน่งแม่ขององค์ประกอบที่ตรงกันแรก |
| 11 | ผู้ปกครอง ([ตัวเลือก]) รับผู้ปกครองโดยตรงขององค์ประกอบ หากเรียกชุดขององค์ประกอบพาเรนต์จะส่งกลับชุดขององค์ประกอบหลักโดยตรงที่ไม่ซ้ำกัน |
| 12 | ผู้ปกครอง ([ตัวเลือก]) รับชุดองค์ประกอบที่มีบรรพบุรุษที่ไม่ซ้ำกันของชุดองค์ประกอบที่ตรงกัน (ยกเว้นองค์ประกอบราก) |
| 13 | ก่อนหน้า ([ตัวเลือก]) รับชุดองค์ประกอบที่มีพี่น้องก่อนหน้าที่ไม่ซ้ำกันของแต่ละชุดขององค์ประกอบที่ตรงกัน |
| 14 | ก่อนหน้าทั้งหมด ([ตัวเลือก]) ค้นหาองค์ประกอบพี่น้องทั้งหมดด้านหน้าองค์ประกอบปัจจุบัน |
| 15 | พี่น้อง ([ตัวเลือก]) รับชุดองค์ประกอบที่มีพี่น้องที่ไม่ซ้ำกันทั้งหมดของชุดองค์ประกอบที่ตรงกัน |