.is()
.is( selector )
描述：根据一个选择器、元素或者jQuery对象，检查当前元素的匹配集合，如果这些元素中至少有一个匹配了给定的参数，则返回true。
- selector类型：Selector一个字符串，它包含了一个选择器表达式，用来匹配所针对的元素。
- function一个函数，它用来测试集合中的每个元素。它接受两个参数，
index，它是元素在jQuery集合中的索引，还有element，它是该DOM元素。在函数内部，this引用当前的DOM元素。
- selection类型：jQuery一个已有的jQuery对象，用来匹配所针对的当前元素集合中的元素。
- elements类型：Element一个或更多的元素，用来匹配所针对的元素的当前集合。
与其它筛选方法不同，.is()并不创建一个新的jQuery对象。而是，它允许你测试一个jQuery对象的内容，而不对它作修改。这通常用在回调函数内部，比如说事件处理函数。
假设你有一个列表，其中有两个项目包含了一个子元素。
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul>
你可以把一个点击事件处理函数附加到<ul>元素上，然后限制代码，只有在没有子元素的列表项被点击时，才能触发该事件。
$( "ul" ).click(function( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.css( "background-color", "red" );
}
});
现在，当用户点击第一项中的单词“list”时，或者点击第三项中的任何位置，被点击的列表项将变成红色背景。然而，如果用户在第一项的item1上点击，或者在第二项中的任一位置点吉，什么也不会发生，因为那样的话，事件的目标将分别是<strong>和<span>。
在jQuery 1.7以前的版本中，在带有位置选择器的选择器字符串中，比如说:first、:gt()或者:even，定位筛选器是针对传递给.is()方法的jQuery对象，不是针对容纳的document的。所以对于上面显示的HTML，像$( "li:first" ).is( "li:last" )这样的表达式返回true，但是$( "li:first-child" ).is( "li:last-child" )返回false。另外，在Sizzle中有一个缺陷，阻止了很多位置选择器适当的起作用。这两个因素使定位选择器在筛选器中几乎不能用。
自从jQuery 1.7，带有位置选择器的选择器字符串针对document应用该选择器，然后确定当前jQuery集合的第一个元素匹配了任一个结果元素。所以上面显示的HTML，像$( "li:first" ).is( "li:last" )这样的表达式返回false。注意，因为定位选择器是jQuery的附加物，不是W3C标准，我们建议每当可行的时候尽量使用W3C选择器。
使用一个函数
该方法的第二种形式基于一个函数，而不是基于选择器，评估了与元素相关的表达式。针对每个元素，如果函数返回true，则.is()也返回true。举个例子，给定一个稍微复杂的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>
你可以把一个点击事件处理函数附加到每个<li>上，评估被点击的<li>内部的<strong>元素的数量，如下所示：
$( "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" );
}
});
示例
显示.is()可以用在事件处理函数内部的一些方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>is demo</title>
<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="https://code.jquery.com/jquery-1.10.2.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>
演示结果
返回true，因为输入框的父元素是一个表单元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>is demo</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果
返回false，因为输入框的父元素是一个<p>元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>is demo</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果
针对替代列表元素的已有集合作检查。蓝色替代列表元素向上滑移的同时别的变红了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>is demo</title>
<style>
li {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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", "#0ff" );
$( "li" ).click(function() {
var li = $( this );
if ( li.is( alt ) ) {
li.slideUp();
} else {
li.css( "background", "red" );
}
});
</script>
</body>
</html>
演示结果
实现上面示例的一个替代的方法是使用一个元素，而不是使用一个jQuery对象。针对已有的替代列表元素的集合作检查蓝色替代列表元素向上滑移的同时，别的变红了。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>is demo</title>
<style>
li {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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", "#0ff" );
$( "li" ).click(function() {
if ( alt.is( this ) ) {
$( this ).slideUp();
} else {
$( this ).css( "background", "red" );
}
});
</script>
</body>
</html>
演示结果