jQuery内容过滤器
:empty 当前元素是否为空(是否有标签体–子元素、文本) :has(…) 当前元素,是否含有指定的子元素 :parent 当前元素是否是父元素 :contains( text ) 标签体是否含有指定的文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml" >
<head >
<meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
<title > 04-内容过滤选择器.html</title >
<script src ="../js/jquery-1.8.3.js" type ="text/javascript" > </script >
<script src ="./script/assist.js" type ="text/javascript" > </script >
<link rel ="stylesheet" type ="text/css" href ="./css/style.css" />
<script type ="text/javascript" >
$(document).ready(function () {
$("#btn1" ).click(function () {
$("div:contains('di')" ).css("background-color" ,"#f00" );
});
$("#btn2" ).click(function () {
$("div:empty" ).css("background-color" ,"#f00" );
});
$("#btn3" ).click(function () {
$("div:has('.mini')" ).css("background-color" ,"#f00" );
});
$("#btn4" ).click(function () {
$("div:parent" ).css("background-color" ,"#f00" );
});
});
</script >
</head >
<body >
<h3 > 内容过滤选择器.</h3 >
<button id ="reset" > 手动重置页面元素</button >
<input type ="checkbox" id ="isreset" checked ="checked" /> <label for ="isreset" > 点击下列按钮时先自动重置页面</label > <br /> <br />
<input type ="button" value ="选取含有文本“di”的div元素." id ="btn1" />
<input type ="button" value ="选取不包含子元素(或者文本元素)的div空元素." id ="btn2" />
<input type ="button" value ="选取含有class为mini元素 的div元素." id ="btn3" />
<input type ="button" value ="选取含有子元素(或者文本元素)的div元素." id ="btn4" />
<br /> <br />
<div class ="one" id ="one" >
id为one,class为one的div
<div class ="mini" > class为mini</div >
</div >
<div class ="one" id ="two" title ="test" >
id为two,class为one,title为test的div.
<div class ="mini" title ="other" > class为mini,title为other</div >
<div class ="mini" title ="test" > class为mini,title为test</div >
</div >
<div class ="one" >
<div class ="mini" > class为mini</div >
<div class ="mini" > class为mini</div >
<div class ="mini" > class为mini</div >
<div class ="mini" > </div >
</div >
<div class ="one" >
<div class ="mini" > class为mini</div >
<div class ="mini" > class为mini</div >
<div class ="mini" > class为mini</div >
<div class ="mini" title ="tesst" > class为mini,title为tesst</div >
</div >
<div style ="display:none;" class ="none" > style的display为"none"的div</div >
<div class ="hide" > class为"hide"的div</div >
<div >
包含input的type为"hidden"的div<input type ="hidden" size ="8" />
</div >
<span id ="mover" > 正在执行动画的span元素.</span >
</body >
</html >