jQuery复合选择器的⼏个例⼦
<!-- 本⽂例⼦所引⽤的jQuery版本为 jQuery-1.8.3.min.js Author：博客园⼩dee -->
⼀. 复合选择器对checkbox的相关操作
1  <input type="checkbox" id="ckb_1"/>
2  <input type="checkbox" id="ckb_2" disabled="true"/>
3  <input type="checkbox" id="ckb_3"/>
4  <input type="checkbox" id="ckb_4"/>
5  <input type="button" id="btn" value="点击">
例.需要把类型为checkbox，同时"可⽤"的元素设置成"已选择"
⽅法①使⽤属性过滤选择器 [type='checkbox'] 和 [disabled!=disabled]
$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);
在这个复合选择器中，使⽤属性过滤选择器时"可⽤"元素的选择应使⽤ disabled!=disabled，⽽设置属性时可以使⽤ attr("checked",true)或attr("checked","checked")。
因此建议的写法：
$("input[type='checkbox'][disabled!=disabled]").prop("checked",true);  //建议写法
⽅法②使⽤表单选择器 :checkbox 和属性过滤选择器 [disabled!=disabled]
jquery ajax例子$('input:checkbox[disabled!=disabled]').prop("checked",true);
⽅法③使⽤表单选择器 :checkbox 和表单对象属性过滤选择器 :enabled
$(':checkbox:enabled').prop("checked",true);
⽅法④使⽤.each()遍历
1  $("input[type=checkbox]").each(function(){
2
3if ($(this).attr("disabled") != "disabled") {
4
5            $(this).prop("checked",true);
6        }
7
8  });
在判断属性时attr()⽅法应该判断是"disabled"还是"enable"，⽽不是false或true。
建议的写法：
1  $("input[type=checkbox]").each(function(){
2
3if ($(this).prop("disabled") == false) {
4
5              $(this).prop("checked",true);
6          }
7
8  });
⼆. 复合选择器的其他例⼦
1<ul>
2<li >第⼀⾏</li>
3<li class="showli">第⼆⾏</li>
4<li class="showli">第三⾏</li>
5<li>第四⾏</li>
6<li >第五⾏</li>
7<li class="showli">第六⾏</li>
8<li>第七⾏</li>
9</ul>
例. 把第⼀个class为showli的li元素背景设为红⾊
$("ul li[class=showli]:eq(0)").css("background":"red");
结果是'<li class="showli">第⼆⾏</li>'的背景变成了红⾊。使⽤了属性过滤选择器 [class=showli] 和基本过滤选择器 eq(0)
例. 把第五个可见的li的背景设为红⾊
$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});
结果是'<li class="showli">第六⾏</li>'的背景变成了红⾊，display:block是为了检测隐藏的li是否会被:visible过滤，display:none下是看不到红⾊背景的。使⽤了可见性过滤选择器 :visible
例.（⽐较绕的）把第⼆个class为showli的li后⾯可见的第⼆个li的背景设成红⾊
$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});
结果是'<li class="showli">第六⾏</li>'的背景变成了红⾊。
作者：
出处：
说明：作者写博⽬的是记录开发过程，积累经验，便于以后⼯作参考。
如需转载，请在⽂章页⾯保留此说明并且给出原⽂链接。谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。