1.内容过滤选择器
<!--页面格式-->
<head>
<script src = "jquery.js"></script>
<script src = "test.js"></script>
<style>
span{
width:140px;
height:140px;
margin:5px;
background:orchid;
border:#000 1px solid;
float :left;
font-size :17px;
font-family :verdana;
}
div.min {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
.one{
width:140px;
height:140px;
margin:5px;
background:greenyellow;
border:royalblue 5px solid;
float :left;
font-size :17px;
font-family :verdana;
}
.min{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 2px solid;
float :left;
font-size :17px;
font-family :verdana;
}
</style>
</head>
<body>
<h1>过滤选择器</h1>
<h2>基本过滤选择器</h2>
<div class= one id = one >
id为one、class为one的div
<div class =min>class 为min的div</div>
</div>
<div class = one id = two title = test>
id为two class为one title为test的div
<div class = min title=other>class为min title为other的div</div>
<div class = min title = test>class 为min title为test的div</div>
</div>
<div class =one >
<div class = min>class 为min的div</div>
<div class = min>class为min的div</div>
<div class = min>class 为min的div</div>
<div class = min></div>
</div>
<div class =one >
<div class = min>class 为min的div</div>
<div class = min>class为min的div</div>
<div class = min>class 为min的div</div>
<div class = min title=test> class为min title为test的div</div>
</div>
<div style = "display :none;" class = none>
style的display为none的div
</div>
<div class = hide>class 为hide的div</div>
<div>
包含input的type为hideen的div<input type =hidden size=8/>
</div>
<span id = mover>正在执行动画的span元素</span>
<div class = one></div>
<button onclick="panda3()">点我 点我</button>
</body>
//函数响应部分
function panda3(){
//内容过滤选择器 子元素或者文本内容
//$("div:contains(min)").css("background","black");//获取div文本内容包含min的div 包括外层div
//$("div:empty").css("background","antiquewhite");//获取只有个<div></div>框,其它啥也没有的元素
//$("div:has('.min')").css("background","#4169E1");
$("div:parent").css("background","#4169E1");//获取不是div框架的所有div
}
Tip:
1.
$("div:contains(嘎嘎)") 获取的是div后面的文本内容包含嘎嘎的所有div,包含意味着是模糊查询,
<div>
<div> 嘎嘎 呱呱</div>
</div>
<!--这个子div的所有内容都是外层div的文本 所以$("div:contains(嘎嘎)")会把子div和外层div都获取到-->
2.
$("div:empty") 获取空的div 也就是说只有div框架<div></div>,没有子div也没有文本的div,就是啥也没有只有框的div
$("div:parent")和$("div:empty")是一对,获取不是只有框的div,至少有文本
3.
$("div:has('.min')") 这个获取的是div下有class为min的元素的div,has明显是有的意思,有啥呢?有class为min的元素在div里的div
2.可见性过滤选择器
function panda3(){
$("div:visible").css("background","aqua");//获取所有可见的div
$("div:hidden").css("background","aqua");//获取所有不可见的div
}
tip:
$(“:hidden”) 获取所有不可见元素,
包括:<input type ="hidden"/>
<div style="display:one;">
<div style = "visibility:none;">