jquery에서 노드를 탐색하는 방법에는 어떤 것이 있나요?

jquery가 노드를 탐색하는 데 사용할 수 있는 메서드는 다음과 같습니다. 1. 모든 직접 하위 요소를 반환할 수 있는 children() 2. 선택한 요소의 다음 형제 요소를 반환할 수 있는 next() , 선택한 요소를 반환할 수 있습니다. 4. prev() 5. siblings() 등.

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

JQuery 노드 순회 방법 요약

1. children() 방법: $('p').children()---순회하여 p 요소의 모든 하위 요소 노드를 찾습니다.

<p>Hello</p>
<div>
  <span>Hello Again</span>
  <p class="box">您好!</p>
</div>
<p>And Again</p>
<script type="text/javascript">
  $(&#39;div&#39;).children();   //<span>Hello Again</span><p class="box">您好!</p>
  $(&#39;div&#39;).children(&#39;.box&#39;)  //<p class="box">您好!</p>
</script>

2. ( )메서드: $('p').next() --- p 요소 뒤에서 인접한 형제 요소를 찾지만 모든 형제 요소는 아님

　　[관련 메서드]

　 (1) nextAll() 메서드: $ ('p ').nextAll() ---- p 뒤의 모든 형제 요소 찾기

　 ​​(2) nextUntil() 메소드: $('p').nextUntil('p') ---- p 찾기 그 후, 모든 p 요소까지의 형제 요소

<p>Hello</p>
<p class="box">Hello Again</p>
<div>
  <span>And Again</span>
</div>
<script type="text/javascript">
  $(&#39;p&#39;).next();   //<p>Hello Again</p><div><span>And Again</span></div>
  $(&#39;p&#39;).next(&#39;.box&#39;);  //<p class="box">Hello Again</p>
</script>

3. prev() 메소드: $('p').prev() ---- p

　[관련 메소드는 ]

　 (1) prevAll() 메소드: $('p').prevAll() ---- p

　 이전의 모든 형제 요소를 찾습니다. (2) prevUntil() 메소드: $('p') prevUntil('p') -- - p 이전의 모든 요소를 ​​p 요소

<p>Hello</p>
<div>
  <span>Hello Again</span>
</div>
<p>And Again</p>
<script type="text/javascript">
  $(&#39;p&#39;).prev();  //<div><span>Hello Again</span></div>
</script>

4에서 찾습니다. siblings() 메서드: $('p').siblings()---- p

5 이후의 모든 형제 요소를 찾습니다. $('p').find('span') ---- p 요소 내에서 하위 요소를 찾으며 이는 범위 요소입니다.

6 eq() 방법: $('p') .eq( 1) --- 두 번째 p 요소 찾기(색인 첨자는 0부터 시작)

7. first() 메서드: $('li').first() --- 첫 번째 li 요소 가져오기

8. ) 메소드: $('li').last() --- 마지막 li 요소를 가져옵니다.

9. filter() 메소드: $('p').filter('.box') --- p를 가져옵니다. 클래스 이름이 box인 요소

10. is() 메소드: $('.box').is('p') ---- .box가 p 요소인지 확인

11 map() 메소드: $ ('p').map(callback) --- 각 p

에 대해 콜백 함수를 실행합니다. 예: 입력 요소를 탐색하여 해당 값을 얻은 후 ","

<p><b>Values: </b></p>
<form>
 <input type="text" name="name" value="John"/>
 <input type="text" name="password" value="password"/>
 <input type="text" name="url" value="http://ejohn.org/"/>
</form>
<script type="text/javascript">
  $("p").append( $("input").map(function(){
     return $(this).val();
    }).get().join(", ") );  //<p>John, password, http://ejohn.org/</p> 
</script>

로 구분된 p 요소 뒤에 추가합니다. 12. hasClass() 메소드: $('p').hasClass('box') ---- 클래스 이름 상자가 있는 p 찾기

13. has() 메소드: $('p').has( 'span ') ---- 범위 요소를 포함하는 p 요소를 찾습니다

14. not() 메서드: $('p').not('span') ---- 범위 요소를 포함하지 않는 p 요소를 찾습니다.

15, Slice() 메소드: $('p').slice(0,2) ---- 첫 번째 p 요소에서 세 번째 p 요소를 찾습니다

16, offsetParent() 메소드: $ ('p' ).offsetParent() --- p 요소의 첫 번째 위치에 있는 조상 요소를 찾습니다

17. parent() 메서드: $('p').parent() ---- p를 포함하는 요소를 반환합니다. 요소의 유일한 상위 노드

18. parentUntil() 메소드: $('p').parent() ---- p 요소를 포함하는 모든 조상 노드를 반환합니다(루트 노드 제외)

19. : $('p').parentUntil('#box') ---- #box

20까지 p 요소의 조상 요소를 찾습니다.contents() 메서드: $('p').contents () - -- p 요소 내 모든 하위 노드(텍스트 노드 포함)를 반환합니다.

21 end() 메서드: $('p').find('span').end() ---- 명령문 교체 body는 이전 상태로 다시 변경됩니다. 즉,span 요소를 찾은 후 포커스는 p 요소

<div>
  <span>Hello</span>,
  how are you?
</div>
<script type="text/javascript">
  $(&#39;div&#39;).find(&#39;span&#39;).addClass(&#39;test&#39;).end().attr(&#39;title&#39;,&#39;title1&#39;);
  //span添加class=test;div添加title=title1
</script>

로 돌아갑니다. [추천 학습: jQuery 비디오 튜토리얼, web front-end]

위 내용은 jquery에서 노드를 탐색하는 방법에는 어떤 것이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!