Định nghĩa và sử dụng
- .is(): Kiểm tra các thành phần có phù hợp với bộ chọn, trả về "true" nếu ít nhất một trong các thành phần này phù hợp với đối số đã có.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
$('.test').is(':first-child');
- Đã được thêm vào từ phiên bản 1.6
$('.test').is('p');
$('.test').is((this);
$('.test').is(function(index){...});
.is('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(){
$('li').click(function(){
if($(this).is(':first-child')){
$(this).css('color','red');
}
})
});
</script>
</head>
<body>
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03</li>
<li>List item 04</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Khi click vào các thành phần li trên, ta thấy chỉ có thành phần li đầu tiên là thay đổi màu text thành đỏ.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery - Click vào từng li |
|---|---|
<ul> |
<ul> |
.is('Thành phầ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(){
$('ul').click(function(event){
var $target = $(event.target);
if($target.is('li')){
$target.css('color','red');
}
})
});
</script>
</head>
<body>
<ul>
<li>List <strong>item 01</strong></li>
<li>List item 02</li>
<li><span>List item 03</span></li>
<li>List item 04</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Khi click vào các thành phần li trên, ta thấy các thành phần li đều thay đổi màu text thành đỏ, chỉ khi ta click thành phần con của li thì sẽ không làm đổi màu text.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery - Click vào từng li |
|---|---|
<ul> |
<ul> |
.is(jQuery 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(){
var $alt = $("li:nth-child(2n)").css("background","#0FF");
$('li').click(function() {
var $li = $(this);
if ( $li.is( $alt ) ) {
$li.slideUp();
} else {
$li.css("background","red");
}
});
});
</script>
</head>
<body>
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03</li>
<li>List item 04</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Khi click vào các thành phần li trên, ta thấy các thành phần li có background màu xanh sẽ slideUp, các thành phần không có background sẽ thay đổi màu background thành đỏ.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery - Click vào từng li |
|---|---|
<ul> |
<ul> |
.is(function(index){...})
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(){
$('li').click(function(){
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
});
if ( isWithTwo ) {
$li.css("background-color","green");
} else {
$li.css("background-color","red");
}
})
});
</script>
</head>
<body>
<ul>
<li><strong>List</strong> item 01</li>
<li>List item 02</li>
<li><strong>List</strong> item <strong>03</strong></li>
<li>List item 04</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Khi click vào các thành phần li trên, ta thấy chỉ thành phần li có chứa 2 tag strong là thay đổi màu text thành xanh.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery - Click vào từng li |
|---|---|
<ul> |
<ul> |