.is()
.is( selector ) 返回： Boolean
描述： 檢查當(dāng)前匹配的元素集合匹配一個(gè)選擇器，DOM元素，或者jQuery對(duì)象，如果這些元素至少一個(gè)匹配給定的參數(shù)，那么返回true。
-
version added: 1.0.is( selector )
selector用來匹配元素的一個(gè)字符串，其中包含一個(gè)選擇表達(dá)式。
-
version added: 1.6.is( function(index) )
function(index)一個(gè)函數(shù)用來作為測(cè)試元素的集合。它接受一個(gè)參數(shù)，
index，這是元素在jQuery集合的索引。在函數(shù)，this指的是當(dāng)前的DOM元素。 -
version added: 1.6.is( jQuery object )
jQuery object現(xiàn)有的jQuery對(duì)象，以匹配當(dāng)前的元素。
-
version added: 1.6.is( element )
element一個(gè)用于匹配元素的DOM元素。
不像其他過濾和遍歷方法，.is()并不創(chuàng)建一個(gè)新的jQuery對(duì)象。相反，它可以讓我們測(cè)試，而無需修改一個(gè)jQuery對(duì)象的內(nèi)容。這通常是在事件處理程序，如回調(diào)，非常有用。
假設(shè)我們有其包含兩個(gè)項(xiàng)目的子元素列表：
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul>
我們可以在<ul> element上附加一個(gè)單擊處理程序，然后限制的代碼只有當(dāng)列表項(xiàng)目本身時(shí)觸發(fā)，并不是它的孩子之一，被點(diǎn)擊：
$("ul:).click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
});
現(xiàn)在，當(dāng)在用戶點(diǎn)擊三個(gè)項(xiàng)目中的第一個(gè)項(xiàng)目中的單詞或任何地方，點(diǎn)擊列中的項(xiàng)目將得到一個(gè)紅色背景。但是，當(dāng)用戶點(diǎn)擊 item 1 中的第一項(xiàng)，或第二項(xiàng)的任何地方，什么都不會(huì)發(fā)生,因?yàn)樵谶@些情況下，事件目標(biāo)的將分別是<strong> 或者 <span>。
使用函數(shù)
第二個(gè)形式方法相關(guān)函數(shù)表達(dá)上，而不是一個(gè)選擇器。對(duì)于每個(gè)元素，如果函數(shù)返回true ， .is()返回true也。例如，給出一個(gè)較為涉及的HTML片段：
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> -
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
點(diǎn)擊元素在<li>在那個(gè)時(shí)候，您可以將每一個(gè)<li>單擊處理程序計(jì)算結(jié)果<strong>的數(shù)量，像這樣：
$("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");
}
});
Examples:
Example: 顯示的 is（）可用于在一個(gè)事件處理程序的幾種方法。 Shows a few ways is() can be used inside an event handler.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left;
border:4px outset; background:green; text-align:center;
font-weight:bolder; cursor:pointer; }
.blue { background:blue; }
.red { background:red; }
span { color:white; font-size:16px; }
p { color:red; font-weight:bolder; background:yellow;
margin:3px; clear:left; display:none; }
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p> </p>
<script>
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
} else if ($(this).is(".blue,.red")) {
$("p").text("It's a blue or red div.");
} else if ($(this).is(":contains('Peter')")) {
$("p").text("It's Peter!");
} else {
$("p").html("It's nothing <em>special</em>.");
}
$("p").hide().slideDown("slow");
$(this).css({"border-style": "inset", cursor:"default"});
});
</script>
</body>
</html>Demo:
Example: 返回true，因?yàn)閕nput的父級(jí)是一個(gè)表單的元素。
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<form><input type="checkbox" /></form>
<div></div>
<script>
var isFormParent = $("input[type='checkbox']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
</script>
</body>
</html>Demo:
Example: 返回false，因?yàn)閕nput的父級(jí)是一個(gè)P元素。
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<form><p><input type="checkbox" /></p></form>
<div></div>
<script>
var isFormParent = $("input[type='checkbox']").parent().is("form");
$("div").text("isFormParent = " + isFormParent);
</script>
</body>
</html>Demo:
Example: 針對(duì)檢查列表元素交替現(xiàn)有的集合。 Blue, alternating list elements slide up while others turn red.
<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
<script>
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function() {
var $li = $(this);
if ( $li.is( $alt ) ) {
$li.slideUp();
} else {
$li.css("background", "red");
}
});
</script>
</body>
</html>Demo:
Example: 另一種方式來實(shí)現(xiàn)上面的例子中使用的元素而不是一個(gè)jQuery對(duì)象。An alternate way to achieve the above example using an element rather than a jQuery object. Checks against an existing collection of alternating list elements. Blue, alternating list elements slide up while others turn red.
<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<ul id="browsers">
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
</ul>
<script>
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function() {
if ( $alt.is( this ) ) {
$(this).slideUp();
} else {
$(this).css("background", "red");
}
});
</script>
</body>
</html>