[jQuery기초] 탐색 메서드

jQuery는 DOM 객체를 탐색, 접근하는 여러가지 방법을 제공한다.
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

 

parent 

선택자의 바로 상위 요소만을 탐색해서 일치하는 요소를 가져온다.
단일 레벨만 탐색하는 것을 제외하면 parents와 유사하다.

// Html
<div id="wrap">
<div id="inner">
<div id="box"></div>
</div>
</div>

// jQuery
$('#box').parent(); // #inner 반환

 

parents

선택자의 상위 요소들을 탐색해서 일치하는 요소를 가져온다.
가까운 요소부터 외부 요소 순서로 반환된다.

// Html
<div id="wrap">
<div id="inner">
<div id="box"></div>
</div>
</div>

// jQuery
$('#box').parents(); // #inner, #wrap, body, html 순서로 반환
$('#box').parents('div'); // #inner, #wrap 순서로 반환

 

children

선택자의 자식 요소를 가져온다.
텍스트 노드를 가져오는 것만 제외하면 contents 메서드와 유사하다.

// Html
<div id="box">
<div>요소</div>
텍스트를 입력해주세요.
</div>

// jQuery
$('#box').children(); // #box의 자식인 div 엘리먼트를 가져온다.

 

siblings

선택자의 모든 형제자매 요소를 탐색해서 일치하는 요소를 가져온다.

// Html
<div>
<div class="siblings1"></div>
<div id="box"></div>
<div class="siblings2"></div>
<div class="siblings3"></div>
</div>

// jQuery
$('#box').siblings(); // siblings 1~3까지 모두 반환

 

first

선택자를 포함하여 형제자매 요소를 탐색하며 첫번째 요소를 가져온다.

// Html
<div class="box">
1번
<div>1-1번</div>
<div>1-2번</div>
</div>
<ul class="box">
<li>2-1번</li>
<li>2-2번</li>
</ul>

// jQuery
$('#box').first(); // 1번 div.box 반환

 

last

선택자를 포함하여 형제자매 요소를 탐색하며 마지막 요소를 가져온다.

// Html
<div class="box">
1번
<div>1-1번</div>
<div>1-2번</div>
</div>
<ul class="box">
<li>2-1번</li>
<li>2-2번</li>
</ul>

// jQuery
$('#box').last(); // ul.box 반환

 

prev

선택자를 포함하여 요소의 바로 이전 형제를 가져온다.

// Html
<div id="box">
<div class="prev"></div>
<div class="target"></div>
<div class="next"></div>
</div>

// jQuery
$('#box .target').prev(); // div.prev 반환

 

prevAll

선택자를 포함하여 요소의 바로 이전 형제자매 요소를 가져온다.
가까운 순서대로 반환한다.

// Html
<div id="box">
<div class="prev1"></div>
<div class="prev2"></div>
<div class="target"></div>
<div class="next"></div>
</div>

// jQuery
$('#box .target').prevAll(); // div.prev2, div.prev1순으로 반환

 

next

선택자를 포함하여 요소의 바로 다음 형제자매 요소를 가져온다.

// Html
<div id="box">
<div class="prev"></div>
<div class="target"></div>
<div class="next"></div>
</div>

// jQuery
$('#box .target').next(); // div.next 반환

 

nextAll

선택자를 포함하여 요소의 바로 다음 형제자매 요소를 가져온다.
가까운 순서대로 반환한다.

// Html
<div id="box">
<div class="prev"></div>
<div class="target"></div>
<div class="next1"></div>
<div class="next2"></div>
</div>

// jQuery
$('#box .target').nextAll(); // div.next1, div.next2순으로 반환

 

eq

선택자를 포함하여 형제자매 요소를 탐색하며 index는 0부터 시작한다.
index에 해당하는 순번의 요소를 가져온다.
음수를 넣을 경우 끝에서부터 시작한다.

// Html
<ul id="box">
<li>1-1번</li>
<li>1-2번</li>
<li>1-3번</li>
<li>1-4번</li>
</ul>

// jQuery
$('#box li').eq(0); // 1-1번 li 반환
$('#box li').eq(-2); // 1-3번 li 반환

 

get

index가 없을 경우 해당하는 모든 요소를 배열로 가져온다.
index를 지정하면 단일 요소를 검색하며 index는 0부터 시작한다.
음수를 넣을 경우 끝에서부터 시작한다.

// Html
<ul id="box">
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>

// jQuery
$('#box li').get(); // 1~3번까지 배열로 반환
$('#box li').get(1); // 2번 반환
$('#box li').eq(-2); // 2번 반환

 

has

선택자를 포함하여 하위 요소들을 탐색하여 일치하는 요소를 포함하고있는 요소를 가져온다.

// Html
<ul id="box">
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>

// jQuery
$('#box').has('li'); // #box 반환

 

contents

자식 엘리먼트와 텍스트 노드를 가져온다.
텍스트 노드를 가져오는 것만 제외하면 children 메서드와 유사하다.
iframe의 document에 접근할 수 있다.

// Html
<div id="box">
<div>요소</div>
텍스트를 입력해주세요.
</div>

<iframe id="page" src="../sub/page.html" width="500px" height="500px"></iframe>

// jQuery
$('#box').contents(); // #box의 자식인 div 엘리먼트와 함께 text node를 가져온다.
$('#page').contents(); // page.html의 document를 가져온다.

contents, children 차이

// Html
<div id="box">텍스트를 입력해주세요.</div>

// jQuery
$('#box').contents(); // Text node를 가져오며 data에서 "텍스트를 입력해주세요." 확인 가능
$('#box').children(); // 빈 값

Text Node란? - DOM에서 공백이나 텍스트 문자는 Text Node로 표현된다.

 

find

여러 레벨의 하위 요소들을 탐색하여 해당하는 요소를 가져온다.

// Html
<div id="box">
<p>1번</p>
<div>
<p>2번</p>
</div>
</div>

// jQuery
$('#box').find('p'); // #box의 하위 요소 중에 p를 모두 가져온다.(1번, 2번)

 

closest

선택자를 포함하여 상위 요소를 순차적으로 탐색하여 해당하는 요소를 찾는다.
일치하는 요소를 찾는 순간 탐색은 중단하고 해당 요소를 가져온다.
parents 메서드와 유사하나 선택자의 포함여부, 검색 트리의 이동등의 차이점이 존재한다.

// Html
<ul class="closest">
<li class="closest">
<span id="box"></span>
</li>
</ul>

// jQuery
$('#box').closest('.closest'); // 상위 요소에서 li.closest를 찾은 후 탐색을 중단하고 li.closest 반환

 

filter

선택자를 포함하여 하위 요소를 탐색하여 일치하는 모든 요소를 가져온다.
함수 형식으로 사용할 수 있다.

// Html
<ul id="box">
<li>1번</li>
<li class="items">2번</li>
<li class="items">3번</li>
<li>4번</li>
</ul>

// jQuery
$('#box li').filter('.items'); // 2번, 3번 li.items 반환
$('#box li').filter(function(i, o){
return i > 1 && o;
}); // i가 1보다 크다면 o를 반환하는 함수로 3번, 4번 li를 반환

 

not

선택자의 하위 요소에서 입력한 값과 일치하지 않는 요소를 가져온다.
함수 형식으로 사용할 수 있다.

// Html
<ul id="box">
<li>1번</li>
<li class="items">2번</li>
<li class="items">3번</li>
<li>4번</li>
</ul>

// jQuery
$('#box li').not('.items'); // 1번, 4번 li 반환
$('#box li').not(function(i, o){
return i > 1 && o;
}); // i가 1보다 크다면 o를 not으로 반환하기때문에 1보다 작은 1번, 2번 li를 반환

 

is

선택자가 입력한 값과 관련되는 상태를 확인 후 일치하는 결과에 따라 true, false로 반환한다.
선택자의 결과나 태그를 확인할때 유용하다.
함수 형식으로 사용할 수 있다.

// Html
<ul id="box" data-type="list">
<li>1번</li>
<li>2번</li>
</ul>

// jQuery
$('#box').is('[data-type="list"]'); // true 반환
$('#box').on('click', function(e){
console.log($(e.target).is('li')); // #box 클릭 시 li가 포함되어 있기 때문에 true 반환
});

그 외 입력한 값이 해당 타입인지 판별하는 메서드들도 있다. 

(isArray, isFunction, isNumeric, isPlainObject, isWindow, isXMLDoc)

 

end

메소드체이닝에서 메소드를 호출하고 나서 이전 엘리먼트로 돌아가는데 사용한다.
객체를 반환하는 메소드 뒤에 이어서 사용할 수 있다.

// Html
<div id="box">
<div>1번</div>
<div>2번</div>
</div>

// jQuery
$('#box').children().end(); // #box 반환

메소드체이닝 페이지가 만들어지면 사용하고 아니면 간략하게 적어주자

 

scrollTop

세로스크롤의 위치 값을 설정하거나 가져올 수 있습니다.

// CSS
#box{ overflow:scroll; height:500px; }
#child{ height:1000px; }
// Html
<div id="box">
<div id="child"></div>
</div>

// jQuery
$('#box').scrollTop(50); // 50px 내려간 위치로 설정