七、子元素過濾選擇器
:nth-child :
- $(“ul li:nth-child(2)”)
將所有ul中第二個li作爲Dom對象放進jQuery包裝集並返回 - $(“ul li:nth-child(odd)”)
將所有ul中第奇數個li(從1開始)元素作爲Dom對象放進jQuery包裝集並返回,注意這裏是從1開始。基本過濾器中eq是從0開始
- $(“ul li:nth-child(2)”)
:first-child : $(“ul li:first-child”)
將所有ul中的第一個li元素作爲Dom對象放進jQuery包裝集並返回。:last-child : $(“ul li:last-child”)
將所有ul中的最後一個li元素作爲Dom對象放進jQuery包裝集並返回。:only-child : $(“ul li:only-child”)
將所有有且僅有一個子元素,並且該元素是li元素的ul元素作爲Dom對象放進jQuery包裝集返回。
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector7.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//獲取所有ul中第二個li
function doSelector1(){
var nthchild = $("ul li:nth-child(2)");
nthchild.each(function(){
alert($(this).html());
});
}
//獲取所有ul中第奇數個li(從1開始)
function doSelector2(){
var nthchild = $("ul li:nth-child(odd)");
nthchild.each(function(){
alert($(this).html());
});
}
//獲取所有ul中第一個li
function doSelector3(){
var nthchild = $("ul li:first-child");
nthchild.each(function(){
alert($(this).html());
});
}
//獲取所有ul中最後一個li
function doSelector4(){
var nthchild = $("ul li:last-child");
nthchild.each(function(){
alert($(this).html());
});
}
//獲取所有ul中唯一的li(ul中只有一個元素,且該元素是li,才能被選中,有多個li,或者其他元素都不會被選中)
function doSelector5(){
var nthchild = $("ul li:only-child");
nthchild.each(function(){
alert($(this).html());
});
}
</script>
</head>
<body>
<div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<ul>
<li>777</li>
</ul>
</div>
<input type="button" value=":nth-child" onclick="doSelector1()">
<input type="button" value=":nth-child" onclick="doSelector2()">
<input type="button" value=":first-child" onclick="doSelector3()">
<input type="button" value=":last-child" onclick="doSelector4()">
<input type="button" value=":only-child" onclick="doSelector5()">
</body>
八、表單過濾選擇器
:input : $(“:input”);
將所有input元素作爲Dom對象放進jQuery包裝集並返回,
注意:這裏的input元素包括input, textarea, select 和 button 元素 , 注意與 $(“input”) 的區別:text : $(“:text”);
將所有的文本框(text元素)作爲Dom對象放進jQuery包裝集並返回。
注意:textarea是文本域,不是文本框,所以這裏taxtarea元素不會被選中:password : $(“:password”);
將所有密碼框作爲Dom對象放進jQuery包裝集並返回。:radio : $(“:radio”);
將所有單選按鈕作爲Dom對象放進jQuery包裝集並返回。:checkbox : $(“:checkbox”);
將所有複選按鈕作爲Dom對象放進jQuery包裝集並返回。:submit : $(“:submit”);
將所有提交表單作爲Dom對象放進jQuery包裝集並返回
注意:- < button name=”test7” id=”test7”>test7< / button > 默認type=submit,會被認爲是提交按鈕,會被選中
- 如果< button name=”test7” id=”test7”>test7< / button>增加屬性 type=”button” ,只是普通按鈕,則不會被選中
:image : $(“:image”);
將所有圖像域作爲Dom對象放進jQuery包裝集並返回:reset : $(“:reset”);
將所有重置按鈕作爲Dom對象放進jQuery包裝集並返回。:button : $(“:button”);
將所有普通按鈕作爲Dom對象放進jQuery包裝集並返回。
注意:- 選擇的是普通按鈕,所以提交按鈕和重置按鈕在這裏都不會被選中。
- 上面第6點提到< button name=”test7” id=”test7” >test7< / button> 默認type=submit,是可以爲:submit選擇器選中,同時在這裏也可以被:button選中。感覺有點bug
- 另外即使明確屬性type=”submit” < button type=”submit” name=”test7” id=”test7” >test7< / button>還是會被:button選擇器選中,
- 而其他的input元素,如果明確屬性爲type=”submit”或者type=”reset” 則不會被:button選擇器選中。
:file : $(“:file”);
將所有文件域作爲Dom對象放進jQuery包裝集並返回。:hidden : $(“input:hidden”);
將所有不可見的input元素作爲Dom對象放進jQuery包裝集並返回。
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector8.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//獲取所有的input元素( input, textarea, select 和 button 元素)
function doSelector1(){
var inputs = $(":input"); //注意與 $("input")的區別
inputs.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的文本框( textarea是文本域,不是文本框,不會被選中)
function doSelector2(){
var texts = $(":text");
texts.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的密碼框
function doSelector3(){
var passwords = $(":password");
passwords.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的單選按鈕
function doSelector4(){
var radios = $(":radio");
radios.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的複選按鈕
function doSelector5(){
var checkboxs = $(":checkbox");
checkboxs.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的提交按鈕(type="submit")
//注意:<button name="test7" id="test7">test7</button> 默認type=submit,所以會被選中
//如果<button name="test7" id="test7">test7</button>增加屬性 type="button" ,則不會被選中
function doSelector6(){
var submits = $(":submit");
submits.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的圖像域
function doSelector7(){
var images = $(":image");
images.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的重置按鈕
function doSelector8(){
var resets = $(":reset");
resets.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有的按鈕(submit 和 reset 都不會被選中)
//<button name="test7" id="test7" >test7</button> 感覺是個bug :submit和:button都可以選中,
//即使增加屬性type="submit" <button name="test7" id="test7" >test7</button>還是會被選中
//而其他的input如果屬性爲type="submit"或者type="reset" 則不會被選中。
function doSelector9(){
var buttons = $(":button");
buttons.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有文件域
function doSelector10(){
var files = $(":file");
files.each(function(){
alert($(this).val()+$(this).html());
});
}
//獲取所有不可見的input,或者type=hidden的input
function doSelector11(){
var hiddens = $("input:hidden");
hiddens.each(function(){
alert($(this).val()+$(this).html());
});
}
</script>
</head>
<body>
<div>
<form action="">
<input type="text" id="test1" value="test1" >
<input type="text" id="test2" value="test2" >
<input type="password" id="test3" value="test3" >test3<br>
<select id="test4">test4</select>test4
<select id="test5" >test5</select>test5<br>
<textarea id="test6" rows="5" cols="5">test6</textarea><br>
<button name="test7" id="test7" type=button >test7</button><br>
<input type="radio" id="test8" name="test8" value="test8">test8<br>
<input type="checkbox" id="test9" name="test9" value="test9">test9
<input type="checkbox" id="test9" name="test9" value="test10">test10<br>
<input type="submit" id="test11" name="test11" value="test11"><br>
<input type="image" id="test12" name="test12" value="test12"><br>
<input type="reset" id="test13" name="test13" value="test13"><br>
<input type="file" id="test14" name="test14" value="test14"><br>
<input type="hidden" id="test15" name="test15" value="test15" >
</form>
</div>
<input type="button" value=":input" onclick="doSelector1()">
<input type="button" value=":text" onclick="doSelector2()">
<input type="button" value=":password" onclick="doSelector3()">
<input type="button" value=":radio" onclick="doSelector4()">
<input type="button" value=":checkbox" onclick="doSelector5()">
<input type="button" value=":submit" onclick="doSelector6()">
<input type="button" value=":image" onclick="doSelector7()">
<input type="button" value=":reset" onclick="doSelector8()">
<input type="button" value=":button" onclick="doSelector9()">
<input type="button" value=":file" onclick="doSelector10()">
<input type="button" value=":hidden" onclick="doSelector11()">
</body>
九、表單對象屬性過濾選擇器
:enabled : $(“input:enabled”);
將所有有效的input元素作爲Dom對象放進jQuery包裝集並返回:disabled : $(“input:disabled”);
將所有無效的input元素作爲Dom對象放進jQuery包裝集並返回:checked : $(“input:checked”);
將所有被選中的單選框,複選框作爲Dom對象放進jQuery包裝集並返回(不包括select中的option):selected : $(“select option:selected”);
將所有被選中的option作爲Dom對象放進jQuery包裝集並返回。
<head>
<base href="<%=basePath%>">
<title>My JSP 'ad_selector9.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//獲取有效的input表單元素
function doSelector1(){
var enableds = $("input:enabled");
enableds.each(function(){
alert($(this).val());
});
}
//獲取無效的input表單元素
function doSelector2(){
var enableds = $("input:disabled");
enableds.each(function(){
alert($(this).val());
});
}
//匹配所有選中的被選中元素(複選框、單選框等,不包括select中的option)
function doSelector3(){
var checkeds = $("input:checked");
checkeds.each(function(){
alert($(this).val());
});
}
//獲取所有被選中的option
function doSelector4(){
var options = $("select option:selected");
options.each(function(){
alert($(this).val());
});
}
</script>
</head>
<body>
<div>
<input type="text" name="test1" value="test1" disabled="disabled">
<input type="text" name="test2" value="test2" >
</div>
<div>
<input type="checkbox" name="test3" value="test3" checked="checked">test3
<input type="checkbox" name="test3" value="test4" >test4
<input type="checkbox" name="test3" value="test5" checked="checked">test5
</div>
<div>
<select>
<option value="test6" selected="selected">test6</option>
<option value="test7">test7</option>
<option value="test8" >test8</option>
</select>
</div>
<input type="button" value=":enabled" onclick="doSelector1()">
<input type="button" value=":disabled" onclick="doSelector2()">
<input type="button" value=":checked" onclick="doSelector3()">
<input type="button" value=":selected" onclick="doSelector4()">
</body>