> 웹 프론트엔드 > JS 튜토리얼 > jQuery의 Each(), find(), filter() 등 노드 연산 방법에 대한 자세한 설명(권장)

jQuery의 Each(), find(), filter() 등 노드 연산 방법에 대한 자세한 설명(권장)

高洛峰
풀어 주다: 2016-12-29 10:59:48
원래의
1830명이 탐색했습니다.

1.each(callback)

공식설명:

반환값: jQuery

개요

각 일치하는 요소를 컨텍스트로 사용하여 함수를 실행합니다.

은 전달된 함수가 실행될 때마다 함수의 this 키워드가 다른 DOM 요소(매번 다른 일치 요소)를 가리킨다는 의미입니다. 또한 함수가 실행될 때마다 일치하는 요소 집합에서 실행 환경인 요소의 위치를 ​​나타내는 숫자 값이 함수에 매개변수(0부터 시작하는 정수)로 전달됩니다. 'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다). 다음 루프로 점프하려면 'true'를 반환합니다(일반 루프에서 'continue'를 사용하는 것과 같습니다).

매개변수

콜백

일치하는 각 요소에 대해 실행되는 함수


설명:

두 개의 이미지를 반복하고 해당 이미지의 src 속성을 설정합니다. 참고: 여기서는 jQuery 객체가 아닌 DOM 객체를 나타냅니다.

HTML 코드:

jQuery 코드:

$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
로그인 후 복사

결과:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
로그인 후 복사

2.find(expr|obj|ele)

공식 설명:

반환값: jQuery

개요

지정된 표현식과 일치하는 모든 요소를 ​​검색합니다. 이 함수는 처리 중인 요소의 하위 요소를 찾는 좋은 방법입니다.

모든 검색은 jQuery 표현식을 사용합니다. 이 표현식은 CSS1-3 선택기 구문을 사용하여 작성할 수 있습니다.

매개변수

expr String
찾기 표현식
jQuery 객체 객체
매칭 요소에 대한 jQuery 객체
요소 DOMElement
DOM 요소


설명:

모든 단락에서 시작하여 아래의 범위 요소를 추가로 검색하세요. $("p 스팬")과 동일합니다.

HTML 코드:

안녕하세요, 잘 지내세요?

jQuery 코드:

$("p").find("span")
로그인 후 복사

결과:

[ Hello 🎜>
3.filter(expr|obj|ele|fn)


공식 설명:


개요

필터링 및 표현식 지정 수식과 일치하는 요소 집합입니다.


이 방법은 일치 범위를 좁힐 때 사용됩니다. 여러 표현식을 쉼표로 구분하세요.


매개변수


expr String

현재 요소 집합과 일치하는 선택기 표현식이 포함된 문자열 값입니다.

jQuery 객체 객체
현재 요소와 일치하는 기존 jQuery 객체입니다.
요소 표현식
요소를 일치시키는 데 사용되는 DOM 요소입니다.
function(index) Function
함수는 테스트 요소의 집합으로 사용됩니다. jQuery 컬렉션에 있는 요소의 인덱스인 매개변수 인덱스를 허용합니다. 함수에서 이는 현재 DOM 요소를 나타냅니다.



매개변수 선택기 설명:


선택 클래스가 있는 요소 유지


HTML 코드:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
로그인 후 복사

jQuery 코드:

$("p").filter(".selected")
로그인 후 복사

결과:


[

And Again

]

위는 편집기에서 도입한 jQuery의 Each() 및 find()입니다. ) 및 기타 노드 운영 방법과 관련된 자세한(권장) 지식이 있어 모든 분들께 도움이 되기를 바랍니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!


jQuery의 Each(), find(), filter() 등의 노드 연산 방법에 대한 자세한 설명(권장)을 보려면(권장) PHP 중국어 웹사이트!

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