.add()

Định nghĩa và sử dụng

• .add() Thêm thành phần vào thành phần đã có để cùng thực hiện một hành động.

• .add() Xây dựng một đối tượng jQuery mới (đối tượng này là sự kết hợp của thành phần ban đầu và các thành phần được thêm vào), cùng nhau thực hiện hành động cụ thể nào đó.

.add(bộ chọn)

Cấu trúc

$('div').add('p').css('color','red');
$('div').add('.test, ul li').css('color','red');

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').add('p').css('border','1px solid blue');
});
</script>
</head>

<body>
<div>Thành phần div</div>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Thành phần div

Thành phần p

Thêm thành phần p tham gia vào một hành động chèn style cùng với thành phần div>.

So sánh code HTML trước và sau khi có jQuery:

.add(html)

Cấu trúc

$('div').add('<p class="test">tag p</p>').appendTo('body');

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').add('<p class="test">tag p có class test</p>').appendTo('body');
});
</script>
</head>

<body>
<div>Thành phần div</div>
</body>
</html>

Hiển thị trình duyệt:

Thành phần div

tag p có class test

Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.

So sánh code HTML trước và sau khi có jQuery:

.add(Object)

Cấu trúc

$('div').add($('p').css('color','red')).css('border','1px solid blue');

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').add($('p').css('color','red')).css('border','1px solid blue');
});
</script>
</head>

<body>
<div>Thành phần divdiv</div>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Thành phần div

Thành phần p

Thêm thành phần p với một định dạng color="red" cùng với thành phần div được định dạng thêm với thuộc tính border.

So sánh code HTML trước và sau khi có jQuery:

.add(bộ chọn,context)

Cấu trúc

$('div').add('p',this).addClass('test');

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
.test {
    background-color: blue;
}
</style>
<script>
$(function(){
    $('div').click(function() {
        $('div').add('p',this).addClass('test');
    });
});
</script>
</head>

<body>
<div>
<p>Thành phần p nằm trong div</p>
</div>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Thành phần p nằm trong div

Thành phần p

Click vào “p nằm trong div” thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".

So sánh code HTML trước và sau khi có jQuery: