JQuery is()方法与hasClass()方法的对比

不要心存侥幸,避免贪婪的心作怪,这会令你思考发生短路。如果你不是步步踏实,就容易掉入不切实际的冒险。

JQ中的is()方法与hasClass方法都可以检查某个元素中是否具有某个类,虽然它两个的功能相同,但相比较来说is()方法更好用,更强大,参数中不但可以放入字符串,还可以放入函数。

JQ中的hasClass()方法

语法:

$(selector).hasClass("className");

例:JQ检查某个元素是否含有某个类

代码:

<div id="mochu" class="dd aa"></div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        alert($('#mochu').hasClass('dd'));
        alert($('#mochu').hasClass('dd aa'));
        alert($('#mochu').hasClass('dd bb'));
    });
</script>

返回三个结果,分别是:true true false

由上面的例子可以看出,使用hasClass()方法时,所要查找的多个类名必须同时存在,才回返回 true 否则返回 false

关于hasClass的更多示例和讲解,可以参考《JQ判断一个元素是否具有某个class》这篇文章

JQ中的is()方法

is() 方法用于查看选择的元素是否匹配选择器

语法:

$(selector).is(selectorElement,function(index,element))

selectorElement:必须。选择器表达式,根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true,否则返回 false

function(index,element):可选。指定了选择元素组要执行的函数。index - 元素的索引位置,element - 当前元素 ( "this" 选择器也可以使用 )

例:JQ检查某个元素是否含有某个类

is()方法判断某个元素是否具有某个类时,如果要判断多个类,每个类要用英文逗号分开,大家可以参看下面示例代码的写法

<div id="mochu" class="dd aa"></div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        alert($('#mochu').is('.dd'));
        alert($('#mochu').is('.dd,.aa'));
        alert($('#mochu').is('.dd,.bb'));
    });
</script>

返回三个结果分别是:true true true

由上面的例子可以看出,使用is()方法时,所要查找的多个类在某个元素中只要存在一个,就会返回true

例:JQ判断某个元素下是否含有指定的子元素

is()方法不仅仅可以判断某个元素是否具有某个类,还能判断某个元素是否含有指定的子元素,或某个元素的父元素是否为指定元素

下面的示例,判断一个元素中是否含有指定的元素

jQuery is() 方法,jquery hasClass()、is(),JQuery is()方法与hasClass()方法的对比

<div id="mochu">
    <p>
        
    </p>
</div>
<button>点我测试</button>
<script>
    $('button').click(function(){
        alert($('#mochu').children().is('p'));
    });
</script>

返回结果:true

到此这篇关于JQuery is()方法与hasClass()方法的对比就介绍到这了。人最大的罪过——无知!更多相关JQuery is()方法与hasClass()方法的对比内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!