前端过滤器实例介绍
过滤器
类过滤器：hasClass（class）//检查当前的元素是否含有某个特定的类，如果有，则返回true
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<style type="text/css">
p{
position:absolute;
width:100px;
height:100px;
}
.one{
background-color: goldenrod;
}
.tow{
background-color: yellow;
left:120px;
}
.three{
background-color: gray;
left:220px;
}
.four{
background-color: green;
left:320px;
}
.five{
background-color: greenyellow;
left:420px;
}
</style>
<title></title>
</head>
<body>
<p class="one"></p>
<p class="tow"></p>
<p class="three"></p>
<p class="four"></p>
<p class="five"></p>
<script type="text/javascript">
$(function()
{
$("p").click(function (){
if($(this).hasClass("tow"))
{
$(this).animate({left:120})//动画效果
.animate({bottom:120})
.animate({bottom:240})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120})
.animate({top:240})
.animate({top:120})
.animate({top:8});
}
});
});
</script>
</body>
</html>
//下标过滤：
eq(index)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<style type="text/css">
p{
position:absolute;
width:100px;
height:100px;
}
.one{
background-color: goldenrod;
}
.tow{
background-color: yellow;
left:120px;
}
.three{
background-color: gray;
left:220px;
}
.four{
background-color: green;
left:320px;
}
.five{
background-color: greenyellow;
left:420px;
}
</style>
<title></title>
</head>
<body>
<p class="one"></p>
<p class="tow"></p>
<p class="three"></p>
<p class="four"></p>
<p class="five"></p>
<script type="text/javascript">
$(function()
{
$("p").eq(2).click(function (){
$(this).animate({left:120})
.animate({bottom:120})
.animate({bottom:240})
.animate({left:240})
.animate({left:0})
.animate({left:240})
.animate({left:120})
.animate({top:240})
.animate({top:120})
.animate({top:8});
});
});
</script>
</body>
</html>
表达式过滤：
filter(expr)
filter(fn)
//
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<style type="text/css">
p{
position:absolute;
width:100px;
height:100px;
}
.one{
background-color: goldenrod;
}
.tow{
background-color: yellow;
left:120px;
}
.three{
background-color: gray;
left:220px;
}
.four{
background-color: green;
left:320px;
}
.five{
background-color: greenyellow;
left:420px;
}
</style>
<title></title>
</head>
<body>
<p class="one"></p>
<p class="tow"></p>
<p class="three"></p>
<p class="four"></p>
<p class="five"></p>
<script type="text/javascript">
$(function()
{
$("p").filter(".five").css("background-color","blanchedalmond")
});
</script>
</body>
</html>
Is(expr)//用一个表达式来检查当前的元素集合。如果其中至少一个元素符合这个给定的表达式就返回为true
map(callback)//将一组元素转换成其他数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<title></title>
</head>
<body>
<p>注册信息：</p>
<form>
<input type="text" name="name" value="用户名" />
<input type="password" name="password" value="密码" />
<input type="text" name="url" value="https://www.baidu.com"/>
</form>
<script type="text/javascript">
$(function (){
$("p").append($("input").map(function (){
return $(this).val();
}).get().join(","))
});
</script>
</body>
</html>
has(expr)//保留包含特定后代的元素，去掉那些不含指定后代的元素
not(expr)//删除与指定表达式匹配的元素
slice(start,[end])//选取一个匹配的子集
上一篇： 鼠标悬停边框围绕效果动态边框的代码实现
下一篇： css初学者必知必会的基础知识