Học CNTT

Thao tác DOM trong jQuery

jQuery cung cấp các phương thức để thao tác với DOM một cách cực kỳ hiệu quả. Bạn không cần viết những đoạn code quá dài để sửa đổi giá trị thuộc tính của bất kỳ phần tử nào hoặc để trích (extract) các đoạn HTML code từ một thẻ p hoặc div.

jQuery cung cấp các phương thức như .attr(), .html(), .val() để thu nhận thông tin từ các phần tử DOM để sử dụng cho lần sau.

Thao tác nội dung trong jQuery

Phương thức html( ) nhận nội dung html (bên trong HTML) của phần tử đã so khớp đầu tiên.

Dưới đây là cú pháp của phương thức .html():

selector.html( )

Ví dụ

Ví dụ đơn giản sau sử dụng các phương thức .html() và .text(val). Trong đó, .html() thu nhận nội dung HTML từ đối tượng và sau đó phương thức .text(val) thiết lập giá trị của đối tượng bởi sử dụng tham số đã truyền.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Thay thế phần tử DOM trong jQuery

Bạn có thể thay thế hoàn toàn một phần tử DOM với các phần tử HTML hoặc DOM đã xác định. Phương thức replaceWith( content ) thực hiện mục đích này rất hiệu quả.

Sau đây là cú pháp:

selector.replaceWith( content )

Ở đây, content là những gì bạn muốn thay thế cho phần tử ban đầu. Nó có thể là HTML hoặc văn bản.

Ví dụ

Ví dụ đơn giản sau sẽ thay thế phần tử div với "<h1>JQuery is Great</h1>":

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Gỡ bỏ các phần tử DOM trong jQuery

Có thể có một tình huống khi bạn muốn gỡ bỏ một hoặc nhiều phần tử DOM từ tài liệu. jQuery cung cấp hai phương thức để xử lý tình huống này:

Phương thức empty( ) gỡ bỏ tất cả node con từ tập hợp các phần tử đã so khớp, trong khi phương thức remove( expr ) gỡ bỏ tất cả các phần tử đã so khớp từ DOM.

Dưới đây là cú pháp:

selector.remove( [ expr ])

or 

selector.empty( )

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

Ví dụ

Trong ví dụ đơn giản, các phần tử được gỡ bỏ ngay sau khi chúng được click:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

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

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 trong tài liệu đang tồn tại của bạn. jQuery cung cấp nhiều phương thức đa dạng để chèn các phần tử vào các vị trí khác nhau.

Phương thức after( content ) chèn content sau mỗi phần tử đã so khớp, trong khi phương thức before( content ) chèn content trước mỗi phần tử đã so khớp.

Dưới đây là cú pháp của các phương thức:

selector.after( content )

or

selector.before( content )

Ở đây, content là những gì bạn muốn chèn. Nó có thể là HTML hoặc văn bản.

Ví dụ

Trong ví dụ sau, các phần tử div được chèn ngay trước phần tử được click:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://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>

Các phương thức thao tác DOM trong jQuery

Dưới đây liệt kê tất cả phương thức mà bạn có thể sử dụng để thao tác các phần tử DOM:

STTPhương thức & Miêu tả
1after( content )

Chèn content sau mỗi phần tử đã so khớp

2append( content )

Phụ thêm content tới bên trong mỗi phần tử đã so khớp

3appendTo( selector )

Phụ thêm tất cả phần tử đã so khớp tới tập hợp phần tử đã cho khác

4before( content )

Chèn content trước mỗi phần tử đã so khớp

5clone( bool )

Mô phỏng các phần tử DOM đã so khớp, và tất cả các Event Handler của chúng, và chọn các mô phỏng đó

6clone( )

Mô phỏng các phần tử DOM đã so khớp và chọn các mô phỏng đó

7empty( )

Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã so khớp

8html( val )

Thiết lập các nội dung HTML của mỗi phần tử đã so khớp

9html( )

Nhận các nội dung HTML (HTML bên trong) của phần tử đã so khớp đầu tiên

10insertAfter( selector )

Chèn tất cả phần tử đã so khớp vào sau tập hợp các phần tử đã xác định khác

11insertBefore( selector )

Chèn tất cả phần tử đã so khớp vào trước tập hợp các phần tử đã xác định khác

12prepend( content )

Thêm vào trước content tới bên trong mỗi phần tử đã so khớp

13prependTo( selector )

Thêm vào trước tất cả phần tử đã so khớp tới tập hợp các phần tử đã xác định khác

14remove( expr )

Gỡ bỏ tất cả phần tử đã so khớp từ DOM

15replaceAll( selector )

Thay thế các phần tử đã so khớp bởi Selector đã cho với các phần tử được so khớp

16replaceWith( content )

Thay thế tất cả phần tử đã so khớp với các phần tử HTML hoặc DOM đã xác định

17text( val )

Thiết lập các nội dung text của tất cả phần tử đã so khớp

18text( )

Nhận các nội dung text đã tổ hợp của tất cả phần tử đã so khớp

19wrap( elem )

Bao bọc (wrap) mỗi phần tử đã so khớp với phần tử đã xác định

20wrap( html )

Wrap mỗi phần tử đã so khớp với nội dung HTML đã xác định

21wrapAll( elem )

Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (elem ở đây là phần tử DOM)

22wrapAll( html )

Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (html là phần tử HTML)

23wrapInner( elem )

Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một phần tử DOM

24wrapInner( html )

Wrap các nội dung con bên trong mỗi phần tử đã so khớp (bao gồm các node văn bản) với một cấu trúc HTML

Theo tutorialspoint

Bài trước: CSS Selector trong jQuery

Bài tiếp: Xử lý sự kiện trong jQuery

Thứ Ba, 24/07/2018 17:09
4,3 ★ 3 👨 1.323

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Cũ vẫn chất

    Xem thêm