jQuery 노드 탐색 방법 요약-JS 튜토리얼-php.cn

jQuery 노드 탐색 방법 요약

小云云

풀어 주다： 2018-01-12 09:42:42

원래의

1890명이 탐색했습니다.

이 글은 jQuery 순회 노드의 방법을 주로 수집하고 정리하여 모든 사람이 jQuery 순회 노드를 더 명확하게 이해할 수 있도록 도와줍니다. 매우 좋으며 필요한 친구들이 참고하면 도움이 될 것입니다. 모든 사람.

1.children() 메소드: $('p').children()---p 요소의 모든 하위 요소 노드를 찾기 위해 탐색합니다

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

로그인 후 복사

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

　　[관련 메서드]

　 (1)nextAll() 메서드: $('p').nextAll() ---- 모두 찾기 p

　　(2)nextUntil() 메소드: $('p').nextUntil('p')------p 이후의 모든 형제 요소를 p 요소까지 검색

<p>Hello</p>
<p class="box">Hello Again</p>
<p>
  <span>And Again</span>
</p>
<script type="text/javascript">
  $('p').next();   //<p>Hello Again</p><p><span>And Again</span></p>
  $('p').next('.box');  //<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까지 찾습니다.

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

로그인 후 복사

4의 모든 요소입니다. siblings() 메소드: $('p').siblings()---- p

5.find() 메소드 전후의 모든 형제 요소 찾기: $('p') .find('span') - --- p 요소 내에서 하위 요소를 찾고 그것이 범위 요소입니다

6.eq() 메서드: $('p').eq(1) --- 두 번째 p 요소를 찾습니다( 인덱스 첨자 시작 0)

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

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

9.filter() 메서드: $('p').filter('.box') --- 클래스 이름이 box

10인 p 요소를 가져옵니다. : $('.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>

로그인 후 복사

12.hasClass() 메서드: $('p')로 구분된 p 요소 뒤에 추가합니다. hasClass ('box') ---- p

13.has() 메소드 찾기: $('p').has('span') ---- 범위 요소 p 요소

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

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

16.offsetParent() 메서드: $('p').offsetParent() --- p 요소 찾기 첫 번째 위치에 있는 조상 요소

17.parent() 메소드: $('p').parent() ---- p 요소

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

19.parentUntil() 메서드: $('p').parentUntil('# box') ---- 찾기 #box까지 p 요소의 조상 요소

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

21.end( ) 메소드: $('p').find('span').end() ---- 문의 본문을 이전 상태로 다시 변경합니다. 즉, 범위 요소를 찾은 후 포커스가 p 요소로 돌아갑니다.

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

로그인 후 복사