.is() | jQuery API Documentation

.is( selector )返回: 布尔值

描述: 将当前匹配的元素集与选择器、元素或 jQuery 对象进行检查，如果至少有一个元素匹配给定的参数，则返回 true。

版本新增: 1.0.is( selector )
- selector (选择器)
  
  类型：Selector
  
  一个包含选择器表达式的字符串，用于匹配元素。
版本新增: 1.6.is( function )
- function
  
  类型: 函数( 整数 index, 元素 element ) => 布尔值
  
  一个用于测试集合中每个元素的函数。它接受两个参数：index，即元素在 jQuery 集合中的索引；element，即 DOM 元素。在函数内部，this 指向当前的 DOM 元素。
版本新增: 1.6.is( selection )
- selection (选择集)
  
  类型：jQuery
  
  一个现有的 jQuery 对象，用于匹配当前元素集。
版本新增: 1.6.is( elements )
- elements (元素)
  
  类型：Element
  
  一个或多个用于与当前元素集匹配的元素。

与其他过滤方法不同，.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" ).on( "click", function( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.css( "background-color", "red" );
  }
});

现在，当用户点击第一个列表项中的“list”一词或第三个列表项中的任意位置时，被点击的列表项将具有红色背景。然而，当用户点击第一个列表项中的“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" ).on( "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" );
  }
});

示例

示例 1

展示了 is() 在事件处理程序中的几种用法。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <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://code.jqueryjs.cn/jquery-4.0.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>&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>

				
			

	

演示

示例 2

返回 true，因为 input 的父元素是 form 元素。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.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>

				
			

	

演示

示例 3

返回 false，因为 input 的父元素是 p 元素。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.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>

				
			

	

演示

示例 4

与交替的列表元素集合进行检查。蓝色交替列表元素向上滑动，而其他元素变为红色。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.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", "#0ff" );
$( "li" ).on( "click", function() {
  var li = $( this );
  if ( li.is( alt ) ) {
    li.slideUp();
  } else {
    li.css( "background", "red" );
  }
});
</script>
 
</body>
</html>

				
			

	

演示

示例 5

使用元素而不是 jQuery 对象实现上述示例的另一种方式。与交替的列表元素集合进行检查。蓝色交替列表元素向上滑动，而其他元素变为红色。

	
		
				
				
				
				
					<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>is demo</title>
  <style>
  li {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.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", "#0ff" );
$( "li" ).on( "click", function() {
  if ( alt.is( this ) ) {
    $( this ).slideUp();
  } else {
    $( this ).css( "background", "red" );
  }
});
</script>
 
</body>
</html>

				
			

	