jquery hierarchical selector

//1. Descendants: Space

  $('li a').addClass('green')

//2. All child elements>

//Only the foreground color of ul's child element li turns red, and the grandson element< a>The text will not change

$('ul > *').addClass('red')

//If separated by spaces, the foreground color of

will all change

$('ul  *').css('color','red')

//3. Adjacent sibling elements

Change the next brother of the 5th li: the foreground color of the 6th li to green

$('li:nth-child(5) + li').addClass('green')

//4. All sibling elements~

$('li:nth-child(5) ~ li').addClass('green')

//5 .The first and last element

  $('li:first-child').addClass('green')
  $('li:first').addClass('green')
  $('li:last-child').css('color','red')
  $('li:last').css('color','red')

//6. Directly select an element

  $('li:nth-child(6)').addClass('red')
  //jquery使用eq(i),i从0开始,注意与css中的不一样
  $('li:eq(5)').addClass('red')

//7Select an element greater than or less than a certain serial number

/ /First remove the class on all elements

  $('*').removeClass()

//Only remove li, excluding the a under li, the link is still green

  $('li').removeClass()

//Select all elements with serial numbers greater than 4, please note Calculate from 0

$('li:gt(3)').addClass('red')

//Select all elements with serial numbers less than 8

$('li:lt(7)').addClass('red')

//Select elements based on serial number characteristics

//Select all elements with even serial numbers even

//Because it starts from 0, 0, 2,, 4, so it looks like you have chosen an odd number, please pay attention

$('li:even').addClass('red')

//You may have guessed, choose an odd number to use It's odd, of course, you are right

  $('li:odd').addClass('red')

The above is the detailed content of jquery hierarchical selector. For more information, please follow other related articles on the PHP Chinese website!