四、内容过滤选择器
:contains选择器: $(“div:contains(‘la’)”) （注意该选择器针对的是文本，不是元素）
将包含有la字符串的div元素作为Dom对象放进jQuery包装集并返回:empty选择器： $(“div:empty”)
将空的（没有子元素或文本）的div元素作为Dom对象放进jQuery包装集并放回:has选择器：$(“div:has(h2)”) （注意该选择器针对的是元素，不是文本）
将含有子元素h2的div元素作为Dom对象放进jQuery包装集并返回:parent选择器：$(“div:parent”)
将含有子元素或者文本（非空）的div元素作为Dom对象放进jQuery包装集并返回
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector4.jsp' starting page</title>
<style type="text/css">
.class1 {
font-size: 15px;
}
.class2 {
font-size: 50px;
}
</style>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//获取包含la字符串的div元素
function doSelector1(){
var contains = $("div:contains('la')");
contains.each(function(){
alert($(this).html());
});
}
//获取空的div元素
function doSelector2(){
var empty = $("div:empty");
empty.each(function(){
alert($(this).html());
});
}
//获取包含<h2>元素的div元素
function doSelector3(){
var has = $("div:has(h2)");
has.each(function(){
alert($(this).html());
});
}
//查找所有含有子元素或者文本的div元素
function doSelector4(){
var parent = $("div:parent");
parent.each(function(){
alert($(this).html());
});
}
</script>
</head>
<body>
<h1>hell0 h1</h1>
<div>
<h2>hell0 h2</h2>
</div>
<h3>hell0 h3</h3>
<div>divhaha</div>
<div>lala</div>
<div></div>
<input type="button" value=":contains选择器" onclick="doSelector1()">
<input type="button" value=":empty选择器" onclick="doSelector2()">
<input type="button" value=":has选择器" onclick="doSelector3()">
<input type="button" value=":parent选择器" onclick="doSelector4()">
</body>五、可见性过滤选择器
:visible选择器：$(“div:visible”)
将所有可见的div元素作为Dom对象放进jQuery包装集并返回:hidden选择器：$(“div:hidden”)
将所有不可见的div元素作为Dom对象放进jQuery包装集并返回
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector5.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//获取所有可见的div，并将它们设置为不可见
function doSelector1(){
var hidden = $("div:visible");
hidden.each(function(){
$(this).hide();
});
}
//获取所有可不件的div，并将他们设置为可见
function doSelector2(){
var visible = $("div:hidden");
visible.each(function(){
$(this).show();
});
}
</script>
</head>
<body>
<h1>hell0 h1</h1>
<div style="display: none">
<h2>hell0 h2</h2>
</div>
<h3>hell0 h3</h3>
<div>divhaha</div>
<div>lala</div>
<div></div>
<input type="button" value=":visible选择器" onclick="doSelector1()">
<input type="button" value=":hidden选择器" onclick="doSelector2()">
</body>六、属性过滤选择器
1、attribute ：$(“[id]”)
将所有包含id属性的元素作为Dom放进jQuery包装集并返回
2、attribute=value ： $(“[id=’test1’]”)
将id=test1的元素作为Dom对象放进jQuery包装集并返回
3、attribute!=value ： $(“[id!=’test1’]”)
将id != test1 的元素作为Dom对象放进jQuery包装集并返回，注意：那些没有id属性的元素也会被选中
4、attribute!=value（组合） ： $(“[id][id!=’test1’]”);
将包含有id属性，并且id=test1的元素作为Dom对象放进jQuery包装集并返回。与第三点相比，这里过滤掉了那些没有id属性的元素（即没有id属性的元素不会被选中）
5、attribute^=value ： $(“input[name^=’test’]”)
将name属性是以test开头的input元素作为Dom对象放进jQuery包装集并返回。
6、attribute$=value ： $(“input[name$=’letter’]”)
将name属性是以letter结尾的input元素作为Dom对象放进jQuery包装集并返回。
7、attribute*=value ： $(“input[name*=’s’]”)
将name属性中包含有字符串“s”的input元素作为Dom对象放进jQuery包装集并返回。
8、组合选择器：$(“input[id][name^=’test’]”) 顾名思义，将多个选择器联合起来用。
将包含id属性，且name属性是以“test”开头的input元素作为Dom对象放进jQuery包装集并返回。
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector6.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//获取包含属性id的标签
function doSelector1(){
var attribute = $("[id]");
attribute.each(function(){
alert($(this).val());
});
}
//获取包含属性id并且id=test1的标签
function doSelector2(){
var attribute_value = $("[id='test1']");
attribute_value.each(function(){
alert($(this).val());
});
}
//获取id!=test1的标签(不包含属性id的标签也会被选中)
function doSelector3(){
var attribute_value = $("[id!='test1']");
attribute_value.each(function(){
alert($(this).val());
});
}
//如果希望获取包含指定的属性，并且属性值不等于给定值
function doSelector4(){
var attribute_value1 = $("[id][id!='test1']");
attribute_value1.each(function(){
alert($(this).val());
});
}
//获取所有name以test开头的input元素
function doSelector5(){
var attribute5 = $("input[name^='test']");
attribute5.each(function(){
alert($(this).val());
});
}
//获取所有name以letter结尾的input元素
function doSelector6(){
var attribute6 = $("input[name$='letter']");
attribute6.each(function(){
alert($(this).val());
});
}
//获取所有name包含有s的input元素
function doSelector7(){
var attribute7 = $("input[name*='s']");
attribute7.each(function(){
alert($(this).val());
});
}
//组合查询，获取所有name以test开头，包含id属性的input元素
function doSelector8(){
var attribute8 = $("input[id][name^='test']");
attribute8.each(function(){
alert($(this).val());
});
}
</script>
</head>
<body>
<div>
<input type="text" id="test1" name="test1" value="test1" >
<input type="text" id="test2" name="test2" value="test2" ><br>
<input type="checkbox" name="newsletter" value="haha"/>
<input type="checkbox" name="newsletter" value="lala"/>
<input type="checkbox" name="accept" value="good"/>
</div>
<input type="button" value="attribute" onclick="doSelector1()">
<input type="button" value="attribute=value" onclick="doSelector2()">
<input type="button" value="attribute!=value" onclick="doSelector3()">
<input type="button" value="attribute!=value" onclick="doSelector4()">
<input type="button" value="attribute^=value" onclick="doSelector5()">
<input type="button" value="attribute$=value" onclick="doSelector6()">
<input type="button" value="attribute*=value" onclick="doSelector7()">
<input type="button" value="group" onclick="doSelector8()">
</body>