jQuery顾虑器——类过滤

最新推荐文章于 2022-11-04 21:57:15 发布

CTchen_ting

最新推荐文章于 2022-11-04 21:57:15 发布

阅读量473

点赞数

分类专栏： web 文章标签： web前端 jQuery 过滤器

本文链接：https://blog.csdn.net/CTchen_ting/article/details/51255528

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了jQuery中如何利用hasClass()方法进行类过滤操作，主要用于判断元素是否包含特定类名。通过示例展示了当点击含有'red'类的<div>元素时，执行动画效果，使其左右摆动。示例代码包括jQuery库的引用、事件绑定和样式定义。

摘要由CSDN通过智能技术生成

类过滤就是根据元素的类属性来进行过滤操作，jQuery通过hasClass()方法来实现。具体用法如下：
hasClass(className)
参数className是一个字符串，表示元素的类名。该方法适合执行判断操作，判断当前jQuery对象中的某个元素是否包含了指定的类名，如果包含则返回true，否则返回false。但是该方法无法过滤包含特定类名的元素。

例：设置当<div>标签包含class属性值为red的元素时，则为其绑定一组动画，实现当鼠标单击类名为red的<div>标签时，让它左右摆动两下。

代码如下：（注：请自行下载相关的jQuery包并链接到相关的页面中）
<!DOCTYPE html>
<html>
<head>
<script src="F:/html/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
if($(this).hasClass("red")){
$(this).animate({left:120})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120});
}
});
})
</script>
<style type="text/css">
div{
position:absolute;
width:100px;
height:100px;
}
.blue{background:blue;left:0px}
.red{background:red;left:120px;z-index:2;}
.green{background:green;left:240px;}
.pos{top:120px;}
</style>
<title>practise</title>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red pos"></div>
</body>
</html>

代码详解：在上面的例子中，在<body>中放置了4个<div>标签，其中两个<div>标签包含了red类名，在包含red类名的<div>标签中，有一个是复合类名，即不仅包含red类，还包含了pos类。在页面初始化构造函数中，使用jQuery()函数匹配文档中所有的div元素，然后为它们绑定click事件。