jQuery学习<五> — — 选择器（下）
来源：互联网 发布：htc手机数据连接不上 编辑：程序博客网 时间：2024/06/08 00:12
七、子元素过滤选择器
: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> 0 0
- jQuery学习<五> — — 选择器（下）
- Jquery学习五-1---jQuery常用选择器
- jQuery学习笔记—选择器
- jQuery的选择器（五）
- Jquery学习总结（5）——jQuery选择器
- jQuery学习——入门jQuery选择器之层次选择器
- jquery学习笔记—jQuery选择器
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
- JQuery学习笔记5：选择器之五
- jQuery学习笔记五：选择器集合
- jquery（五）大话jquery选择器
- jQuery学习<三> — — 选择器（上）
- jQuery学习<四> — — 选择器（中）
- JQuery学习笔记（二）——选择器
- JQuery学习笔记（三）——选择器2
- javascript学习（十七）— jQuery选择器（一）
- javascript学习（十八）— jQuery选择器（二）
- jQuery学习笔记——各类选择器
- Android调试命令小结
- 【HDU 5720】Wool（排序+排序/扫描线。。。）
- 错误票据
- 杭电ACM 1048
- CC2540/CC2541/CC254x之可变参数串口打印配置
- jQuery学习<五> — — 选择器（下）
- HDU - 4730 We Love MOE Girls
- 关于eclipsetomcat部署项目路径修改
- 371. Sum of Two Integers
- 关于分块算法and莫队算法
- java中特殊的流程控制语句（break,continue,return）
- 开发者MAC电脑里的十八般兵器
- Android通知栏
- CodeForces 609C Load Balancing
