Several examples of jQuery compound selector applications_jquery

1. Compound selector related operations on checkbox

<input type="checkbox" id="ckb_1" /> 
<input type="checkbox" id="ckb_2" disabled="true" /> 
<input type="checkbox" id="ckb_3" /> 
<input type="checkbox" id="ckb_4" /> 
<input type="button" id="btn" value="点击">

Example: You need to set the element of type checkbox and "available" to "selected"

Method ① Use attribute filter selector [type='checkbox'] and [disabled!=disabled]

$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);

Note that in this compound selector, disabled!=disabled should be used to select "available" elements, and attr("checked",true) should be used when setting attributes. The disabled attribute is used similarly to the checked attribute.

Method ②Use form selector :checkbox and attribute filter selector [disabled!=disabled]

$('input:checkbox[disabled!=disabled]').attr("checked",true);

Method ③ Use form selector :checkbox and form object attribute filter selector :enabled

$(':checkbox:enabled').attr("checked",true);

Method ④ Use .each() to traverse

$("input[type=checkbox]").each(function(){

if ($(this).attr("disabled") != "disabled") {

$(this).attr("checked",true);
}
});

No compound selector is used. What needs to be noted is the same as in method ①. When judging the attribute, you should judge whether it is "disabled" or "enable", not false or true. When setting properties, you can use "disabled" or "enable", or you can use false or true.

2. Other examples of compound selectors

<ul>
<li >第一行</li>
<li class="showli">第二行</li>
<li class="showli">第三行</li>
<li>第四行</li>
<li style="display:none">第五行</li>
<li class="showli">第六行</li>
<li>第七行</li>
</ul>

Example. Set the background of the first li element with class showli to red

$("ul li[class=showli]:eq(0)").css("background":"red");

The result is that the background of '

the second line

' turns red. The attribute filter selector [class=showli] and the basic filter selector eq(0)

are used

Example. Set the background of the fifth visible li to red

$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});

The result is that the background of '

The sixth line

' turns red. display:block is to detect whether the hidden li will be filtered by:visible, display: The red background cannot be seen under none. Visibility filter selector used :visible

Example. (It’s rather convoluted) Set the background of the second li visible behind the second li with class showli to red

$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});

The result is that the background of '

the sixth line

' turns red.