Examples of jQuery compound selector: jquery Selector

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>