Love beautiful code? We do too.
Định nghĩa và sử dụng .is() trong jQuery
.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 .is() trong jQuery
Đã được thêm vào từ phiên bản 1.0
.is('Bộ chọn')
$('.test').is(':first-child');Đã được thêm vào từ phiên bản 1.6
.is('Thành phần')
$('.test').is('p');.is(jQuery object)
$('.test').is((this);
.is(function(index){...})
$('.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="http://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 đỏ.
.is('Thành phần')
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.
.is(jQuery object)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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 đỏ.
.is(function(index){...})
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://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.
Unpublished comment
Viết câu trả lời