<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类过滤</title>
<style>
.father{
width: 600px;
height: 800px;
background: #0ff;
position: relative;
}
.div{
width: 100px;
height: 100px;
background: #ff0;
margin: 10px;
float: left;
position: absolute;
}
.div1{
left: 10px;
}
.div2{
left: 130px;
}
.div3{
left: 250px;
}
.div4{
left: 370px;
}
</style>
<!-- $ is not defined:js引用的问题,解决方法:1.jQuery在js之前引用2.检查路径 -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
// $("div").click(function(){
// // 类中有div2,动画才生效
// if($(this).hasClass("div2")){
// $(this).animate({left:100})
// .animate({left:200})
// .animate({left:0})
// .animate({left:200})
// .animate({left:100})
// .animate({left:130});
// }
// });
// 下标过滤
// $("div").eq(2).click(function(){
// $(this).animate({left:100})
// .animate({left:200})
// .animate({left:0})
// .animate({left:200})
// .animate({left:100})
// .animate({left:130});
// });
// 表达式过滤
// $("div").filter(".div2").click(function(){
// $(this).animate({left:100})
// .animate({left:200})
// .animate({left:0})
// .animate({left:200})
// .animate({left:100})
// .animate({left:130});
// });
触动的是整个.father区域
$("div").has(".div2").click(function(){
//触动的是整个.father区域
$(".div2").animate({left:100})
.animate({left:200})
.animate({left:0})
.animate({left:200})
.animate({left:100})
.animate({left:130});
});
});
</script>
</head>
<body>
<div class="father">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<div class="div div4"></div>
</div>
</body>
</html>
类过滤
最新推荐文章于 2022-07-07 15:33:19 发布