/Hàm andSelf trong JQuery API
Các hàm built-in03/10/2023

Hàm andSelf trong JQuery API

Hàm andSelf là một trong các hàm hỗ trợ sẵn (built-in fuctions) JQuery API của thư viện jQuery được sử dụng thêm các phần tử từ tập hợp hiện tại vào tập hợp trước đó trên ngăn xếp.

2.1. Cú pháp

Thêm các phần tử từ tập hợp hiện tại vào tập hợp trước đó trên ngăn xếp.

Cú pháp:

andSelf()

Kết quả trả về:

  • Đối tượng jQuery chứa tất cả các phần tử từ bộ hiện tại và bộ trước đó trên ngăn xếp.

Phiên bản hỗ trợ:

  • Version added: 1.2
  • Version deprecated: 1.8
  • Version removed: 3.0

Ghi chú: API này đã bị loại bỏ (deprecated) từ phiên bản 1.8 và được xóa khỏi phiên bản 3.0. Thay vào đó, nên sử dụng .addBack(), API mà được khuyến nghị và hoạt động tương tự.

Hàm andSelf trong JQuery API

2. Một số ví dụ minh họa

2.1. Sử dụng hàm andSelf để thêm luôn phần tử cha vào tập hợp đã chọn

Đoạn mã HTML và JavaScript đã cho sử dụng thư viện jQuery 1.4 để minh họa cách sử dụng hàm andSelf() (được gọi là addBack() trong phiên bản jQuery mới hơn) để thêm nền màu cho các phần tử p và cha của chúng.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>andSelf demo</title>
  <style>
  p, div {
    margin: 5px;
    padding: 5px;
  }
  
  .border {
    border: 2px solid red;
  }  
  </style>
    <script src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
</head>
<body>
 
  <p><strong>Using <code>andSelf function</code></strong></p>
  <div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
</div>
<button id="bntWithoutAndSelf">Without andSelf</button>
<button id="bntUsingAndSelf">Using andSelf</button>
 
<script>
    $(document).ready(function() {
	
		  // Tạo border cho các thẻ p bên trong thẻ div
		  $( "div, div > p" ).addClass( "border" );
		 		 
	    
		// Nhấn nút Without andSelf
		 $('#bntWithoutAndSelf').click(function() {// Bôi màu nền cho thẻ P

			$( "div, div > p" ).css('background', '');
			
			// Bôi màu không dùng khi không dùng hàm andSelf
			$( "div, div > p" ).find( "p" ).css('background', 'yellow');
		});
		
		
		// Nhấn nút Without andSelf
		$('#bntUsingAndSelf').click(function() {// Bôi màu nền cho thẻ P
			
			$( "div, div > p" ).css('background', '');
			
			// Dùng hàm andSelf để thêm cả phần tử cha $( "div, div > p" ) vào tập hợp rồi bôi màu
			$( "div, div > p" ).find( "p" ).andSelf().css('background', 'blue');
		});
    });
  </script> 
</body>
</html>

Giải thích:

  • Trong HTML, có hai nút: “Without andSelf” và “Using andSelf”.
  • Khi nhấn “Without andSelf”, nền của các phần tử p được chọn và định dạng bằng màu vàng.
  • Khi nhấn “Using andSelf” bằng sử dụng hàm andSelf thì phần tử div cha cũng được thêm vào tập hợp kết quả các phần tử p đó và của chúng được chọn và định dạng bằng màu xanh.

2.2. Thay thế hàm andSelf bằng hàm addBack

Hàm andSelf() đã bị loại bỏ trong jQuery từ phiên bản 3.0 trở đi và thay thế bằng addBack(). Để thực hiện tương tự như andSelf() trong phiên bản mới hơn, bạn nên sử dụng addBack()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addBack demo</title>
  <style>
    p, div {
      margin: 5px;
      padding: 5px;
    }
    
    .border {
      border: 2px solid red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p><strong>Using <code>addBack()</code></strong></p>
  <div class="before-addback">
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
  </div>
  <button id="bntWithoutAddBack">Without addBack</button>
  <button id="bntUsingAddBack">Using addBack</button>

  <script>
    $(document).ready(function() {
      // Tạo border cho các thẻ p bên trong thẻ div
      $("div, div > p").addClass("border");

      // Nhấn nút Without addBack
      $('#bntWithoutAddBack').click(function() {
        // Bôi màu nền cho các thẻ P
        $("div, div > p").css('background', '');
        // Bôi màu không dùng khi không dùng hàm addBack
        $("div, div > p").find("p").css('background', 'yellow');
      });

      // Nhấn nút Using addBack
      $('#bntUsingAddBack').click(function() {
        // Bôi màu nền cho các thẻ P và cha của chúng
        $("div, div > p").css('background', '');
        // Bôi màu không dùng khi không dùng hàm addBack
        $("div, div > p").find("p").addBack().css('background', 'blue');
      });
    });
  </script>
</body>
</html>

Related posts