> 웹 프론트엔드 > JS 튜토리얼 > jquery의 필터 선택기는 무엇입니까? 일반적으로 사용되는 필터 선택기는 무엇입니까?

jquery의 필터 선택기는 무엇입니까? 일반적으로 사용되는 필터 선택기는 무엇입니까?

青灯夜游
풀어 주다: 2018-10-20 11:41:23
원래의
6430명이 탐색했습니다.

jquery의 필터 선택기는 어떤 역할을 하나요? 일반적으로 사용되는 필터 선택기는 무엇입니까? 이 글에서는 jquery의 필터 선택기에 대해 소개하여 일반적으로 사용되는 jquery 필터 선택기가 무엇인지 이해할 수 있도록 하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선, jquery 필터 선택기 선택기에 대한 관련 지식을 이해합시다. :

jquery 선택기는 HTML 요소 그룹 또는 단일 요소에서 작동할 수 있습니다. . 작동하다. 그러나 필터 선택기는 가장 널리 사용되는 유형의 jquery 선택기이며, 특정 유형의 필터링 규칙에 따라 요소를 일치시키고 작성 시 다음으로 시작합니다.

jquery 필터 선택기는 다음 범주로 나눌 수 있습니다.

  1. jquery 기본 필터 선택기(강조)

  2. jquery 콘텐츠 필터 선택기

  3. jquery 가시성 필터 선택기

    # 🎜🎜##🎜 🎜#
  4. jquery 속성 필터 선택기
  5. jquery 상태 필터 선택기
  6. # 🎜🎜#jquery 하위 요소 필터 선택기

  7. 위의 카테고리를 사용하여 일반적인 jquery 필터 선택기와 jquery 필터 선택기를 사용하는 방법에 대해 이야기해 보겠습니다.

jquery 기본 필터 선택기(키)

①first() 또는: 먼저 첫 번째 요소를 선택합니다.

//选择第一个div元素
$('div:first')  
$('div').first()
로그인 후 복사

②last() 또는: last는 마지막 요소를 선택합니다

//选择最后一个div元素
$('div:last')   
$('div').last()
로그인 후 복사

3: not(selector)는 주어진 선택기를 제외한 다른 요소를 선택합니다

 $('div:not(.one)')  //选择class不为one的 所有div元素
로그인 후 복사
# 🎜🎜# ④: 짝수인 요소를 선택하고, 인덱스는 0부터 시작합니다.

 $('div:even')   //选择 索引值为偶数 的div元素
로그인 후 복사

⑤: 홀수는 홀수인 요소를 선택하고, 인덱스는 0부터 시작합니다.

$('div:odd')  //选择 索引值为奇数 的div元素
로그인 후 복사

⑥: eq(index) 0부터 시작하여 지정된 인덱스를 가진 요소를 선택

$('div:eq(3)')  //选择 索引等于 3 的div元素
로그인 후 복사

⑦: gt(index) 0부터 시작하여 지정된 인덱스보다 큰 요소를 선택

$('div:gt(3)')  //选择 索引大于 3 的div元素
로그인 후 복사
#🎜🎜 #8: lt(index)는 0부터 시작하여 지정된 인덱스보다 작은 요소를 선택합니다.

$('div:lt(3)')  //选择 索引小于 3 的div元素
로그인 후 복사

9: 헤더는 헤더 유형 요소를 선택합니다.

$(':header')  //选择 所有的标题元素.比如h1, h2, h3等等...
로그인 후 복사

⑩: 애니메이션은 다음과 같은 요소를 선택합니다. 애니메이션 효과 수행

$(':animated')   //选择 当前正在执行动画的所有元素
로그인 후 복사

⑪:focus 현재 초점이 맞춰진 요소 선택

$(':focus')  //选择 当前选取焦点的所有元素
로그인 후 복사

jquery 콘텐츠 필터 선택기

# 🎜 🎜#

①: 포함(텍스트) 지정된 텍스트를 포함하는 요소 선택

$("div:contains('Runob')")    // 选取包含 Runob文本的元素
로그인 후 복사
②: 비어 있음 하위 요소 또는 텍스트를 포함하지 않는 빈 요소 선택
$("td:empty")       //选取不包含子元素或者文本的tb空元素
로그인 후 복사
#🎜 🎜#3 :has(selector) 선택기와 일치하는 요소가 포함된 요소 선택
$("div:has('.mini')")  //选取含有class为mini元素 的div元素
로그인 후 복사

