Examples of jQuery compound selector application _ jquery

This article mainly introduces several examples of jQuery compound selector application, the jQuery version referenced in this example is jQuery-1.8.3.min.js, like a friend can learn

I. operations related to checkbox Using Compound Selector

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);

Note that the "available" element should be disabled in this compound selector! = Disabled, and attr ("checked", true) should be used to set properties ). The usage of the disabled attribute is similar to that of 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 () for Traversal

$("input[type=checkbox]").each(function(){if ($(this).attr("disabled") != "disabled") {$(this).attr("checked",true);}});

The compound selector is not used. It should be noted that, like in method ①, the attribute should be determined to be "disabled" or "enable", rather than "false" or "true. When setting properties, you can either use "disabled" or "enable", or use false or true.

2. Other examples of compound Selector

 
 

  
  
First line
  
  
Row 2
  
  
Row 3
  
  
Row 4
  
  
Fifth line
  
  
Row 6
  
  
Row 7
 
 

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'

Row 2

'. The background 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'

Row 6

', The background turns red. The display: block is used to check whether the hidden li will be filtered by: visible. The red background is invisible under display: 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'

Row 6

'. The background is red.