<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery过滤器 属性过滤</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
span,div{
width:200px;
height:200px;
background:#aaa;
margin-right:10px;
border:1px solid black;
float:left;
}
.bgRed{
width:55px;
height:80px;
font-size:14px;
margin-left:5px;
margin-bottom:5px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//手动重置
$("#but").click(function(){
$("*").removeAttr("style");
});
//添加动画
function demo(){
$("#s01").slideToggle("slow",demo);
}
demo();
//<input type="button" id="but2" value="含有属性title 的div元素."/>
$("#but2").click(function(){
$("div[title]").css("background","red");
});
//<input type="button" id="but3" value="属性title值等于'test'的div元素."/>
$("#but3").click(function(){
$("div[title='test']").css("background","red");
});
//<input type="button" id="but4" value="属性title值不等于'test'的div元素(没有属性title的也将被选中)."/>
$("#but4").click(function(){
$("div[title!='test']").css("background","red");
});
//<input type="button" id="but5" value="属性title值 以'te'开始 的div元素."/>
$("#but5").click(function(){
$("div[title^='te']").css("background","red");
});
//<input type="button" id="but6" value="属性title值 以'est'结束 的div元素."/>
$("#but6").click(function(){
$("div[title$='est']").css("background","red");
});
//<input type="button" id="but7" value="属性title值 含有'es'的div元素."/>
$("#but7").click(function(){
$("div[title*='es']").css("background","red");
});
//<input type="button" id="but8" value="选取有属性id的div元素,然后在结果中选取属性title值含有'es'的 div 元素."/>
$("#but8").click(function(){
$("div[id][title*='es']").css("background","red");
});
});
</script>
</head>
<body>
<input type="button" id="but" value="手动重置"/>
<input type="button" id="but2" value="含有属性title 的div元素."/>
<input type="button" id="but3" value="属性title值等于'test'的div元素."/>
<input type="button" id="but4" value="属性title值不等于'test'的div元素(没有属性title的也将被选中)."/>
<input type="button" id="but5" value="属性title值 以'te'开始 的div元素."/>
<input type="button" id="but6" value="属性title值 以'est'结束 的div元素."/>
<input type="button" id="but7" value="属性title值 含有'es'的div元素."/>
<input type="button" id="but8" value="选取有属性id的div元素,然后在结果中选取属性title值含有'es'的 div 元素."/>
<p></p>
<div class="one" id="one">
class为one id为one的div
<div class="bgRed">class为bgRed的div</div>
</div>
<div class="one">
class为one的div
<div class="bgRed">class为bgRed的div</div>
<div class="bgRed">class为bgRed的div</div>
<div class="bgRed">class为bgRed的div</div>
<div class="bgRed"></div>
</div>
<div class="one">
class为one的div
<div class="bgRed">class为bgRed的div</div>
<div class="bgRed">class为bgRed的div</div>
<div class="bgRed">class为bgRed的div</div>
<div class="bgRed" title="tesst">class为bgRed title为tesst的div</div>
</div>
<div class="one" id="two" title="test">
class为one id为two title为test的div
<div class="bgRed" title="other">class为bgRed title为other的div</div>
<div class="bgRed" title="test">class为bgRed title为test的div</div>
</div>
<!--隐藏-->
<div style="display:none"></div>
<span id="s01">正在执行的动画</span>
</body>
</html>
Jquery(八) 属性过滤
最新推荐文章于 2021-11-11 19:54:49 发布