jQuery學習 — — 選擇器(上)
一、基本選擇器
id選擇器:$(“#test”);
注意需要以#開頭,才是根據id查詢;
將id=test的Don物件儲存到jQuery包裝集並返回。(返回的是一個jQuery物件);標籤選擇器:$(“input”);
將所有input標籤作為Dom物件儲存到jQuery包裝集並返回。樣式選擇器:$(“.class1”);
將所有包含class=”class1”的Dom物件儲存到jQuery包裝集並返回全選擇器:$(“*”);
將所有標籤作為Dom物件儲存到jQuery包裝集並返回。
<head>
<base href="<%=basePath%>" >
<title>My JSP 'ad_selector1.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">
/****************基本選擇器*************************/
//id選擇器 獲取id=test1的標籤
function doSelector1() {
var test1 = $("#test1");
alert(test1.val()); //test1
}
//標籤選擇器 獲取所有input標籤
function doSelector2() {
var input = $("input");
input.each(function () {
alert(this.value);
//依次:test1,test2,test3,id選擇器,標籤選擇器,class選擇器,全選擇器
});
}
//class選擇器 :獲取class="class1"的標籤
function doSelector3() {
var class1 = $(".class1");
class1.each(function() {
alert(this.value); //依次:test1,test2
});
}
//全選擇器:獲取所有標籤
function doSelector4() {
var all = $("*");
all.each(function() {
alert(this.value);
});
}
</script>
</head>
<body>
<div id="testDiv1">
<input class="class1" type="text" id="test1" name="test1" value="test1">
<input class="class1" type="text" id="test2" name="test2" value="test2">
<input class="class2" type="text" id="test3" name="test3" value="test3">
<input type="button" id="test4" name="test4" value="id選擇器" onclick="doSelector1()">
<input type="button" id="test5" name="test5" value="標籤選擇器" onclick="doSelector2()">
<input type="button" id="test6" name="test6" value="類 選擇器" onclick="doSelector3()">
<input type="button" id="test7" name="test7" value="全選擇器" onclick="doSelector4()">
</div>
</body>
二、層級選擇器
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>