반응형
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("input[name=a]").parent('td').parent('tr').css({"color": "blue", "border": "2px solid blue"}); $("input[name=a]").closest("tr").children('td').css({"color": "red", "border": "2px solid red"}); $("input[name=a]").closest("tr").children('td').eq(1).css({"color": "brown", "border": "2px solid brown"}); $("input[name=a]").closest("tr").children('td').eq(1).next('td').css({"color": "yellow", "border": "2px solid yellow"}); $("input[name=d]").closest("tr").find('td').eq(0).css({"color": "green", "border": "2px solid green"}); $("input[name=d]").closest("tr").children('td').next('td').css({"color": "black", "border": "2px solid black"}); }); </script> </head> <body class="ancestors"> <div> <table> <tr> <td><input type="text" name="a"/></td> <td><input type="text" name="b"/></td> <td><input type="text" name="c"/></td> </tr> <tr> <td><input type="text" name="d"/></td> <td><input type="text" name="e"/></td> <td><input type="text" name="f"/></td> </tr> </table> </div> </body> </html> | cs |
결과
설명 참고
| 셀렉터(Selector) | 사용예 | 선택된 요소 |
| * | $("*") | 모든 요소 |
| #id | $("#elementId") | id='elementId'인 요소 |
| .class | $('.className') | class='className'인 요소 |
| element | $("element") | 요소이름(tagName)이 "element"인 모든 요소 |
| .class, .class | $(".intro, .demo") | class가 intro 및 demo인 모든 요소 |
| :first | $("element:first") | element로 선택되는 요소중 첫번째 요소 |
| :last | $("element:last") | element로 선택되는 요소중 마지막 요소 |
| :even | $("element:even") | element로 선택되는 요소중 짝수번째 요소 |
| :odd | $("element:odd") | element로 선택되는 요소중 홀수번째 요소 |
| :eq(index) | $("element:eq(index)") | element로 선택되는 요소중 index+1번째 요소 |
| :gt(index) | $("element:gt(index)") Ex) $("ul li:gt(3)") | element로 선택되는 요소중 index보다 큰 순번의 요소목록(list) |
| :lt(index) | $("element:lt(index)") Ex) $("ul li:lt(3"") | element로 선택되는 요소중 index보다 작은 순번의 요소목록(list) |
| :empty | $("element:empty") Ex) $("div:empty) | element로 선택되는 요소중 내용이 없는 요소 |
| element:not(selector) | $("div:not(:empty)") | element로 선택되는 요소중 내용이 비어 있지 않은 요소 |
| :header | $(":header"); | H1, H2.. 와 같은 헤더 요소 |
| :animated | $(":animated") | 모든 animated 요소 |
| element :contains('text') | $("body :contains('영역')") | body내에 "영역"이라는 문자열을 포함하는 모든 요소. body가 빠지면, HTML, HEAD, SCRIPT등 모든 태그가 포함됨. |
| element :hidden | $("#div1 :hidden") | element에 포함된 hidden속성을 갖는 요소 |
| element:visible | $("#div1 :visible") | element에 포함된 |
| s1, s2, s3 | #("th, td") | s1이거나 s2이거나 s3에 해당하는 모든 요소 s1,s2,s3는 태그, ID, Class지정이 모두 가능함. |
| element[attribute] | $("#div1 a[href]") | element중 속성('attribute')을 갖는 모든 요소 |
| element[attribute=value] | $("#div1 a[href=#]") | element중 속성이 value인 모든 요소 |
| element[attribute!=value] | $("#div1 a[href!=#]") | element중 속성이 value가 아닌 모든 요소 element중 속성이 없는 것도 포함됨. |
| element[attribute$=value] | $("#div1 a[href$=com]") | element중 value로 끝나는 속성(attribute)를 갖는 요소 |
| element[attribute^=value] | $("#div1 a[href^=www]") | element중 value로 시작하는 속성(attribute)를 갖는 요소 |
| element :text | $("#div1 :text") | element에 포함된 요소중 type이 'text'인 모든 요소 |
| element :password | $("#div1 :password") | element에 포함된 요소중 type이 'password'인 모든 요소 |
| element :radio | $("#div1 :radio") | element에 포함된 요소중 type이 'radio'인 모든 요소 |
| element :checkbox | $("#div1 :checkbox") | element에 포함된 요소중 type이 "checkbox"인 모든 요소 |
| element :submit | $("#div1 :submit") | element에 포함된 요소중 type이 'submit'인 모든 요소 |
| element :reset | $("#div1 :reset") | element에 포함된 요소중 type이 'reset'인 모든 요소 |
| element :button | $("#div1 :button") | element에 포함된 요소중 type이 'button'인 모든 요소 |
| element :image | $("#div1 :image") | element에 포함된 요소중 type이'image'인 모든 요소 |
| element :file | $("#div1 :file") | element에 포함된 요소중 type이 'file'인 모든 요소 |
| element :enalbed | $("#div1 :enabled") | element에 포함된 요소중 상태가 enabled인 모든 요소 |
| element :disabled | $("#div1 :disabled") | element에 포함된 요소중 상태가 disabled인 모든 요소 |
| element :selected | $("#div1 :selected") | element에 포함된 요소중 selected속성이 true인 모든 요소 |
| element :checked | $("#div1 :checked") | element에 포함된 요소중 checked속성이 true인 모든 요소 |
출처: http://hjzzin.tistory.com/120 [말랑말랑하게 살아요.]
반응형
'IT > Javascript|Jquery' 카테고리의 다른 글
| Javascript 핵심 개념 알아보기 – JS Flow(스코프,컨텍스트) (2) | 2018.12.29 |
|---|---|
| Javascript 핵심 개념 알아보기 – JS Flow(기본형과 참조형) (0) | 2018.12.29 |
| html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까? (0) | 2018.05.31 |
| [JavaScript] 문자열, 배열 Cookie 저장하기 (0) | 2018.03.12 |
| prototype 이란 (0) | 2018.03.05 |