상위 요소, 하위 요소 및 형제 요소를 얻기 위해 jquery 선택기를 사용하는 메서드 인스턴스-JS 튜토리얼-php.cn

상위 요소, 하위 요소 및 형제 요소를 얻기 위해 jquery 선택기를 사용하는 메서드 인스턴스

伊谢尔伦

풀어 주다： 2018-05-15 11:11:56

원래의

2915명이 탐색했습니다.

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(&#39;a_par&#39;); 
});

로그인 후 복사

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> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>

로그인 후 복사

이 예제의 결과는 목록 항목 4의 배경색만 빨간색으로 변경됩니다

2, nextAll ( [expr]):
지정된 요소 뒤에 있는 모든 형제 요소를 가져옵니다.

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);

로그인 후 복사

마지막 "

" 태그에 주의하세요. 이 태그도 '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(&#39;p_next_all&#39;);

로그인 후 복사

첫 번째 "

" 태그에 주의하세요. 이 문장은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!