4:부모 하위 요소 또는 텍스트가 포함된 빈 요소 선택

$("div:parent")                //选取含有子元素或者文本的div元素
로그인 후 복사

jquery 가시성 필터 선택기# 🎜🎜 #

①:hidden은 보이지 않는 요소 선택

$("li:hidden")       //选取所有不可见元素,或type为hidden的元素,例:<input type="hidden"/>
로그인 후 복사

②:visible은 보이는 요소 선택

$("li:visible")      //选取所有可见 li 元素
로그인 후 복사

jquery 속성 필터 선택기

# 🎜🎜#①[attribute ] 이 속성을 가진 요소 선택

$(&#39;div[title]&#39;)  //选取含有 属性title 的div元素
로그인 후 복사

②[attribute=value] 속성 값 값을 가진 요소 선택

$(&#39;div[title=test]&#39;)  //选取 属性title值等于 test 的div元素
로그인 후 복사

3[attribute!=value ] 속성 값이 아닌 요소 선택 value와 같음

$(&#39;div[title!=test]&#39;)  //选取 属性title值不等于 test 的div元素
로그인 후 복사

4[attribute^=value] 속성 값이 value로 시작하는 요소 선택

 $(&#39;div[title^=te]&#39;)  //选取 属性title值 以 te 开始 的div元素
로그인 후 복사

⑤[attribute$=value] 속성 값이 value로 끝나는 요소 선택 value

$("div[title$=est]")  //选取 属性title值 以 est 结束 的div元素
로그인 후 복사

⑥[attribute*=value] 속성 값에 value

$("div[title*=es]")  //选取 属性title值 含有 es  的div元素
로그인 후 복사

7[attribute|=value] 속성 값이 값과 같거나 접두사가 붙은 요소를 선택하는 요소 선택 값(예: "value-xxx")

$(&#39;div[title|="en"]&#39;)  //选取 属性title等于en或以en为前缀(该字符串后跟一个连字符&#39;-&#39;)的元素
로그인 후 복사

8[attribute~=value] 속성 값이 공백으로 구분되고 지정된 값을 포함하는 요소를 선택합니다

$(&#39;div[title~="uk"]&#39;)//选取 属性title用空格分隔的值中包含字符uk的元素
로그인 후 복사

9[속성1][속성2]…[속성N] 결합 속성 선택기

$("div[id][title*=es]")  //组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素
로그인 후 복사

jquery 상태 필터 선택기

#🎜🎜 #1:활성화 사용 가능한 요소 선택

$("input:enabled")    // 选取可用的 input
로그인 후 복사

②:[속성=값] 사용할 수 없는 요소 선택

$("input:disabled")   // 选取不可用的 input
로그인 후 복사

3:선택됨 선택한 요소 선택

$("input:checked")    // 选取选中的 input
로그인 후 복사
④: 선택됨 선택한 요소 선택
$("option:selected")  // 选取选中的 option
로그인 후 복사

jquery 하위 요소 필터 선택기

# 🎜🎜#

1: 첫 번째- child는 각 상위 요소 아래의 첫 번째 하위 요소를 선택하고 컬렉션 요소

//选取每个父元素下的第一个子元素
$(&#39;div.one :first-child&#39;)
로그인 후 복사

②를 반환합니다. last-child는 각 상위 요소 아래의 마지막 하위 요소를 선택합니다. 하위 요소는 컬렉션 요소

를 반환합니다.

//选取每个父元素下的最后一个子元素
$(&#39;div.one :last-child&#39;)
로그인 후 복사

3: only-child 각 상위 요소 아래의 유일한 하위 요소를 선택하고 컬렉션 요소를 반환합니다.

//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$(&#39;div.one :only-child&#39;)
로그인 후 복사
4: nth-child( index)는 인덱스 번째 하위 요소 또는 홀수를 선택합니다. -각 상위 요소 아래의 요소입니다. 인덱스는 1부터 시작합니다. 원하는 효과를 얻으려면 이러한 필터 선택기를 사용하세요. 더 많은 관련 튜토리얼을 보려면 jQuery video tutorial, JavaScript video tutorial

,

bootstrap video tutorial#🎜을 방문하세요. 🎜 #!

위 내용은 jquery의 필터 선택기는 무엇입니까? 일반적으로 사용되는 필터 선택기는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