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