如何在jQuery中使用is（）函数

最新推荐文章于 2021-10-15 10:07:27 发布

翻译最新推荐文章于 2021-10-15 10:07:27 发布 · 571 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.journaldev.com/5374/how-to-use-is-function-in-jquery

标签

#字符串 #js #css #java #html

本文详细介绍了jQuery中的is()方法，这是一个重要的过滤方法，常用于事件处理程序等回调函数中。文章提供了使用is()方法的一般语法和示例，展示了如何检查元素是否满足特定条件，如ID、类名或是否包含特定文本。

In this post, we will discuss how to use the jQuery is() method. This is an important filtering method used often in callback functions like event handlers.

在本文中，我们将讨论如何使用jQuery is()方法。这是事件处理程序之类的回调函数中经常使用的重要过滤方法。

jQuery is（） (jQuery is())

We use jQuery is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match otherwise returns false.

我们使用jQuery is（）与另一个元素，选择器或任何jQuery对象一起检查选定的元素。此方法遍历DOM元素以找到匹配项，该匹配项满足传递的参数。如果存在匹配项，它将返回true，否则返回false。

Here is the general syntax for using is();

这是使用is（）的一般语法；

selector.is(filter)
selector.is（过滤器）

filter could be string selector expression, function, elements or any existing jQuery object.

过滤器可以是字符串选择器表达式，函数，元素或任何现有的jQuery对象。

jQuery is（）示例 (jQuery is() example)

Following example demonstrates jQuery is() method usage.

下面的示例演示jQuery is（）方法的用法。

<!doctype html>
<html>
<head>
<title>jQuery traversing is() example</title>
<style>
   div {
     width: 60px;
     height: 60px;
     margin: 5px;
     float: left;
     border: 4px ;
     background: green;
     text-align: center;
     font-weight: bolder;
     cursor: pointer;
   }
  .blue {
     background: blue;
   } 
  .red {
     background: red;
   }
  .grey{
     background: grey;
   }
   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.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>Click on each div </h2>
<div id="sachin"><span>Sachin</span></div>
<div class="blue"><span>Ganguly</span></div>
<div><span>Dravid</span></div>
<div class="red">Srinath</div>
<div class="grey"><span>Kumble</span></div>
<div><span>Sanju</span></div>
<p>&nbsp;</p>

<script>
$( "div" ).on( "click", function() {
    if ( $( this ).is( "#sachin" ) ) {
      $( "p" ).text( "Best Batsman in the world" );
    } 
    else if ( $( this ).is( ".blue" ) ) {
      $( "p" ).text( "Best Captain Ever" );
    } 
    else if ( $( this ).is( ":contains('Dravid')" ) ) {
      $( "p" ).text( "The Wall" );
    } 
    else if ( $( this ).is( ".red,.grey" ) ) {
      $( "p" ).html( "Clicked on Srinath or Kumble : From Karnataka" );
    }
   else {
      $( "p" ).html( "Young Talent" );
    }
 $( "p" ).hide().slideDown( "slow" );
 $( this ).addClass("yellow");
});
</script>

</body>
</html>

In this example, you can see how is() method is used.

在此示例中，您可以看到is（）方法的用法。

$( this ).is( "#sachin" ) : Here, is() method check if the selected element’s id="sachin".

$( this ).is( "#sachin" ) ：这里，is（）方法检查所选元素的id="sachin" 。

$( this ).is( ".blue" ) : is() check if the selected element belongs to class="blue".

$( this ).is( ".blue" ) ：is（）检查所选元素是否属于class="blue" 。

$( this ).is( ":contains('Dravid')" ) : Here is() checks whether the element contains a string “Dravid”.

$( this ).is( ":contains('Dravid')" ) ：这里is（）检查元素是否包含字符串“ Dravid”。

$( this ).is( ".red,.grey" ) : This line of code checks whether the selected element belongs to class="red" or class="blue". The output will be same for Srinath and Kumble.

$( this ).is( ".red,.grey" ) ：此代码行检查所选元素是属于class="red" or class="blue" 。 Srinath和Kumble的输出将相同。

This will return true if it passes any of these conditions and display an output text with a sliding effect below the div elements. Otherwise executes the default condition. In our case, default condition executes when you click on Sanju
You can try passing function, jQuery object or any elements to the jQuery is() method.

如果通过以上任何条件，并在div元素下方显示具有滑动效果的输出文本，则返回true。否则执行默认条件。在本例中，当您单击Sanju时将执行默认条件
您可以尝试将函数，jQuery对象或任何元素传递给jQuery is（）方法。

You can try it yourself by clicking on any of the colored div elements below.

您可以通过单击下面的任何彩色div元素来自己尝试。

演示地址

That’s all for now. We will discuss some more traversing techniques in the coming posts.

目前为止就这样了。我们将在以后的文章中讨论更多的遍历技术。