jQuery - Thao tác DOM

JQuery cung cấp các phương thức để thao tác DOM một cách hiệu quả. Bạn không cần phải viết mã lớn để sửa đổi giá trị của bất kỳ thuộc tính nào của phần tử hoặc để trích xuất mã HTML từ một đoạn hoặc bộ phận.

JQuery cung cấp các phương thức như .attr (), .html () và .val () đóng vai trò là getters, lấy thông tin từ các phần tử DOM để sử dụng sau này.

Thao tác nội dung

Các html( ) phương thức nhận nội dung html (innerHTML) của phần tử phù hợp đầu tiên.

Đây là cú pháp của phương thức -

selector.html( )

Thí dụ

Sau đây là một ví dụ sử dụng các phương thức .html () và .text (val). Ở đây .html () lấy nội dung HTML từ đối tượng và sau đó phương thức .text (val) đặt giá trị của đối tượng bằng cách sử dụng tham số được truyền vào -

<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>

Điều này sẽ tạo ra kết quả sau:

Thay thế phần tử DOM

Bạn có thể thay thế một phần tử DOM hoàn chỉnh bằng các phần tử HTML hoặc DOM được chỉ định. CácreplaceWith( content ) phương pháp phục vụ mục đích này rất tốt.

Đây là cú pháp của phương thức -

selector.replaceWith( content )

Đây là nội dung bạn muốn có thay vì yếu tố gốc. Đây có thể là HTML hoặc văn bản đơn giản.

Thí dụ

Sau đây là một ví dụ sẽ thay thế phần tử chia bằng "<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>

Điều này sẽ tạo ra kết quả sau:

Xóa các phần tử DOM

Có thể có một tình huống khi bạn muốn xóa một hoặc nhiều phần tử DOM khỏi tài liệu. JQuery cung cấp hai phương pháp để xử lý tình huống.

Các empty( ) phương thức loại bỏ tất cả các nút con khỏi tập hợp các phần tử phù hợp với tư cách là phương thức remove( expr ) phương thức xóa tất cả các phần tử phù hợp khỏi DOM.

Đây là cú pháp của phương thức -

selector.remove( [ expr ])

or 

selector.empty( )

Bạn có thể truyền tham số tùy chọn expr để lọc tập hợp các phần tử cần loại bỏ.

Thí dụ

Sau đây là một ví dụ trong đó các phần tử sẽ bị xóa ngay khi chúng được nhấp vào -

<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>

Điều này sẽ tạo ra kết quả sau:

Chèn các phần tử DOM

Có thể có tình huống khi bạn muốn chèn một hoặc nhiều phần tử DOM mới vào tài liệu hiện có của mình. JQuery cung cấp nhiều phương thức khác nhau để chèn các phần tử tại các vị trí khác nhau.

Các after( content ) phương thức chèn nội dung sau mỗi phần tử phù hợp với vị trí phương thức before( content ) phương thức chèn nội dung trước mỗi phần tử phù hợp.

Đây là cú pháp của phương thức -

selector.after( content )

or

selector.before( content )

Đây là nội dung bạn muốn chèn. Đây có thể là HTML hoặc văn bản đơn giản.

Thí dụ

Sau đây là một ví dụ trong đó các phần tử <div> đang được chèn ngay trước phần tử được nhấ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() {
            $("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>

Điều này sẽ tạo ra kết quả sau:

Phương pháp thao tác DOM

Bảng sau liệt kê tất cả các phương pháp mà bạn có thể sử dụng để thao tác các phần tử DOM -

Sr.No. Phương pháp & Mô tả
1 sau (nội dung)

Chèn nội dung sau mỗi phần tử phù hợp.
2 nối thêm (nội dung)

Nối nội dung vào bên trong mỗi phần tử phù hợp.
3 appendTo (bộ chọn)

Nối tất cả các phần tử đã so khớp vào một tập hợp các phần tử khác, được chỉ định.
4 trước (nội dung)

Chèn nội dung trước mỗi phần tử phù hợp.
5 nhân bản (bool)

Sao chép các Phần tử DOM phù hợp và tất cả các trình xử lý sự kiện của chúng và chọn các bản sao.
6 clone ()

Sao chép các Phần tử DOM phù hợp và chọn các bản sao.
7 trống( )

Loại bỏ tất cả các nút con khỏi tập hợp các phần tử đã so khớp.
số 8 html (val)

Đặt nội dung html của mọi phần tử phù hợp.
9 html ()

Lấy nội dung html (innerHTML) của phần tử phù hợp đầu tiên.
10 insertAfter (bộ chọn)

Chèn tất cả các phần tử đã so khớp sau một tập hợp các phần tử khác, được chỉ định.
11 insertBefore (bộ chọn)

Chèn tất cả các phần tử đã so khớp trước một tập hợp các phần tử khác, được chỉ định.
12 thêm trước (nội dung)

Thêm nội dung vào bên trong mỗi phần tử phù hợp.
13 prependTo (bộ chọn)

Thêm trước tất cả các phần tử đã so khớp vào một tập hợp các phần tử khác, được chỉ định.
14 loại bỏ (expr)

Xóa tất cả các phần tử phù hợp khỏi DOM.
15 ReplaceAll (bộ chọn)

Thay thế các phần tử được khớp bởi bộ chọn được chỉ định bằng các phần tử đã khớp.
16 ReplaceWith (nội dung)

Thay thế tất cả các phần tử phù hợp bằng các phần tử HTML hoặc DOM được chỉ định.
17 văn bản (val)

Đặt nội dung văn bản của tất cả các phần tử phù hợp.
18 bản văn( )

Nhận nội dung văn bản kết hợp của tất cả các phần tử phù hợp.
19 bọc (elem)

Bao bọc mỗi phần tử đã so khớp với phần tử được chỉ định.
20 bọc (html)

Bao bọc mỗi phần tử phù hợp với nội dung HTML được chỉ định.
21 wrapAll (elem)

Gói tất cả các phần tử trong tập hợp đã so khớp thành một phần tử trình bao bọc duy nhất.
22 wrapAll (html)

Gói tất cả các phần tử trong tập hợp đã so khớp thành một phần tử trình bao bọc duy nhất.
23 wrapInner (elem)

Bao bọc nội dung con bên trong của mỗi phần tử được so khớp (bao gồm cả các nút văn bản) bằng một phần tử DOM.
24 wrapInner (html)

Bao bọc nội dung con bên trong của mỗi phần tử đã so khớp (bao gồm cả các nút văn bản) bằng một cấu trúc HTML.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved