Đị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
- Đã được thêm vào từ phiên bản 1.0
$('div').add('p').css('color','red'); $('div').add('.test, ul li').css('color','red');
$('div').add('<p class="test">tag p</p>').appendTo('body');
- Đã được thêm vào từ phiên bản 1.3.2
$('div').add($('p').css('color','red')).css('border','1px solid blue');
- Đã được thêm vào từ phiên bản 1.4
$('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:
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> |
<div style="border: 1px solid blue;">Thành phần div</div> |
Ví dụ
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').css('background','#cccccc').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 được định dạng style với background="#cccccc" trước, sau đó thêm thành phần p tham gia vào định dạng style chung với 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> |
<div style="background: #cccccc; border: 1px solid blue;">Thành phần div</div> |
.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:
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> |
.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:
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> |
<div style="border: 1px solid blue;">Thành phần div</div> |
.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:
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> |
<div class="test"> |