권형&오형의 일상
[권형] 06. 고급 선택자 본문
1. 자식 선택자와 자손 선택자
 | < div id ="" > < div id= "s1" > < p></ p > </ div> < div id= "s2" > < p></ p > </ div> </ div> |
DOM에서 하위 노드가 자식요소의 개념
⑴ 자식요소의 선택방법(CSS 선택자와 동일한 형태)
$("선택자" > 선택자");
1 2 | $("#s1>p"); //#s1의 자식 요소인 <p> 태그를 선택하는 경우 | cs |
⑵ 메서드를 사용하는 방법 : 이 때 사용하는 메서드는 '선택'역할 수행
css의 :nth-child(n)과 동일
* 자식 요소 선택
$("선택자").children("선택자");
1 2 | $("#s1").children("p1"); //#s1의 자식 요소인 <p> 태그를 선택하는 경우 | cs |
1 2 | $("#s1").children(); //자식요소 전부 선택 | cs |
* 자손 요소 선택
$("선택자").find("선택자");
1 2 | $("선택자").find("선택자"); //해당 태그에 속한 요소중 원하는 것을 찾음 | cs |
* 다양한 메소드 사용방법
변수를 통해서도 사용이 가능함.
1 2 3 | //자손요소를 선택하는 코드 var par = $("#content"); //변수 par에 #content 태그를 선택해서 넣음 par.find("p"); //변수 par와 메서드를 이용해서 자손 요소 선택 | cs |
1 2 3 | // (자손요소 선택 후에) 해당 요소의 색상을 변경시키는 코드 var par = ("#content");// 변수 par에 #content 태그를 선택해서 넣음 par.find("p").css('color','red');//자손 요소 선택 후 색상 변경 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <head> <title>Simple</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="content"> <section class="sec1"> <p>sec1 p1</p> <p>sec2 p2</p> <p>sec3 p3</p> </section> <section class="sec2"> <p>sec1 p1</p> <p>sec2 p2</p> <p>sec3 p3</p> </section> </div> </body> </html> |
1 2 3 4 5 6 | $(function(){ // CSS 형태의 선택자 $("#content>section").css('border','1px solid #000000'); // 메서드를 이용한 선택자 $("content").children("section").css('border-dadius','10px'); }); |
1 2 3 4 5 6 | $(function(){ // CSS 형태의 선택자 $("#content p").css('background-color','lightblue'); // 메서드를 이용한 선택자 $("#content").find("p").css('font-style','italic'); }); |
2. 부모와 형제 요소 선택자
< div id="area" > <div id= "c1" > <div id= "s1" > <p></ p> </div> <div id= "s2" > <p></ p> </div> </div> <div id= "c2" > <div id= "s3" > <p></ p> </div> <div id= "s4" > <p></ p> </div> </div> </ div> |
⑴ 부모 요소 선택자
$("선택자").parent();
1 2 | $("#s1").parent(); // 일반적으로 부모요소는 하나이므로 선택자를 사용하지 않음. | cs |
1 2 | $("#s1").parent("#c1"); // 선택자를 사용하는 경우 | cs |
⑵ 조상 요소 선택자
$("선택자").parents();
1 2 | $("#s1").parents(); // find 와 대칭 | cs |
1 2 | $("#s1").parents("#area"); // 조상요소 중 #area를 찾음. | cs |
⑶ 형제 요소 선택자
$("선택자").next();
1 2 3 4 5 | <div> <p id="p1"></p> <p id="p2"></p> <p id="p3"></p> </div> | cs |
선택자 | 결과 |
$("#p1").next() | #p2가 선택 |
$("#p1").next("#p2") | #p2가 선택 |
$("#p1").next("#p3") | 아무것도 선택되지 않음 |
$("선택자").prev();
$("선택자").prev();와 $("선택자").next();와 인접한 형제 요소만 선택하게 되므로 인접하지 않은 형제 요소는 선택이 안된다.
선택자 | 설명 |
선택자.next() | 인접한 요소 중 바로 다음에 나오는 요소 선택 |
선택자.next(선택자2) | 인접한 요소 중 바로 다음에 나오는 요소가 ‘선택자2’에 해당하면 선택 |
선택자.prev() | 인접한 요소 중 바로 전에 나오는 요소 선택 |
선택자.prev(선택자2) | 인접한 요소 중 바로 전에 나오는 요소가 ‘선택자2’에 해당하면 선택 |
선택자.nextAll() | 선택자보다 이후에 나오는 요소 모두 선택 |
선택자.nextAll(선택자2) | 선택자보다 이후에 나오는 요소 중 ‘선택자2’에 해당하는 요소 모두 선택 |
선택자.prevAll() | 선택자보다 이전에 나오는 요소 모두 선택 |
선택자.prevAll(선택자2) | 선택자보다 이전에 나오는 요소 중 ‘선택자2’에 해당하는 요소 모두 선택 |
선택자.nextUntil(선택자2) | 선택자보다 이후에 나오는 요소중 ‘선택자2’에 해당하는 요소까지 모두 선택 |
선택자.prevUntil(선택자2) | 선택자보다 이전에 나오는 요소 중 ‘선택자2’에 해당하는 요소까지 모두 선택 |
⑷ 선택자 복합 사용
$(선택자).parent().parent()
$(선택자).children().children()
$(선택자).).parent().children()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <head> <title>Simple</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="area"> <div id="c1"> <p>prev p</p> <p>prev p</p> <div id="s1"> <p>p in s1</p> </div> <p>next p</p> <p>next p</p> <p>next p</p> </div> </div> </body> </html> |
1 2 3 | $(function() { $("#s1").parent().children("p").css("border","1px solid #000000"); }) |
3. 속성 선택자 : jQuery에서는 태그에 포함된 속성값을 이용해서 선택할 수 있는 방법이 있다.
태그를 작성할 때 클래스나 아이디를 통한 구분자를 명시할 필요가 없으므로 유용.
특정한 역할을 하는 태그를 선택할 때도 유용하게 사용됨.
선택자 | 설명 |
태그[속성] | 해당 속성을 가지고 있는 태그를 선택 |
태그[속성=값] | 해당 속성이 해당 값을 가지고 있는 태그를 선택 |
태그[속성~=값] | 해당 속성이 해당 값을 포함(단어 단위)하고 있는 태그를 선택 |
태그[속성*=값] | 해당 속성이 해당 값을 포함하고 있는 태그를 선택 |
태그[속성^=값] | 해당 속성이 해당 값으로 시작하는 태그를 선택 |
태그[속성$=값] | 해당 속성이 해당 값으로 끝나는 태그를 선택 |
input [value]
4. 필터 선택자
⑴ 타입에 따른 필터 선택자
1 | <input type="button" value="click"/> | cs |
1 | $("input[type=button]) | cs |
1 | $("input:button") | cs |
선택자 | 설명 |
태그:button | input 태그 중 button 타입인 태그와 button 태그를 선택 |
태그:checkbox | input 태그 중 checkbox 타입인 태그 선택 |
태그:file | input 태그 중 file 타입인 태그 선택 |
태그:image | input 태그 중 image 타입인 태그 선택 |
태그:password | input 태그 중 password 타입인 태그 선택 |
태그:radio | input 태그 중 radio 타입인 태그 선택 |
태그:reset | input 태그 중 reset 타입인 태그 선택 |
태그:submit | input 태그 중 submit 타입인 태그 선택 |
태그:text | input 태그 중 text 타입인 태그 선택 |
태그:input | 모든 입력태그(input,textarea,select,button)를 선택 |
1 2 | $(":button").css("background","red"); //태그 생략 가능 | cs |
⑵ 상태에 따른 필터 선택자
input 태그의 경우 type속성에 따라 구분하는 것이 보통이지만 상태에 따라서도 구분 가능.
ex) 체크박스는 체크 된 상태와 체크 되지 않은 상태가 존재.
1 | $("input:checked") | cs |
선택자 | 설명 |
태그:cheked | 체크된 체크 박스를 선택 |
태그:disable | 비활성화된 사용자 입력 태그를 선택 |
태그:enable | 활성화된 사용자 입력 태그를 선택 |
태그:focus | 현재 포커스된 입력 태그를 선택 |
태그:selected | select 태그 내의 option 태그 중 현재 선택되어 있는 태그를 선택 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE HTML> <head> <title>Simple</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/> <input id="btn" type="button" value="run" /></body> </html> | cs |
1 2 3 4 | $(document).on("click","#btn",function(){ //체크된 체크 박스의 숫자 알려주기 alert($(":checked").length); }); | cs |
⑶ 순서에 따른 필터 선택자
특정한 순서를 선택하는 선택자 (홀수, 짝수, 3의 배수 등 일정한 기준으로 선택 가능한 형태)
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
ㆍ총 10개의 칸으로 이루어져 있다. 여기서 세번째를 선택할 때 수학적 표현으로는 3이다.
ㆍ첫번째를 선택할 때 수학적 표현으로는 1이며 이를 표현하는 단어는 first이다.
ㆍ첫번째를 선택할 때 수학적 표현으로는 1이며 이를 표현하는 단어는 first이다.
ㆍ2,4,6,8,10번째를 선택할 때 수학적 표현으로는 2n이며 이를 표현하는 단어는 even이다.
ㆍ1,3,5,7,9번째를 선택할 때 수학적 표현으로는 2n+1이며, 이를 표현하는 단어는 odd이다.
ㆍ3,6,9번째를 선택할 때 수학적 표현으로는 3n이다.
ㆍ4,7,10번째를 선택할 때 수학적 표현으로는 3n+1이다(각 숫자의 차이는 3이고, 시작 위치가 +1 되어 있다.)
ㆍ:nth-child(3)
ㆍ:nth-child(1), :first (둘 중 하나)
ㆍ:nth-child(2), :even (둘 중 하나)
ㆍ:nth-child(2n+1), :odd (둘 중 하나)
ㆍ:nth-child(3n)
ㆍ:nth-child(3n+1)
선택자 | 설명 |
태그:odd | 해당 태그 중 홀수 번째에 해당되는 태그를 선택 |
태그:even | 해당 태그 중 짝수 번째에 해당되는 태그를 선택 |
태그:first | 해당 태그 중 처음에 해당되는 태그를 선택 |
태그:last | 해당 태그 중 마지막에 해당되는 태그를 선택 |
| 태그:nth-child (수학적 표현) | 해당 태그 중 수학적 표현에 해당되는 태그를 선택 |
| 태그:nth-last-child (수학적 표현) | nth-child와 동일하나 뒤에서부터 거꾸로 순서를 판단 |
| 태그:nth-of-type (수학적 표y현) | nth-child처럼 수학적 표현에 의해서 태그를 선택 nth-child는 태그의 종류에 관계없이 순서를 판단하지만, nth-of-type은 특정된 태그로만 순서를 판단 |
| 태그:nth-of-last-type (수학적 표현) | nth-of-type과 동일하나 뒤에서부터 거꾸로 순서를 판단 |
태그:eq(숫자) | 숫자에 해당되는 순서의 태그를 선택(단일 숫자) |
태그:gt(숫자) | 숫자보다 큰 순서에 해당하는 태그를 선택(단일 숫자) |
태그:lt(숫자) | 숫자보다 작은 순서에 해당되는 태그를 선택(단일 숫자) |
* nth-child와 nth-of-type의 차이점
✔
<p></p> | <p></p> | <span></span> | <p></p> | <p></p> |
전체 순서 : 4번째 ➜ nth-child
P 태그만 따졌을 때의 순서 : 3번째 ➜ nth-of-type
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE HTML> <head> <title>Simple</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <table> <tr> <td>line 1</td> </tr> <tr> <td>line 2</td> </tr> <tr> <td>line 3</td> </tr> <tr> <td>line 4</td> </tr> <tr> <td>line 5</td> </tr> <tr> <td>line 6</td> </tr> </table> </body> </html> | cs |
➜ 홀수와 짝수 행이 서로 다른 색으로 표시된다.
5. 기타 필터 선택자
따라서도 구분 가능.
선택자 | 설명 |
태그:contains(문자열) | 해당 문자열을 포함하는 태그를 선택 |
태그:has(p) | p 태그를 포함하는 태그를 선택 (예시로 p 태그를 선택함. 다른 태그도 가능) |
태그:not(선택자) | 선택자에 해당되지 않는 태그를 선택 |
:not 필터 선택자는 선택자를 사용할 때 제외 조건을 지정할 수 있으므로 유용한 필터
모든 필터 선택자들은 태그를 생략하고 필터 선택자만 사용할 수 있음.
$("input:checked") ➜ $(":checked")
'개발 > Jquery' 카테고리의 다른 글
| [권형] 07. 여러 개 선택된 태그 관리 (메서드 활용) (5) | 2017.09.26 |
|---|---|
| [권형] 05. 선택자 (0) | 2017.09.26 |
| [권형] 04. jQuery 키워드 치환 (0) | 2017.09.26 |
| [권형] 03. jQuery 시작 코드 (0) | 2017.09.26 |
| [권형] 02. jQuery의 코드 형태 (0) | 2017.09.26 |
| [권형] 01. jQuery 정의(참고) (0) | 2017.09.26 |
Comments