> 웹 프론트엔드 > JS 튜토리얼 > jquery에서 일반적으로 사용되는 필터링 방법

jquery에서 일반적으로 사용되는 필터링 방법

无忌哥哥
풀어 주다: 2018-06-29 11:42:06
원래의
1536명이 탐색했습니다.

필터링 방법, 즉 함수는 앞서 소개한 필터 함수와 대부분 일치합니다.

1: get()은 jquery 객체를 DOM 객체로 변환합니다: 두 번째 텍스트를 변환합니다. 전경색 red

$('li').get(1).style.color = 'red'
로그인 후 복사

2.eq()로 설정됩니다. 지정된 일련 번호가 있는 요소를 가져옵니다. 반환된 개체는 jQuery 개체

$('li').eq(4).css('color','red')
로그인 후 복사

3.first( ): 지정된 일련 번호가 있는 요소를 반환합니다. 요소, 매개변수가 필요하지 않습니다

$('li').first().css('color','red')
로그인 후 복사

4.first(): 매개변수가 필요하지 않은 마지막 요소를 반환합니다

$('li').last().css('color','red')
로그인 후 복사

5. toArray(), DOM 배열 반환, 참고 jquery 객체가 아님

var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = &#39;green&#39;
}
로그인 후 복사

6.find(): 자식과 손자를 포함한 모든 하위 요소를 반환합니다...

$(&#39;ul&#39;).find(&#39;li&#39;).css(&#39;color&#39;,&#39;coral&#39;)
$(&#39;ul&#39;).find(&#39;a&#39;).css(&#39;color&#39;,&#39;cyan&#39;)
로그인 후 복사

7.children()은 모든 직계 하위 요소

$(&#39;ul&#39;).children().css(&#39;color&#39;,&#39;deeppink&#39;)
$(&#39;ul&#39;).children(&#39;p&#39;).css(&#39;color&#39;,&#39;deeppink&#39;)
로그인 후 복사

8을 반환합니다. 각 요소

$(&#39;li&#39;).each(function(){
$(this).css(&#39;background-color&#39;,&#39;wheat&#39;)
$(this).css(&#39;color&#39;,&#39;black&#39;)
$(this).css(&#39;font-size&#39;,&#39;1.3em&#39;)
})
로그인 후 복사

9에 대해 콜백 함수를 실행합니다. /next() next sibling Element

$(&#39;li&#39;).eq(2).next().css(&#39;color&#39;,&#39;blue&#39;)
로그인 후 복사

//nextAll()

$(&#39;li&#39;).eq(2).nextAll().css(&#39;color&#39;,&#39;blue&#39;)
로그인 후 복사

//siblings(): 선택한 요소의 모든 형제 요소를 제외하고 반환합니다. 자체# 🎜🎜#

$(&#39;li&#39;).eq(2).siblings().css(&#39;color&#39;,&#39;blue&#39;)
로그인 후 복사

앞으로 트래버스

//prev(): 이전 형제 요소

$(&#39;li&#39;).removeAttr(&#39;style&#39;)
$(&#39;li&#39;).eq(6).prev().css(&#39;color&#39;,&#39;coral&#39;)
로그인 후 복사

//prevAll(): 짐작하셨을 텐데요, 예, 이전 형제 요소 모두입니다

$(&#39;li&#39;).eq(6).prevAll().css(&#39;color&#39;,&#39;coral&#39;)
로그인 후 복사

10. 추가(선택기), 선택한 컬렉션에 요소 추가
#🎜🎜 # //먼저 모든 요소에서 사용자 정의 스타일을 제거하고 해당 요소를 해당 프로토타입으로 되돌린 다음 평범하게 보입니다.

$(&#39;*&#39;).removeAttr(&#39;style&#39;)
로그인 후 복사
로그인 후 복사

//모든 li 텍스트를 빨간색으로 설정하면 p가 선택되지 않은 것을 알 수 있습니다. 이건 정상입니다

$(&#39;li&#39;).css(&#39;color&#39;,&#39;red&#39;)
로그인 후 복사

//어떻게 p 요소를 선택할 수 있나요? 선택 영역을 늘리고 p 요소를 이 선택 항목에 넣을 수만 있습니다.

//할 수 있습니다. add() 메서드를 사용하여 이 작업을 수행하세요

$(&#39;li&#39;).add(&#39;p&#39;).css(&#39;color&#39;,&#39;red&#39;)
로그인 후 복사

11. filter()는 결과에서 정규화된 요소를 반환합니다

//6번째 요소만 반환합니다# 🎜🎜#

$(&#39;li&#39;).filter(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
로그인 후 복사
#🎜 🎜#12.not()은 filter()의 반대 기능을 가지고 있어 조건을 충족하는 요소를 제거합니다

$(&#39;li&#39;).not(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
로그인 후 복사

13.slice(start, end)는 지정된 범위의 요소를 반환합니다# 🎜🎜#

$(&#39;*&#39;).removeAttr(&#39;style&#39;)
로그인 후 복사
로그인 후 복사

//시작 위치 포함, 끝 위치 제외, 반환되는 결과 수는 5-2=3

$(&#39;li&#39;).slice(2,5).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
로그인 후 복사

//처음 4개 요소 가져오기

$(&#39;li&#39;).slice(0,4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
로그인 후 복사
# 🎜🎜# //두 번째 매개변수는 생략, 기본값은 현재 시작부터 끝까지

$(&#39;li&#39;).slice(4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)
로그인 후 복사

위 내용은 jquery에서 일반적으로 사용되는 필터링 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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