상위 요소, 하위 요소 및 형제 요소를 얻기 위해 jquery 선택기를 사용하는 메서드 인스턴스
- 伊谢尔伦원래의
- 2018-05-15 11:11:562828검색
1. 상위 요소 가져오기
1. parent([expr]): 지정된 요소의 모든 상위 요소 가져오기
<p id="par_p"><a id="href_fir" href="#">href_fir</a>
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></p>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</span>
$(
document
).ready(function(){
$("a").parent().addClass('a_par');
});firebugjquery 상위 요소 가져오기
2. [expr]):
지정된 요소의 다음 형제 요소를 가져옵니다(다음 형제 요소라는 점에 유의하세요)
<!DOCTYPE html> <html> <head> <script type="text/ javascript " src="/jquery/jquery.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css(' background-color ', 'red'); </script> </body> </html>이 예제의 결과는 목록 항목 4의 배경색만 빨간색으로 변경됩니다
2, nextAll ( [expr]):
지정된 요소 뒤에 있는 모든 형제 요소를 가져옵니다.
<p><span>And Again</span></p>
var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');마지막 "e388a4556c0f65e1904146cc1a846bee" 태그에 주의하세요. 이 태그도 'p_next_all'이라는 클래스 이름으로 추가됩니다~~ 3. ):
지정된 요소 뒤의 모든 형제 요소를 가져온 다음 지정된 요소를 추가합니다.
<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p>
var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');첫 번째 "e388a4556c0f65e1904146cc1a846bee" 태그에 주의하세요. 이 문장은 p 태그 뒤의 모든 형제 요소를 선택한다는 의미입니다. , 당신 자신도 마찬가지입니다. . . 다음 두 개는 실제로는 next()와 nextAll()의 반대입니다.
4.prev(): 지정된 요소(이전 요소)의 이전 형제 요소를 가져옵니다.
5.prevAll(): 지정된 요소 앞에 있는 모든 형제 요소를 가져옵니다.
3. 하위 요소 가져오기
1. 하위 요소 찾기 방법 1: >
예: var aNods = $("ul > a"); 하위 요소 찾기 방법 2: children ()
3. 하위 요소를 찾는 방법 3: find()
여기에서는 children()과 find()의 유사점과 차이점을 간략하게 소개합니다.
1> children 및
find 메서드
는 모두 하위 요소를 얻는 데 사용됩니다. 대부분의 jQuery 메서드처럼 텍스트 노드를 반환하지 않습니다. 2> children 메소드는 요소 아래의 하위 요소, 즉 직계 하위 요소만 가져옵니다. 3> find 메소드는 모든 하위 요소, 즉 DOM 트리에서 이러한 요소의 자손을 얻습니다.
4> 하위 메소드의 매개변수 선택기는 선택사항이며, 하위 요소를 필터링하는 데 사용됩니다.
그러나 매개변수 선택기 메소드는 find 메소드가 필요합니다.
5> 실제로 find 메소드는 jQuery(selector, context)를 사용하여 구현할 수 있습니다. 즉, $('li.item-ii').find('li')는 $('li', 'li.item-ii')와 동일합니다.
예:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
사용: $('ul .level- 2').children().css('border', '1px solid green'); $('ul.level-2').find('li').css('border', '1px 단색 녹색').
위 내용은 상위 요소, 하위 요소 및 형제 요소를 얻기 위해 jquery 선택기를 사용하는 메서드 인스턴스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!