Hàm add 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 với mục đích tạo một đối tượng jQuery mới bằng cách thêm các phần tử vào tập hợp các phần tử đã khớp với phần tử được chọn ban đầu.
Các phần tử có thể được chỉ định bằng cách sử dụng một chuỗi chọn CSS, thêm các phần tử DOM, một đoạn mã HTML, hoặc một đối tượng jQuery hiện tại.
1. Cú pháp hàm add
1.1. Thông tin chung
Hàm add trong jQuery API được sử dụng để tạo một đối tượng jQuery mới bằng cách thêm các phần tử vào tập hợp các phần tử đã khớp.
Cú pháp:
.add(selector)
.add(elements)
.add(html)
.add(selection)
.add(selector, context)
Tham số:
selector(Type: Selector): Một chuỗi đại diện cho một biểu thức chọn CSS để tìm các phần tử để thêm vào tập hợp các phần tử đã khớp.elements(Type: Element): Một hoặc nhiều phần tử cần thêm vào tập hợp các phần tử đã khớp.html(Type: htmlString): Một đoạn mã HTML để thêm vào tập hợp các phần tử đã khớp.selection(Type: jQuery): Một đối tượng jQuery hiện tại để thêm vào tập hợp các phần tử đã khớp.context(Type: Element): Điểm bắt đầu trong tài liệu mà chuỗi chọn CSS nên tìm; tương tự với đối số context của phương thức $(selector, context).
Phiên bản hỗ trợ:
- Phiên bản 1.0:
.add(selector),.add(elements),.add(html) - Phiên bản 1.1:
.add(selection) - Phiên bản 1.4:
.add(selector, context)
Kết quả trả về: Phương thức add trong thư viện jQuery trả về một tập hợp mới chứa các phần tử đã được thêm vào tập hợp ban đầu mà không làm thay đổi tập hợp ban đầu. Điều này đảm bảo tính nguyên vẹn của tập hợp ban đầu. Kết quả của phương thức .add() là một tập hợp jQuery mới, không làm ảnh hưởng đến tập hợp gốc.
1.2. Chú ý quan trọng
Phương thức .add() trong thư viện jQuery có 1 số đặc điểm sau:
Tạo tập hợp mới: Phương thức .add() không thay đổi tập hợp ban đầu mà tạo ra một tập hợp mới chứa các phần tử đã được thêm. Điều này đảm bảo tính nguyên vẹn của tập hợp ban đầu.
Không lưu trữ thay đổi trong tập hợp gốc: Điều này đồng nghĩa với việc, sau khi sử dụng .add() để thêm phần tử vào tập hợp, tập hợp ban đầu không bị ảnh hưởng. Bất kể bạn làm gì với tập hợp mới được tạo ra bởi .add(), tập hợp gốc vẫn được giữ nguyên.
2. Một số ví dụ minh họa
2.1. Hàm add không làm thay đổi tập hợp ban đầu
Dưới đây là một ví dụ minh họa việc sử dụng phương thức .add() để duyệt và hiển thị thông tin tên thẻ và text của các phần tử trước và sau khi thêm vào tập hợp:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Example: .add() in jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Tập hợp li ban đầu có 2 phần tử
var originSet = $("li");
// Thêm một phần tử mới vào tập hợp
var updatedSet = originSet.add("<li>New Item</li>");
// Sau khi thêm updatedSet có 3 phần tử li
updatedSet.each(function() {
alert("Element: " + this.tagName + ", Text: " + $(this).text());
});
// Kết quả cho thấy updatedSet không ảnh hương tới originSet, originSet vẫn có 2 phần tử
originSet.each(function() {
alert("Element: " + this.tagName + ", Text: " + $(this).text());
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
Trong ví dụ trên, chúng ta có một tập hợp ban đầu chứa hai phần tử li trong một danh sách không sắp xếp. Chúng ta sử dụng phương thức .add() để thêm một phần tử li mới vào tập hợp này.
Điều này minh họa tính chất của phương thức .add() trong jQuery, cho phép tạo ra một tập hợp mới chứa các phần tử đã được thêm, nhưng không làm thay đổi tập hợp ban đầu, đảm bảo tính nguyên vẹn của tập hợp gốc.
2.2. Sử dụng hàm add(html)
Dưới đây là một ví dụ sử dụng phương thức .add(selector) để thêm lần lượt nhiều loại thẻ khác nhau vào một tập hợp và sau đó có một nút để ngẫu nhiên tác động vào tập hợp thu được:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Example: .add() in jQuery with Random Interaction</title>
<style>
.game-element {
width: 50px;
height: 50px;
margin: 10px;
border: 2px solid black;
text-align: center;
line-height: 50px;
font-family: Arial, sans-serif;
font-size: 18px;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Tạo tập hợp ban đầu chứa các phần tử .game-element
var gameElements = $();
// Thêm các phần tử mới vào tập hợp
gameElements = gameElements.add("<div class='game-element'>Element 1</div>");
gameElements = gameElements.add("<p class='game-element'>Element 2</p>");
gameElements = gameElements.add("<span class='game-element'>Element 3</span>");
// Thêm các phần tử vào DOM
$("#game-container").append(gameElements);
// Event listener khi click nút
$("#random-action-button").click(function() {
// Lấy một phần tử ngẫu nhiên từ tập hợp và đổi màu ngẫu nhiên
var randomIndex = Math.floor(Math.random() * gameElements.length);
var randomElement = gameElements.eq(randomIndex);
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
randomElement.css("background-color", randomColor);
});
});
</script>
</head>
<body>
<div id="game-container"></div>
<button id="random-action-button">Random Action</button>
</body>
</html>
Trong ví dụ này, chúng ta tạo một tập hợp ban đầu chứa các phần tử <div>, <p>, và <span> với class “game-element” bằng cách sử dụng .add(selector).
Khi bấm nút “Random Action”, một phần tử ngẫu nhiên sẽ được chọn và màu nền của nó sẽ thay đổi một cách ngẫu nhiên.
2.3. Hàm add với selector, elements, html, selection
Dưới đây là một ví dụ duy nhất để thể hiện sự khác biệt giữa các phương thức .add( selector ), .add( elements ), .add( html ), và .add( selection ):
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Example: .add() Methods in jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
$(document).ready(function() {
// Tạo một tập hợp ban đầu chứa phần tử div
var initialSet = $("<div>Initial Div</div>");
// Sử dụng .add( selector ) để thêm phần tử p
var updatedSetSelector = initialSet.add("p");
// Sử dụng .add( elements ) để thêm một phần tử p khác
var updatedSetElements = initialSet.add($("<p>New Paragraph</p>"));
// Sử dụng .add( html ) để thêm một phần tử div từ HTML
var updatedSetHtml = initialSet.add("<div>Added Div from HTML</div>");
// Tạo một tập hợp mới
var newSet = $("<span>New Span</span>");
// Sử dụng .add( selection ) để thêm tập hợp mới vào tập hợp ban đầu
var updatedSetSelection = initialSet.add(newSet);
// Hiển thị thông tin
console.log("--- .add( selector ) ---");
updatedSetSelector.each(function() {
alert("add( selector ) Element: " + this.tagName);
});
console.log("--- .add( elements ) ---");
updatedSetElements.each(function() {
alert("add( elements ) Element: " + this.tagName);
});
console.log("--- .add( html ) ---");
updatedSetHtml.each(function() {
alert("add( html ) Element: " + this.tagName);
});
console.log("--- .add( selection ) ---");
updatedSetSelection.each(function() {
alert("add( selection ) Element: " + this.tagName);
});
});
</script>
</head>
<body>
<!-- No content needed in the body for this example -->
</body>
</html>
Ví dụ trên cho thấy cách sử dụng các phương thức .add() với các tham số khác nhau và alert thông tin của các phần tử sau khi thêm.
2.4. Hàm add (selector, context)
Dưới đây là một ví dụ sử dụng .add(selector, context) để thêm các hình tròn chứa con số ngẫu nhiên từ 1 đến 10 và màu nền ngẫu nhiên. Sau đó, chúng tôi thêm một nút để ngẫu nhiên chọn một hình tròn và thay đổi màu nền của nó khi được nhấp.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Example: .add(selector, context) in jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
margin: 10px;
text-align: center;
line-height: 50px;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
// Chọn phần tử div có id là "container" làm ngữ cảnh (context)
var contextElement = $("#container");
// Tạo các hình tròn với con số ngẫu nhiên từ 1 đến 10 và màu nền ngẫu nhiên
var circles = $('<div class="circle" style="background-color: red;">1</div>')
.add('<div class="circle" style="background-color: blue;">2</div>')
.add('<div class="circle" style="background-color: green;">3</div>')
.add('<div class="circle" style="background-color: yellow;">4</div>')
.add('<div class="circle" style="background-color: orange;">5</div>')
.add('<div class="circle" style="background-color: purple;">6</div>')
.add('<div class="circle" style="background-color: pink;">7</div>')
.add('<div class="circle" style="background-color: brown;">8</div>')
.add('<div class="circle" style="background-color: teal;">9</div>')
.add('<div class="circle" style="background-color: grey;">10</div>');
// Thêm các hình tròn vào tập hợp với ngữ cảnh contextElement
contextElement.append(circles);
// Bắt sự kiện khi nút được nhấn
$("#change-color").click(function() {
// Chọn ngẫu nhiên một hình tròn và thay đổi màu nền
var randomCircle = circles.eq(Math.floor(Math.random() * circles.length));
var randomColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
randomCircle.css("background-color", randomColor);
});
});
</script>
</head>
<body>
<div id="container">
<!-- Các hình tròn sẽ được thêm vào đây -->
</div>
<button id="change-color">Thay đổi màu ngẫu nhiên</button>
</body>
</html>
Trong ví dụ này, chúng tôi đã thêm một nút “Thay đổi màu ngẫu nhiên”. Khi nút này được nhấn, một hình tròn ngẫu nhiên sẽ được chọn và màu nền của nó sẽ thay đổi
