Front/jQuery

02. jQuery Selectors

oodada 2020. 8. 20. 11:24

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
01. Hello jQyery  (0) 2020.08.20
티스토리 친구하기