返回值:Booleanis(selector)

Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector.

Unlike the other filtering and traversal methods, .is() does not create a new jQuery object. Instead, it allows us to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers.

Suppose we have a list, with two of its items containing a child element:

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

We can attach a click handler to the <ul> element, and then limit the code to be triggered only when a list item itself, not one of its children, is clicked: 

$('ul').click(function(event) {
  if ($(event.target).is('li') ) {
    $(event.target).css('background-color', 'red');
  }
});

Now, when the user clicks on the word list in the first item or anywhere in the third item, the clicked list item will be given a red background. However, when the user clicks on item 1 in the first item or anywhere in the second item, nothing will occur, because in those cases the target of the event would be <strong> or <span>, respectively.

示例:

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="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>
演示:

示例:

Returns true, because the parent of the input is a form element

<!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>
演示:

示例:

Returns false, because the parent of the input is a p element

<!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>
演示: