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 |