jQuery學習 — — 選擇器（上）
阿新 • • 發佈：2019-02-12
一、基本選擇器
id選擇器：$(“#test”);
注意需要以#開頭，才是根據id查詢;
將id=test的Don物件儲存到jQuery包裝集並返回。（返回的是一個jQuery物件）;標籤選擇器：$(“input”);
將所有input標籤作為Dom物件儲存到jQuery包裝集並返回。樣式選擇器：$(“.class1”);
將所有包含class=”class1”的Dom物件儲存到jQuery包裝集並返回全選擇器：$(“*”);
將所有標籤作為Dom物件儲存到jQuery包裝集並返回。
<head>
<base href="<%=basePath%>" 二、層級選擇器
ancestor descendant選擇器：$(“div[id=’testDiv2’] input”);
ancestor:任何有效的選擇器
descendant:用來匹配最終獲取元素的選擇器，它必須是前一個選擇器的後代元素。子孫元素
將匹配到的Dom物件放進jQuery包裝集並返回。parent > child選擇器: $(“div[id=’testDiv2’] > input”);
parent:任何有效的選擇器
child:用來匹配最終獲取元素的選擇器，它必須是前一個選擇器的子元素。注意是子元素，不包括孫元素。
將匹配到的Dom物件放進jQuery包裝集並返回。prev + next選擇器： $(“#testDiv2-1 + input”);
prev :任何有效的選擇器 :
next:一個有效的選擇器，並且必須是緊跟在prev元素後面。
將匹配到的Dom物件放進jQuery包裝集並返回。prev ~ siblings選擇器 : $(“#test1 ~ input”);
prev :任何有效的選擇器
siblings:一個有效的選擇器，不需要緊跟prev元素，但是必須是和prev元素同級。
將匹配到的Dom物件放進jQuery包裝集並返回。
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector2.jsp' starting page</title>
<style type="text/css">
.class1 {
font-size: 15px;
}
.class2 {
font-size: 25px;
}
</style>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/*******************層級選擇器*******************************/
//ancestor descendant選擇器：獲取<div id="testDiv2">內所有的input標籤，包括下一代下下一代下下下一代...
function doSelector1(){
var inputs = $("div[id='testDiv2'] input");
inputs.each(function(){
alert(this.value);
});
}
//parent > child選擇器：獲取<div id="testDiv2">下一層所有的input標籤，只包含下一代，注意和ancestor descendant選擇器區別
function doSelector2(){
var inputs = $("div[id='testDiv2'] > input");
inputs.each(function(){
alert(this.value);
});
}
//prev + next選擇器：獲取<div id="testDiv2-1" >後面緊跟的一個input標籤，如果緊跟標籤不是input，沒有返回。
function doSelector3(){
var inputs = $("#testDiv2-1 + input");
inputs.each(function(){
alert(this.value); // test3,
});
}
//prev ~ siblings選擇器：獲取<div id="test1" >後面所有跟其同級的input標籤
function doSelector4(){
var inputs = $("#test1 ~ input");
inputs.each(function(){
alert(this.value);
});
}
</script>
</head>
<body>
<div id="testDiv2">
<input class="class1" type="text" id="test1" name="test1" value="test1">
<div id="testDiv2-1" >
<input class="class1" type="text" id="test2" name="test2" value="test2">
</div>
<input class="class1" type="text" id="test3" name="test3" value="test3"> <br>
<input type="button" id="test4" name="test4" value="ancestor descendant選擇器" onclick="doSelector1()">
<input type="button" id="test5" name="test5" value="parent > child選擇器" onclick="doSelector2()">
<input type="button" id="test6" name="test6" value="prev + next選擇器" onclick="doSelector3()">
<input type="button" id="test7" name="test7" value="prev ~ siblings選擇器" onclick="doSelector4()">
</div>
</body>三、基本過濾選擇器
:first選擇器：$(“input:first”);
將匹配到的第一個input 作為Dom物件放進jQuery包裝集並返回。:last選擇器：$(“input:last”);
將匹配到的最後一個input 作為Dom物件放進jQuery包裝集並返回。:last選擇器：$(“input:not(.class1)”);
將匹配到的class!= “class1” 的input作為Dom物件放進jQuery包裝集並返回。:even選擇器：$(“input:even”);
將匹配到的第偶數個input（0、2、4…）作為Dom物件放進jQuery包裝集並返回。注意從0開始:even選擇器：$(“input:odd”);
將匹配到的第奇數個input（1、3、5…）作為Dom物件放進jQuery包裝集並返回。注意從0開始:eq選擇器：$(“input:eq(1)”);
將匹配到的索引值為1的input作為Dom物件放進jQuery包裝集並返回。注意從0開始:gt選擇器：$(“input:gt(5)”);
將匹配到的索引值大於5的input（不包括5，並且從0開始，即第7個input開始獲取）作為Dom物件放進jQuery包裝集並返回。:lt選擇器：$(“input:lt(3)”);
將匹配到的索引值小於3的input（0、1、2）作為Dom物件放進jQuery包裝集並返回。注意從0開始:header選擇器：$(“:header”);
將匹配到的< h1> < 2>這類標題標籤作為Dom物件放進jQuery包裝集並返回。:animated選擇器(理解中，後期補上)
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector2.jsp' starting page</title>
<style type="text/css">
.class1 {
font-size: 15px;
}
.class2 {
font-size: 25px;
}
</style>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
/*******************基本過濾選擇器*******************************/
//獲取第一個input標籤
function doSelector1(){
var first = $("input:first");
alert(first.val());
}
//獲取最後一個input標籤
function doSelector2(){
var last = $("input:last");
alert(last.val());
}
//獲取 去除所有與給定選擇器（.class1）匹配的元素後剩下的input元素
function doSelector3(){
var test3 = $("input:not(.class1)");
test3.each(function(){
alert(this.value);
});
}
//獲取所有索引值為偶數的元素，從 0 開始計數 （0,2,4...）
function doSelector4(){
var test4 = $("div input:even");
test4.each(function(){
alert(this.value);
});
}
//獲取所有索引值為奇數的元素，從 0 開始計數 (1,3,5...)
function doSelector5(){
var test5 = $("div input:odd");
test5.each(function(){
alert(this.value);
});
}
//獲取一個給定索引值的元素 （div內第2個input，因為是從0開始）
function doSelector6(){
var test6 = $("div input:eq(1)");
test6.each(function(){
alert(this.value);
});
}
//獲取所有大於給定索引值的元素 （索引值大於5的元素，不包括5。從第7個元素開始返回，因為從0開始）
function doSelector7(){
var test7 = $("div input:gt(5)");
test7.each(function(){
alert(this.value);
});
}
//獲取所有小於給定索引值的元素 （索引值小於3，不包括3，返回第0，1，2個input元素）
function doSelector8(){
var test8 = $("div input:lt(3)");
test8.each(function(){
alert(this.value);
});
}
//獲取如 h1的標題元素
function doSelector9(){
var test9 = $(":header");
test9.each(function(){
alert($(this).text());
});
}
//:animated(理解中)
</script>
</head>
<body>
<h1>111</h1>
<div id="testDiv2">
<input class="class1" type="text" id="test1" name="test1" value="test1" >
<div id="testDiv2-1" >
<input class="class1" type="text" id="test2" name="test2" value="test2">
</div>
<input class="class1" type="text" id="test3" name="test3" value="test3"> <br>
<input type="button" id="test4" name="test4" value=":first選擇器" onclick="doSelector1()">
<input type="button" id="test5" name="test5" value=":last選擇器" onclick="doSelector2()">
<input type="button" id="test6" name="test6" value=":not選擇器" onclick="doSelector3()">
<input type="button" id="test7" name="test7" value=":even選擇器" onclick="doSelector4()">
<input type="button" id="test8" name="test8" value=":odd選擇器" onclick="doSelector5()"><br>
<input type="button" id="test9" name="test9" value=":eq選擇器" onclick="doSelector6()">
<input type="button" id="test10" name="test10" value=":gt選擇器" onclick="doSelector7()">
<input type="button" id="test11" name="test11" value=":lt選擇器" onclick="doSelector8()">
<input type="button" id="test12" name="test12" value=":header選擇器" onclick="doSelector9()">
<!-- <input type="button" id="test13" name="test13" value=":animated選擇器" onclick="doSelector10()"> -->
</div>
</body>