Examples of jQuery compound selector: jquery Selector
<! -- The jQuery version referenced in this example is jQuery-1.8.3.min.js -->
I. operations related to checkbox Using Compound Selector
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 = "click">
For example, you need to set the type to checkbox and the "available" element to "selected"
Method ① use the attribute filter selector [type = 'checkbox'] and [disabled! = Disabled]
$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);
In this compound selector, the "available" element should be disabled when the attribute filter selector is used! = Disabled. You can use attr ("checked", true) or attr ("checked", "checked") to set attributes ").
Note: After Jquery1.6, we recommend that you use the prop () method instead of the attr () method when setting the disabled and checked attributes.
Recommended statement:
$ ("Input [type = 'checkbox'] [disabled! = Disabled] "). prop (" checked ", true); // recommended syntax
Method ② use form selector: checkbox and attribute filter selector [disabled! = Disabled]
$('input:checkbox[disabled!=disabled]').prop("checked",true);
Method ③ use form selector: checkbox and form object attribute filter selector: enabled
$(':checkbox:enabled').prop("checked",true);
Method ④ use. each () for Traversal
1 $("input[type=checkbox]").each(function(){2 3 if ($(this).attr("disabled") != "disabled") {4 5 $(this).prop("checked",true);6 }7 8 });
When determining an attribute, the attr () method should determine whether it is "disabled" or "enable", rather than "false" or "true.
Recommended statement:
1 $("input[type=checkbox]").each(function(){2 3 if ($(this).prop("disabled") == false) {4 5 $(this).prop("checked",true);6 }7 8 });
2. Other examples of compound Selector
1 <ul> 2 <li> first line </li> 3 <li class = "showli"> second line </li> 4 <li class = "showli"> third row </li> 5 <li> row 4 </li> 6 <li style = "display: none "> fifth line </li> 7 <li class =" showli "> Row 6 </li> 8 <li> Row 7 </li> 9 </ul>
For example, set the background of the li element whose first class is showli to red.
$("ul li[class=showli]:eq(0)").css("background":"red");
The result is that the background of '<li class = "showli"> Row 2 </li>' is red. The attribute filter selector [class = showli] and the basic filter selector eq (0) are used)
For example, set the fifth visible li background to red.
$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});
The result is that the background of '<li class = "showli"> Row 6 </li>' is changed to Red. The display: block is used to check whether the hidden li is filtered by: visible, display: The red background is invisible under none. Visibility filter selector: visible
For example, the background of the second li visible after the second class is showli is set to red.
$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});
The result is that the background of '<li class = "showli"> Row 6 </li>' is red.
What selector does Jquery have?
JQuery element Selector
JQuery uses the CSS selector to select HTML elements.
$ ("P") Select the <p> element.
$ ("P. intro") select all <p> elements of class = "intro.
$ ("P # demo") Select the first <p> element of id = "demo.
JQuery attribute Selector
JQuery uses an XPath expression to select an element with a given attribute.
$ ("[Href]") selects all elements with the href attribute.
$ ("[Href = '#']") select all elements with an href value equal.
$ ("[Href! = '#'] ") Select all elements with an href value not equal.
$ ("Your href00000000'.jpg ']") select all elements whose href values end with ". jpg.
JQuery CSS Selector
The jQuery CSS selector can be used to change the CSS attributes of HTML elements.
$ ("P" ).css ("background-color", "red ");
The first element compound selector after a jquery id
<! DOCTYPE html>