jQuery學習 — — 選擇器（中）
四、內容過濾選擇器
: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" 五、可見性過濾選擇器
: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>