返回值:Booleanis(selector)

判断当前匹配的元素集合中的元素，是否为一个选择器，元素或 jQuery 对象。若匹配的元素集合中至少有一个元素满足给定的参数，则返回 true。

不像其它的过滤方法，.is() 并不会创建新的 jQuery 对象。相反，它允许你检测 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" 或点击第三个列表项的任何地方时，就会为所点击的列表项添加红色背景。然而，当用户点击第一个列表项中的 "item 1" 或者点击第二个列表项的任何地方时，就不会触发任何动作，因为这两种情况中 event 对象的 target 分别是 <strong> 和 <span>，而不是 <li>。

在 jQuery 1.7 之前，若在选择器字符串中包含位置选择器时，例如 :first， :gt()， 或 :even，那么位置选择器是相对于传入 .is() 的 jQuery 对象的，而不是相对于所在的文档的。因此，对于上面显示的 HTML，表达式 $("li:first").is("li:last") 会返回 true，但是 $("li:first-child").is("li:last-child") 则返回 false。此外，由于 Sizzle 中的一个 bug，使得很多位置选择器无法正常工作。由于这两个原因，使得在过滤器中几乎无法使用位置选择器。

原文如下：

Prior to jQuery 1.7, in selector strings with positional selectors such as :first, :gt(), or :even, the positional filtering is done against the jQuery object passed to .is(), not against the containing document. So for the HTML shown above, an expression such as $("li:first").is("li:last") returns true, but $("li:first-child").is("li:last-child") returns false. In addition, a bug in Sizzle prevented many positional selectors from working properly. These two factors made positional selectors almost unusable in filters.

从 jQuery 1.7 开始，若选择器字符串中含有位置选择器，那么选择器是相对于文档的，它会判断当前 jQuery 集合中的第一个元素是否匹配产生的任何元素。因此，对于上面显示的 HTML，表达式 $("li:first").is("li:last") 会返回 false。注意，由于位置选择器是 jQuery 添加的功能，而不是 W3C 标准，所以我们建议尽可能的使用 W3C 选择器。

原文如下：

Starting with jQuery 1.7, selector strings with positional selectors apply the selector against the document, and then determine whether the first element of the current jQuery set matches any of the resulting elements. So for the HTML shown above, an expression such as $("li:first").is("li:last") returns false. Note that since positional selectors are jQuery additions and not W3C standard, we recommend using the W3C selectors whenever feasible.

使用函数

is(function(index)) 此种形式的方法，会根据一个函数来进行判断，而不是使用一个选择器。对于集合中的每一个元素，如果函数返回 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="jquery.min.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>

演示:

示例:

由于 input 的父元素是表单元素，所以返回了 true。

<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="jquery.min.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>

演示:

示例:

由于 input 的父元素是 p 元素，所以返回了 false。

<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="jquery.min.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>
<head>
<style>li { cursor:pointer; }</style>
<script src="jquery.min.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>

演示:

示例:

可以使用另外一种方法来达到上面例子的效果，那就是使用元素，而不是使用 jQuery 对象。检查一个已经存在的列表集合。点击蓝色的列表项时，该列表项会向上滑动，点击其它列表项则会使其背景色变成红色。

<!DOCTYPE html>
<html>
<head>
<style>li { cursor:pointer; }</style>
<script src="jquery.min.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>

演示: