jq1.6新特性--.is()

最新推荐文章于 2021-05-16 13:38:18 发布

农村的我

最新推荐文章于 2021-05-16 13:38:18 发布

阅读量1.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

.is( selector ) 返回： Boolean

检查当前匹配的元素集合匹配一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。

· version added: 1.0.is( selector )

selector用来匹配元素的一个字符串，其中包含一个选择表达式。

· version added: 1.6.is( function(index) )

function(index)一个函数用来作为测试元素的集合。它接受一个参数， index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

· version added: 1.6.is( jQuery object )

jQuery object现有的jQuery对象，以匹配当前的元素。

· version added: 1.6.is( 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> element上附加一个单击处理程序，然后限制的代码只有当列表项目本身时触发，并不是它的孩子之一，被点击：

 $("ul:).click(function(event) {

   var $target = $(event.target);

   if ( $target.is("li") ) {

     $target.css("background-color", "red");

});

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

使用函数

第二个形式方法相关函数表达上，而不是一个选择器。对于每个元素，如果函数返回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");

});

Examples:

Example: 显示的 is（）可用于在一个事件处理程序的几种方法。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>&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的父级是一个表单的元素。

 <!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，因为input的父级是一个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: 针对检查列表元素交替现有的集合。 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: 另一种方式来实现上面的例子中使用的元素而不是一个jQuery对象。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>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq1.6新特性--.is()

.is( selector ) 返回： Boolean 检查当前匹配的元素集合匹配一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。· version added: 1.0.is( selector )selector用来匹配元素的一个字符串，其中包含一个选择表达式。·
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。