is()
判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true
。
.is(selector)
- selector类型: Selector。一个字符串,包含一个用来匹配元素的选择器表达式。
.is(function(index))
- function(index)类型: Function()一个函数,用来测试集合中的元素。它接受一个参数,
index
,这是元素在jQuery集合的索引位置。在函数中,this
指的是当前的DOM元素。
.is(jQuery object)
- jQuery object类型: Object。现有的jQuery对象,以匹配当前的元素。
.is(element)
- element类型: Element。个用于匹配元素的DOM元素。
不像其他过滤和遍历方法,.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"); } });
现在,当在用户点击三个项目中的第一个项目中的单词或任何地方,点击列中的项目将得到一个红色背景。但是,当用户点击 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片段:
<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> <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://www.lanmper.cn/static/js/jquery-3.5.0.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>
Peter
返回true,因为input的父级是一个表单的元素。
<!DOCTYPE html> <html> <head> <style>div { color:red; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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,因为input的父级是一个P元素。
<!DOCTYPE html> <html> <head> <style>div { color:red; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
针对检查列表元素交替现有的集合。 Blue, alternating list elements slide up while others turn red.
<!DOCTYPE html> <html> <head> <style>li { cursor:pointer; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- Chrome
- Safari
- Firefox
- Opera
另一种方式来实现上面的例子中使用的元素而不是一个jQuery对象。Blue, alternating list elements slide up while others turn red.
<!DOCTYPE html> <html> <head> <style>li { cursor:pointer; }</style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- Chrome
- Safari
- Firefox
- Opera