>웹 프론트엔드 >JS 튜토리얼 >jquery 계층적 선택기

jquery 계층적 선택기

无忌哥哥
无忌哥哥원래의
2018-06-29 11:11:211835검색

//1. 하위 요소: space

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

//2. 모든 하위 요소>

//ul의 하위 요소 li의 전경색만 빨간색으로 바뀌고, 손자 요소 3499910bf9dac5ae3c52d5ede7383485의 텍스트는 변경되지 않습니다.

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

/ /공백으로 구분하면 25edfb22a4f469ecb59f1190150159c63499910bf9dac5ae3c52d5ede7383485의 전경색이 모두 변경됩니다

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

//3. 인접한 형제 요소 +

는 5번째 li의 다음 형제가 됩니다: 6번째 이전 li 풍경이 녹색으로 변경됩니다

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

//4. 모든 형제 요소~

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

//5. 첫 번째 요소와 마지막 요소

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

//6. 요소를 직접 선택합니다.

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

//7 이상 또는 특정 일련 번호보다 작은 요소

//모든 요소의 클래스를 먼저 제거

  $('*').removeClass()

//li만 제거하고 li 아래의 a를 제외하면 링크는 여전히 녹색입니다

  $('li').removeClass()

//일련 번호가 더 큰 모든 요소 선택 4보다, 계산은 0

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

부터 시작됩니다. //일련번호가 8

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

보다 작은 요소를 모두 선택합니다. //일련번호 특성에 따라 요소를 선택합니다.

//일련번호가 짝수인 요소를 모두 선택합니다

/ /0, 0,2,,4부터 시작하기 때문에 홀수를 선택한 것 같으니 주의해주세요

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

//홀수를 선택하면 홀수라고 짐작하셨을 겁니다. 그렇지

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

위 내용은 jquery 계층적 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:jquery 기본 선택기다음 기사:jquery 기본 선택기