jQuery - การจัดการ DOM
JQuery มีวิธีการจัดการ DOM อย่างมีประสิทธิภาพ คุณไม่จำเป็นต้องเขียนโค้ดขนาดใหญ่เพื่อแก้ไขค่าแอตทริบิวต์ขององค์ประกอบใด ๆ หรือดึงโค้ด HTML ออกจากย่อหน้าหรือการหาร
JQuery จัดเตรียมเมธอดเช่น .attr (), .html () และ .val () ซึ่งทำหน้าที่เป็น getters ดึงข้อมูลจากองค์ประกอบ DOM เพื่อใช้ในภายหลัง
การจัดการเนื้อหา
html( ) วิธีการรับเนื้อหา html (innerHTML) ขององค์ประกอบแรกที่ตรงกัน
นี่คือไวยากรณ์สำหรับวิธีการ -
selector.html( )ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่ใช้เมธอด. html () และ. text (val) ที่นี่. html () ดึงเนื้อหา HTML จากอ็อบเจ็กต์จากนั้นเมธอด. text (val) กำหนดค่าของอ็อบเจ็กต์โดยใช้พารามิเตอร์ที่ผ่าน -
<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() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
การเปลี่ยนองค์ประกอบ DOM
คุณสามารถแทนที่องค์ประกอบ DOM ที่สมบูรณ์ด้วยองค์ประกอบ HTML หรือ DOM ที่ระบุ replaceWith( content ) วิธีนี้ตอบสนองจุดประสงค์นี้ได้เป็นอย่างดี
นี่คือไวยากรณ์สำหรับวิธีการ -
selector.replaceWith( content )นี่คือเนื้อหาที่คุณต้องการแทนที่จะเป็นองค์ประกอบดั้งเดิม อาจเป็น HTML หรือข้อความธรรมดา
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่จะแทนที่องค์ประกอบการหารด้วย "<h1> JQuery is Great </h1>" -
<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() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
การลบองค์ประกอบ DOM
อาจมีสถานการณ์เกิดขึ้นเมื่อคุณต้องการลบองค์ประกอบ DOM อย่างน้อยหนึ่งรายการออกจากเอกสาร JQuery มีสองวิธีในการจัดการกับสถานการณ์
empty( ) วิธีลบโหนดลูกทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันโดยที่เป็นวิธีการ remove( expr ) วิธีลบองค์ประกอบที่ตรงกันทั้งหมดออกจาก DOM
นี่คือไวยากรณ์สำหรับวิธีการ -
selector.remove( [ expr ])
or
selector.empty( )คุณสามารถส่งผ่านพารามิเตอร์ตัวexprเพื่อกรองชุดขององค์ประกอบที่จะถูกลบออก
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่จะนำองค์ประกอบออกทันทีที่คลิก -
<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() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
การแทรกองค์ประกอบ DOM
อาจเกิดสถานการณ์ขึ้นเมื่อคุณต้องการแทรกองค์ประกอบ DOM ใหม่ในเอกสารที่มีอยู่ของคุณ JQuery มีวิธีการต่างๆในการแทรกองค์ประกอบในตำแหน่งต่างๆ
after( content ) วิธีการแทรกเนื้อหาหลังจากแต่ละองค์ประกอบที่ตรงกันโดยที่เป็นวิธีการ before( content ) วิธีการแทรกเนื้อหาก่อนแต่ละองค์ประกอบที่ตรงกัน
นี่คือไวยากรณ์สำหรับวิธีการ -
selector.after( content )
or
selector.before( content )นี่คือเนื้อหาที่คุณต้องการแทรก อาจเป็น HTML หรือข้อความธรรมดา
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างที่มีการแทรกองค์ประกอบ <div> ก่อนองค์ประกอบที่คลิก -
<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() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
วิธีการจัดการ DOM
ตารางต่อไปนี้แสดงวิธีการทั้งหมดที่คุณสามารถใช้เพื่อจัดการองค์ประกอบ DOM -
| ซีเนียร์ | วิธีการและคำอธิบาย |
|---|---|
| 1 | หลัง (เนื้อหา) แทรกเนื้อหาหลังจากแต่ละองค์ประกอบที่ตรงกัน |
| 2 | ผนวก (เนื้อหา) เพิ่มเนื้อหาที่ด้านในของทุกองค์ประกอบที่ตรงกัน |
| 3 | appendTo (ตัวเลือก) ผนวกองค์ประกอบที่ตรงกันทั้งหมดเข้ากับชุดขององค์ประกอบอื่นที่ระบุไว้ |
| 4 | ก่อนหน้า (เนื้อหา) แทรกเนื้อหาก่อนองค์ประกอบที่ตรงกันแต่ละรายการ |
| 5 | โคลน (บูล) โคลนจับคู่องค์ประกอบ DOM และตัวจัดการเหตุการณ์ทั้งหมดแล้วเลือกโคลน |
| 6 | โคลน () โคลนจับคู่องค์ประกอบ DOM และเลือกโคลน |
| 7 | ว่างเปล่า () ลบโหนดลูกทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกัน |
| 8 | html (วาล) ตั้งค่าเนื้อหา html ของทุกองค์ประกอบที่ตรงกัน |
| 9 | html () รับเนื้อหา html (innerHTML) ขององค์ประกอบแรกที่ตรงกัน |
| 10 | insertAfter (ตัวเลือก) แทรกองค์ประกอบที่ตรงกันทั้งหมดหลังจากที่ระบุไว้ชุดขององค์ประกอบอื่น |
| 11 | insertBefore (ตัวเลือก) แทรกองค์ประกอบที่ตรงกันทั้งหมดก่อนชุดองค์ประกอบอื่นที่ระบุ |
| 12 | นำหน้า (เนื้อหา) ใส่เนื้อหาไว้ข้างในของทุกองค์ประกอบที่ตรงกัน |
| 13 | prependTo (ตัวเลือก) นำหน้าองค์ประกอบที่ตรงกันทั้งหมดกับชุดขององค์ประกอบอื่นที่ระบุไว้ |
| 14 | ลบ (expr) ลบองค์ประกอบที่ตรงกันทั้งหมดออกจาก DOM |
| 15 | แทนที่ทั้งหมด (ตัวเลือก) แทนที่องค์ประกอบที่จับคู่โดยตัวเลือกที่ระบุด้วยองค์ประกอบที่ตรงกัน |
| 16 | แทนที่ด้วย (เนื้อหา) แทนที่องค์ประกอบที่ตรงกันทั้งหมดด้วยองค์ประกอบ HTML หรือ DOM ที่ระบุ |
| 17 | ข้อความ (วาล) ตั้งค่าเนื้อหาข้อความขององค์ประกอบที่ตรงกันทั้งหมด |
| 18 | ข้อความ () รับเนื้อหาข้อความรวมขององค์ประกอบที่ตรงกันทั้งหมด |
| 19 | ห่อ (elem) ห่อองค์ประกอบที่ตรงกันแต่ละรายการด้วยองค์ประกอบที่ระบุ |
| 20 | ห่อ (html) รวมองค์ประกอบที่ตรงกันแต่ละรายการด้วยเนื้อหา HTML ที่ระบุ |
| 21 | ห่อทั้งหมด (elem) รวมองค์ประกอบทั้งหมดในชุดที่ตรงกันให้เป็นองค์ประกอบ Wrapper เดียว |
| 22 | wrapAll (html) รวมองค์ประกอบทั้งหมดในชุดที่ตรงกันให้เป็นองค์ประกอบ Wrapper เดียว |
| 23 | wrapInner (องค์ประกอบ) รวมเนื้อหาย่อยภายในของแต่ละองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) ด้วยองค์ประกอบ DOM |
| 24 | wrapInner (html) รวมเนื้อหาย่อยภายในของแต่ละองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) ด้วยโครงสร้าง HTML |