vi
new
+1
Avatar
Tran Dat @Dattx1
1.5K 93 54
Đã đăng vào thg 8 3, 2017 1:10 SA 4 phút đọc
421

Tìm hiểu về JQuery part 5

Chào tất cả mọi người. Tháng 8 mình sẽ tiếp tục với các bài viết liên quan đến Jquery. Trong 4 phần trước thì Chúng ta đã tìm hiểu kha khá kiến thức về Jquery rồi . Hôm nay chúng ta sẽ tiếp tục đi tìm hiểu làm thế nào để 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.

để hiểu rõ hơn DOM là gi và các loại trong DOM các bạn theo link sau DOM là gì.

Thao tác nội dung trong jQuery

selector.html( )

  • Phương thức html() trong jQuery nhận các nội dung HTML của phần tử đầu tiên được so khớp. Thuộc tính này không có sẵn trong tài liệu XML nhưng có trong XHTML.
  • Phương thức html(val) trong jQuery thiết lập các nội dung HTML của mỗi phần tử được so khớp. Thuộc tính này không có sẵn trong tài liệu XML nhưng có trong XHTML.

Phương thức này được sử dụng nhiều khi chúng ta xử lý popup.

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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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>

Theo như code trên khi bạn click vào vùng của DIV thì function click sẽ thực hiện lấy nội dung html ở trong div và append và thẻ span có ID = "result". Try here

selector.replaceWith( newContent )

  • Phương thức replaceWith(content) trong jQuery 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. Nó trả về phần tử JQuery vừa bị thay thế, mà đã bị gỡ bỏ từ DOM.
  • .replaceWith() sẽ remove tất cả data cũng như các sự kiện (event) liên quan đến DOM element vừa bị remove
  • newContent có thể là chuỗi HTML, DOM element, 1 array chứa DOM element hoặc có thể là 1 Jquerry Object.

ví dụ:

<!DOCTYPE html>
<html>
  <head>
     <title>The jQuery Example</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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>

Ví dụ đơn giản sau sẽ thay thế phần tử div với "

JQuery is Great

":

Try here

.remove(), empty( )

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ả bao gồm cả element call .remove().

Ví dụ:

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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>

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

Try here

after( content ) , before( content )

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ử call function after(), trong khi phương thức before( content ) chèn content trước mỗi phần tử đã call function before().

Ví dụ:

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $(".before").click(function () {
               $(this).before('<div class="div"></div>' );
            });
             $(".after").click(function () {
               $(this).after('<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 after" style="background-color:blue;"> After</div>
      <div class="div before" style="background-color:green;">Before</div>
      <div class="div before" style="background-color:red;">Before</div>
		
   </body>
	
</html>

Trong ví dụ này thì khi các bạn click vào các DIV có class là before thì sẽ chèn thêm 1 div vào vị trí phía trước Div mà các bạn vừa click, tương tự với các Div có class = "after" thì khi click sẽ chèn 1 Div vào phía sau try here

prependTo(selector)

  • Cú pháp : selector1.prependTo( selector2 )

  • Phương thức prependTo(selector) trong jQuery đưa selector1 lên phía trước selector2

ví dụ:

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).prependTo("#result");
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on any square below to see the result:</p>
      <p id="result"> THIS IS TEST </p>
      <hr />
		
      <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>

Trong ví dụ trên thì khi các bạn click và Div nào thì Div đó sẽ đc move lên phía trước element có Id = "result"

try here

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

STT Functin Name Description
1 after( content ) Chèn content sau mỗi phần tử đã so khớp
2 append( content ) Phụ thêm content tới bên trong mỗi phần tử đã so khớp
3 appendTo( 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
4 before( content ) Chèn content trước mỗi phần tử đã so khớp
5 clone( 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 đó
6 clone( ) Mô phỏng các phần tử DOM đã so khớp và chọn các mô phỏng đó
7 empty( ) Gỡ bỏ tất cả các node con từ tập hợp các phần tử đã so khớp
8 html( val ) Thiết lập các nội dung HTML của mỗi phần tử đã so khớp
9 html( ) Nhận các nội dung HTML (HTML bên trong) của phần tử đã so khớp đầu tiên
10 insertAfter( 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
11 insertBefore( 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
12 prepend( content ) Thêm vào trước content tới bên trong mỗi phần tử đã so khớp
13 prependTo( 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
14 remove( expr ) Gỡ bỏ tất cả phần tử đã so khớp từ DOM
15 replaceAll( 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
16 replaceWith( 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
17 text( val ) Thiết lập các nội dung text của tất cả phần tử đã so khớp
18 text( ) Nhận các nội dung text đã tổ hợp của tất cả phần tử đã so khớp
19 wrap( elem ) Bao bọc (wrap) mỗi phần tử đã so khớp với phần tử đã xác định
20 wrap( html ) Wrap mỗi phần tử đã so khớp với nội dung HTML đã xác định
21 wrapAll( 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)
22 wrapAll( 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)
23 wrapInner( 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
24 wrapInner( 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
JavaScript

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí