.is()


.is( selector )返回: Boolean

描述: 判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true

  • 添加的版本: 1.0.is( selector )

    • selector
      类型: Selector
      一个字符串,包含一个用来匹配元素的选择器表达式。
  • 添加的版本: 1.6.is( function(index) )

    • function(index)
      类型: Function()
      一个函数,用来测试集合中的元素。它接受一个参数,index ,这是元素在jQuery集合的索引位置。在函数中, this指的是当前的DOM元素。
  • 添加的版本: 1.6.is( jQuery object )

    • jQuery object
      类型: Object
      现有的jQuery对象,以匹配当前的元素。
  • 添加的版本: 1.6.is( element )

    • element
      类型: Element
      个用于匹配元素的DOM元素。

不像其他过滤和遍历方法,.is()并不创建一个新的jQuery对象。相反,它允许我们检测jQuery对象的内容,而无需修改该对象。通常在回调函数内使用该方法,例如事件处理。

假设我们有其包含两个项目的子元素列表:

1
2
3
4
5
<ul>
<li>list <strong>item 1</strong></li>
<li><span>list item 2</span></li>
<li>list item 3</li>
</ul>

我们可以在<ul> 元素上绑定一个单击处理程序,然后限制的代码只有当列表项目本身时触发,并不是它的子元素被点击:

1
2
3
4
5
6
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
});

现在,当在用户点击三个项目中的第一个项目中的单词或任何地方,点击列中的项目将得到一个红色背景。但是,当用户点击 item 1 中的第一项,或第二项的任何地方,什么都不会发生,因为在这些情况下,事件对象的target 将分别是<strong> 或者 <span>,而不是 <li>

在jQuery 1.7之前,如果在选择器字符串中包含位置选择器,比如 :first, :gt(), 或者 :even,那么位置选择器是相对于jQuery对象传递给.is(),而不是相对于所在的文档的。因此,上面显示的HTML ,比如$("li:first").is("li:last")这样一个选择器返回true,但是$("li:first-child").is("li:last-child") 返回 false。另外,Sizzle中的一个bug,使许多位置选择器无法正常工作。这两个因素,使得过滤器中的位置选择器几乎无法使用。

从jQuery 1.7开始,位置选择器的选择器字符串适用于文档的选择器,然后再确定是否为jQuery集合的第一个元素是否匹配任何由此产生的元素。因此,上面显示的HTML ,比如$("li:first").is("li:last")这样一个选择器返回false。请注意,由于位置选择器jQuery添加的功能,而不是W3C标准,我们建议在可行情况下使用W3C的选择器。

Using a Function(使用函数)

第二个形式方法相关函数表达上,而不是一个选择器。对于每个元素,如果函数返回true.is()返回true也。例如,给出一个较为复杂的HTML片段:

1
2
3
4
5
6
7
8
<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>的数量,像这样:

1
2
3
4
5
6
7
8
9
10
11
$("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");
}
});

例子:

Example: 显示的 is()可用于在一个事件处理程序的几种方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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="https://code.jquery.com/jquery-latest.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>&nbsp;</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,因为input的父级是一个表单的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="https://code.jquery.com/jquery-latest.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,因为input的父级是一个P元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="https://code.jquery.com/jquery-latest.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: 针对检查列表元素交替现有的集合。 Blue, alternating list elements slide up while others turn red.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="https://code.jquery.com/jquery-latest.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: 另一种方式来实现上面的例子中使用的元素而不是一个jQuery对象。Blue, alternating list elements slide up while others turn red.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="https://code.jquery.com/jquery-latest.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>

Demo: