본문 바로가기
Front/jQuery

02. jQuery Selectors

by 오다다 코드 오다다 Code 2020. 8. 20.

html의 요소를 선택하고 조작하려면 jQuery의 선택자를 사용해야 합니다.

jQuery의 모든 선택기는 달러 기호와 괄호 ($ ())로 시작합니다. 

 

태그 선택자

$("p")
$("button").click(function(){
    $("p").hide();
});

 

#id 선택자

$("#test")
$("button").click(function(){
	$("#test").hide();
});

 

.class 선택자

 $(".test")
$("button").click(function(){
    $(".test").hide();
});

 

추가 선택자

$("*") 모든 요소 선택
$(this) 현재 요소 선택
$("p.intro") <p class="intro"> 선택
$("p:first") 첫번째 <p> 요소 선택
$("ul > li") <ul>의 자식 중 <li> 요소 선택
$("ul li:first") 첫번째 <ul> 요소 중 첫번째 <li> 요소 선택
$("ul li:first-child")
모든 <ul> 중 첫번째 <li> 요소 선택
$("ul > li:nth-child(2)") 모든 <ul> 중 두번째 <li> 요소 선택
$("ul > li:last-child") 모든 <ul> 중 마지막 <li> 요소 선택
$(".left, .right, #banner")
여러 요소 선택
$("[href]") href 속성이 있는 모든 요소 선택
$("a[target='_blank']") target="_blank" 속성이 있는 모든 a 요소 선택
$("a[target!='_blank']") target="_blank" 속성이 없는 모든 a 요소 선택
$(":button") type="button" 속성이 있는 <input>, <button> 요소 선택
$("tr:even") 짝수번째 <tr> 요소 선택
$("tr:odd") 홀수번째 <tr> 요소 선택
$("li:eq(0)") 첫번째 <li> 요소 선택

 

See the Pen VwaKqyE by miae (@flato) on CodePen.

 

codepen.io/flato/pen/VwaKqyE">

 

 

<input> 속성 선택자

$("input:text") <input type="text"> 요소 선택
$("input:password") <input type="password"> 요소 선택
$(":button") type="button" 요소 선택
$("input:checked + label") 체크 된 <input> 요소 다음 <label> 요소 선택
$("option:selected") 선택된 요소 선택
$("textarea:disabled") 비활성화 된 <textarea> 요소 선택

 

See the Pen 속성선택자 / jQuery by miae (@flato) on CodePen.

 

찾아가기

원하는 요소를 선택하기 위해선 다른 요소와의 관계를 기반으로 HTML 요소를 "찾거나 선택" 해야 합니다.

선택한 (현재) 요소에서 시작하여 트리에서 쉽게 위 (상위), 아래 (하위) 및 옆으로 (형제) 이동할 수 있습니다. 이 이동을 DOM 트리를 통해 이동 (traversing) 또는 이동이라고합니다.

 

조상 요소 찾기

$("span").parent() <li> : 선택한 요소의 직접 부모 요소 
$("span").parents() <div> <ul> <li> : 문서의 루트 요소 ( <html>) 까지 선택한 요소의 모든 상위 요소
$("span").parentsUntil("ul") <ul> <li> : 주어진 두 인수 사이의 모든 상위 요소

 

See the Pen 상위하위 선택자 / jQuery by miae (@flato) on CodePen.

 

자손 요소 찾기

$("div").children() <ul> : 선택한 요소의 모든 직계 자식을 반환
$("li").children("b") <b> : <li>의 직계자손인 <b> 태그 선택
$("div").find("span") <span> : 선택한 요소부터 마지막 하위 요소까지 반환
$("div").find("*") <ul> <li> <span> <b> : 모든 하위 항목 반환

 

 

형제 요소 찾기

$("h2").siblings() 모든 형제 요소 반환
$("h2").siblings("p") 형제 중 <p> 요소 반환
$("h2").next() 선택한 요소의 다음 형제 요소 반환
$("h2").nextAll() 선택한 요소의 다음 형제 요소 모두 반환
$("h2").nextUntil("h6") 주어진 두 인수 사이의 모든 다음 형제 요소 반환
$("h2").prev() 선택한 요소의 이전 형제 요소 반환
$("h2").prevAll() 선택한 요소의 이전 형제 요소 모두 반환
$("h2").prevUntil() 주어진 두 인수 사이의 모든 이전 형제 요소 반환

 

 

필터링

$("li").first() 지정된 요소의 첫 번째 요소를 반환
$("div").last() 지정된 요소의 마지막 요소를 반환
$("p").eq(1) 선택한 요소의 특정 인덱스 번호가있는 요소를 반환
색인 번호는 0에서 시작하므로 첫 번째 요소의 색인 번호는 1이 아니라 0입니다
$("p").filter(".intro") <p>클래스 이름이 "intro"인 모든 요소 를 반환
$("p").not(".intro") <p>클래스 이름 "intro"가없는 모든 요소를 반환
filter()의 반대 - 기준과 일치하지 않는 모든 요소를 ​​반환합니다.

 

See the Pen WNwjwWw by miae (@flato) on CodePen.

 

더 많은 셀렉터를 알고 싶으면...

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

 

jQuery Selectors

jQuery Selectors jQuery Selectors Use our jQuery Selector Tester to demonstrate the different selectors. Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All elements with class="intro" .cl

www.w3schools.com

 

'Front > jQuery' 카테고리의 다른 글

06. jQuery Effects  (0) 2020.08.28
05. jQuery Event Methods  (0) 2020.08.28
04. jQuery HTML Dimensions  (0) 2020.08.28
03. jQuery HTML  (0) 2020.08.20
02. jQuery Selectors  (0) 2020.08.20
01. Hello jQyery  (0) 2020.08.20

댓글0