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()方法不仅仅可以判断某个元素是否具有某个类，还能判断某个元素是否含有指定的子元素，或某个元素的父元素是否为指定元素

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

<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()方法的对比内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！