加载中...

is()1.6*

概述    .is( selector )

返回值：Boolean

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

  • V : 1.0.is( selector )

    • selector
      类型: Selector
      一个字符串，包含一个用来匹配元素的选择器表达式。

  • V : 1.6.is( function(index) )

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

  • V : 1.6.is( jQuery object )

    • jQuery object
      类型: Object
      现有的jQuery对象，以匹配当前的元素。

  • V : 1.6.is( element )

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

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

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

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

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

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

现在，当在用户点击三个项目中的第一个项目中的单词或任何地方，点击列中的项目将得到一个红色背景。但是，当用户点击 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. <ul>
  2.   <li><strong>list</strong> item 1 - one strong tag</li>
  3.   <li><strong>list</strong> item <strong>2</strong> -
  4.     two <span>strong tags</span></li>
  5.   <li>list item 3</li>
  6.   <li>list item 4</li>
  7.   <li>list item 5</li>
  8. </ul>

点击元素在<li>在那个时候，您可以将每一个<li>单击处理程序计算结果<strong>的数量，像这样： 

  1. $("li").click(function() {
  2.   var $li = $(this),
  3.     isWithTwo = $li.is(function() {
  4.       return $('strong', this).length === 2;
  5.     });
  6.   if ( isWithTwo ) {
  7.     $li.css("background-color", "green");
  8.   } else {
  9.     $li.css("background-color", "red");
  10.   }
  11. });

示例

实例

显示的 is（）可用于在一个事件处理程序的几种方法。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   div { width:60px; height:60px; margin:5px; float:left;
  6.       border:4px outset; background:green; text-align:center;
  7.       font-weight:bolder; cursor:pointer; }
  8.   .blue { background:blue; }
  9.   .red { background:red; }
  10.   span { color:white; font-size:16px; }
  11.   p { color:red; font-weight:bolder; background:yellow;
  12.       margin:3px; clear:left; display:none; }
  13. </style>
  14.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  15. </head>
  16. <body>
  17.   <div></div>
  18. <div class="blue"></div>
  19. <div></div>
  20. <div class="red"></div>
  21.  
  22. <div><br/><span>Peter</span></div>
  23. <div class="blue"></div>
  24. <p>&nbsp;</p>
  25. <script>
  26.   $("div").one('click', function () {
  27.     if ($(this).is(":first-child")) {
  28.       $("p").text("It's the first div.");
  29.     } else if ($(this).is(".blue,.red")) {
  30.       $("p").text("It's a blue or red div.");
  31.     } else if ($(this).is(":contains('Peter')")) {
  32.       $("p").text("It's Peter!");
  33.     } else {
  34.       $("p").html("It's nothing <em>special</em>.");
  35.     }
  36.     $("p").hide().slideDown("slow");
  37.     $(this).css({"border-style": "inset", cursor:"default"});
  38.   });
  39. </script>
  40.  
  41. </body>
  42. </html>

运行一下

实例

返回true，因为input的父级是一个表单的元素。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>div { color:red; }</style>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8.   <form><input type="checkbox" /></form>
  9. <div></div>
  10. <script>
  11.   var isFormParent = $("input[type='checkbox']").parent().is("form");
  12.   $("div").text("isFormParent = " + isFormParent);
  13. </script>
  14.  
  15. </body>
  16. </html>

运行一下

实例

返回false，因为input的父级是一个P元素。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>div { color:red; }</style>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8.   <form><p><input type="checkbox" /></p></form>
  9.   <div></div>
  10. <script>
  11.   var isFormParent = $("input[type='checkbox']").parent().is("form");
  12.   $("div").text("isFormParent = " + isFormParent);
  13. </script>
  14.  
  15. </body>
  16. </html>

运行一下

实例

针对检查列表元素交替现有的集合。 Blue, alternating list elements slide up while others turn red. 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>li { cursor:pointer; }</style>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8.  
  9. <ul id="browsers">
  10.   <li>Chrome</li>
  11.   <li>Safari</li>
  12.   <li>Firefox</li>
  13.   <li>Opera</li>
  14. </ul>
  15. <script>
  16.   var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
  17.   $('li').click(function() {
  18.     var $li = $(this);
  19.     if ( $li.is( $alt ) ) {
  20.       $li.slideUp();
  21.     } else {
  22.       $li.css("background", "red");
  23.     }
  24.   });
  25. </script>
  26.  
  27. </body>
  28. </html>

运行一下

实例

另一种方式来实现上面的示例中使用的元素而不是一个jQuery对象。Blue, alternating list elements slide up while others turn red. 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>li { cursor:pointer; }</style>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8.  
  9. <ul id="browsers">
  10.   <li>Chrome</li>
  11.   <li>Safari</li>
  12.   <li>Firefox</li>
  13.   <li>Opera</li>
  14. </ul>
  15. <script>
  16.   var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
  17.   $('li').click(function() {
  18.     if ( $alt.is( this ) ) {
  19.       $(this).slideUp();
  20.     } else {
  21.       $(this).css("background", "red");
  22.     }
  23.   });
  24. </script>
  25.  
  26. </body>
  27. </html>

运行一下

还没有评论.