.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 đó.

Cấu trúc

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

.add(html)

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

.add(Object)

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

.add(bộ chọn,context)

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

.add(bộ chọn)

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:

Làm thử!

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:

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div> <p>Thành phần p</p>	<div style="border: 1px solid blue;">Thành phần div</div> <p style="border: 1px solid blue;">Thành phần p</p>

.add(html)

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:

Làm thử!

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:

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div>	<div>Thành phần div</div> <p class="test">tag p có class test</p>

.add(Object)

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:

Làm thử!

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:

Trước khi có jQuery	Sau khi có jQuery
<div>Thành phần div</div> <p>Thành phần p</p>	<div style="border: 1px solid blue;">Thành phần div</div> <p style="color: red; border: 1px solid blue;">Thành phần p</p>

.add(bộ chọn,context)

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:

Làm thử!

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:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div> <p>Thành phần p nằm trong div</p> </div> <p>Thành phần p</p>	<div class="test"> <p class="test">Thành phần p nằm trong div</p> </div> <p>Thành phần p</p>

$('tag[attribute="value"]')

.remove()