如何在jQuery中使用is()函数
时间:2020-02-23 14:46:02 来源:igfitidea点击:
在本文中,我们将讨论如何使用jQueryis()
方法。
这是在事件处理程序之类的回调函数中经常使用的重要过滤方法。
jQuery is()
我们使用jQuery is()与另一个元素,选择器或者任何jQuery对象一起检查选定的元素。
此方法遍历DOM元素以找到匹配项,该匹配项满足传递的参数。
如果存在匹配项,它将返回true,否则返回false。
这是使用is()的一般语法;
- selector.is(filter)
过滤器可以是字符串选择器表达式,函数,元素或者任何现有的jQuery对象。
jQuery is()示例
下面的示例演示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">Sachin</div> <div class="blue">Ganguly</div> <div>Dravid</div> <div class="red">Srinath</div> <div class="grey">Kumble</div> <div>Sanju</div> <p> </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>
在此示例中,您可以看到is()方法的用法。
$(this).is(" #sachin")":其中is()方法检查所选元素的
id =" sachin""。
$(this).is(" .blue"):is()检查所选元素是否属于"class =" blue""。
$(this).is(":contains('Dravid')")":这里is()检查元素是否包含字符串" Dravid"。
$(this).is(" .red,.grey")":这行代码检查所选元素是属于class =" red"还是class =" blue"
。
Srinath和Kumble的输出相同。
如果通过以上任何条件,并在div元素下方显示具有滑动效果的输出文本,则返回true。
否则执行默认条件。
在我们的例子中,单击" Sanju"时将执行默认条件。
您可以尝试将函数,jQuery对象或者任何元素传递给jQuery is()方法。