728x90
선택자 사용하기
선택자를 사용하기 위해서는 문서 객체를 불러와야 합니다. 다음은 선택자를 사용하는 올바른 방법입니다.
[정상작동1]
<head>
...
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#txt").css("color","red");
});
</script>
</head>
<body>
<p id="txt">내용</p>
</body>[정상작동2]
<head>
...
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#txt").css("color","red");
});
</script>
</head>
<body>
<p id="txt">내용</p>
</body><body>영역에 문서 객체를 먼저 불러온 다음 선택자를 사용할 수있도록
위에 정상 적용 예제와 같은 방법으로 작성해야 합니다.
[잘못된 방법]
<head>
...
<script src="js/jquery.js"></script>
<script>
$("#txt").css("color","red");
</script>
</head>
<body>
<p id="txt">내용</p>
</body>
위와 같이 작성 하면 <body>가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서객체를 선택할 수 없습니다.
기본선택자
<body> 영역에 있는 문서 객체를 선택할수있는 선택자
| 구분 | 종류 | 사용법 | 설명 |
| 직접선택자 | 전체선택자 | $("*") | 모든 요소 선택 |
| 아이디선택자 | $("#아이디명") | id속성에 지정한 값을 가진 요소 선택 |
|
| 클래스선택자 | $(".클래스명") | class속성에 지정한 값을 가진 요소를 선택 |
|
| 요소선택자 | $("요소명") | 지정한요소명과 일치하는 요소들만 선택 |
|
| 그룹선택자 | $("선택1, 선택2, 선택3... 선택n") |
지정한요소들을 한번에 선택 | |
| 종속선택자 | $("p.txt_1") $("p#txt_1") |
<p>요소 중 class 값이 txt_1인 요소 또는 id값이 txt_1인 요소 선택 |
|
| 인접관계선택자 | 부모요소선택자 | $("요소선택").parent() | 선택한요소의 부모 요소를 선택 |
| 상위요소선택자 | $("요소선택").parent() | 선택한요소의 상위 요소를 모두 선택 |
|
| 가장 가까운 상위요소선택자 | $("요소선택").closset("div") | 선택한요소의 상위요소중 가장 가까운 <div>만 선택 |
|
| 하위요소선택자 | $("요소선택 하위 요소") | 선택한요소에서 지정한 하위요소를 선택 |
|
| 자식요소선택자 | $("요소선택>자식요소") | 선택한요소를 기준으로 자식관계에 지정한 요소만 선택 | |
| 자식요소들선택자 | $("요소선택").children() | 선택한요소의 모든자식요소를 선택 | |
| 형(이전)요소선택자 | $("요소선택").preAll() | 선택한요소의 바로 이전 요소 모두를 선택 |
|
| 지정 형(이전)요소들선택자 | $("요소선택").prevUtil("요소명") | 선택한요소부터 지정한요소의 이전요소까지 모두 선택 | |
| 동생(다음)요소선택자 | $("요소선택").next() $("요소선택+다음요소") |
선택한요소의 다음요소를 선택 | |
| 동생(다음)요소들선택자 | $("요소선택").nextAll() | 선택한요소의 다음요소 모두를 선택 |
|
| 지정 동생(다음)요소들선택자 | $("요소선택").nextUtil("h2") | 선택한요소부터 지정한요소의 다음요소까지 모두선택 | |
| 전체형제요소선택자 | $(".box_1").siblings() | class값이 box_1인 요소의 형제요소전체를 선택 |
탐색선택자
기본선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색해서 좀 더 정확하게 선택할수있습니다
위치탐색선택자
기본선택자로 선택한 요소는 배열에 담깁니다.
이때 배열의 인덱스를 사용하면 특정요소를 좀 더 정확하게 선택할수있습니다.
| 종류 | 사용법 | 설명 |
| $("요소선택:first") $("요소선택").first() |
$("li:first") $("li").first() |
전체 <li>요소 중 첫번째 요소만 선택 |
| $("요소선택:last") $("요소선택").last() |
$("li:last") $("li").last() |
전체 <li>요소 중 마지막 요소만 선택 |
| $("요소선택:odd") | $("li:odd") | <li>요소 무리 중 짝수번째(홀수 인덱스) 요소만 선택 |
| $("요소선택:even") | $("li:even") | <li>요소 무리 중 홀수번째(짝수 인덱스) 요소만 선택 |
| $("요소선택:first-of-type") | $("li:first-of-type") | <li>요소 무리 중 첫번째 요소만 선택 |
| $("요소선택:last-of-type") | $("li:last-of-type") | <li>요소 무리 중 마지막 요소만 선택 |
| $("요소선택:nth-child(숫자)") | $("li:nth-child(3)") | <li>요소 무리 중 세번째 요소만 선택 |
| $("요소선택:nth-child(숫자n)") | $("li:nth-child(3n)") | <li>요소 무리 중 3의 배수 번째에 있는 요소만 선택 |
| $("요소선택:nth-last-of-type(숫자)") | $("li:nth-last-of-type(2)") | <li>요소 무리 중 마지막 위치로 부터 두번째에 있는 요소만 선택 |
| $("요소선택:only-child") | $("li:only-child") | 부모요소내에 <li>요소가 1개뿐인 <li>요소만 선택 |
| $("요소선택:eq(index)") $("요소선택").eq(index) |
$("li:eq(2)") $("li").eq(2) |
<li>요소 중 인덱스2가 참조하는 요소를 불러옵니다 |
| $("요소선택:gt(index)") | $("li:gt(1)") | <li>요소 중 인덱스1보다 큰 인덱스가 참조하는 요소를 불러옵니다. |
| $("요소선택:lt(index)") | $("li:lt(1)") | <li>요소 중 인덱스1보다 작은 인덱스가 참조하는 요소를 불러옵니다. |
| $("요소선택").slice(index) | $("li").slice(2) | <li>요소 중 인덱스가 2부터 참조하는 요소를 불러옵니다. |
속성탐색선택자
선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자
| 종류 | 사용법 | 설명 |
| $("요소선택[속성]") | $("li[title]") | <li>요소 중 title 속성이 포함된 요소만 선택 |
| $("요소선택[속성=값]") | $("li[title='리스트']") | <li>요소 중 title 속성값이 '리스트'인 요소만 선택 |
| $("요소선택[속성^=텍스트]") | $("a[href^='http://']") | <li>요소 중 href 속성값이 'http://'로 시작하는 요소만 선택 |
| $("요소선택[속성$=텍스트]") | $("a[href$='.com']") | <li>요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 |
| $("요소선택[href*=텍스트]") | $("a[href*='easyspub']") | <li>요소 중 href 속성값 중에서 'easyspub'을 포함하는 요소만 선택 |
| $("요소선택:hidden") | $("li:hidden") | <li>요소 중 숨겨져있는 요소만 선택 |
| $("요소선택:visible") | $("li:visible") | <li>요소 중 보이는 요소만 선택 |
| $(":text") | $(":text") | <input> 요소 중 type 속성값이 "text"인 요소만 선택 |
| $(":selected") | $(":selected") | selected속성이 적용된 요소만 선택 |
| $(":checked") | $(":checked") | checked속성이 적용된 요소만 선택 |
콘텐츠탐색선택자
요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자
| 종류 | 사용법 | 설명 |
| $("요소 선택:contains(텍스트)") | $("li:contains('내용2')") | <li>요소중 '내용2'라는 텍스트를 포함하는 요소만 선택 |
| $("요소 선택").contents()" | $("p").contents()" | 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 |
| $("요소 선택:has(요소명)") $("요소 선택").has(요소명)" |
$("li:has('span')") $("li").has('span')" |
<li>요소중 <span>을 포함하는 요소만 선택 |
| $("요소 선택":not(:제외요소)") $("요소 선택").not(:제외요소)" |
$("li:not(:first)") $("li") |
<li>요소중 첫번째요소만 제외하고 선택 |
| $(요소선택).filter(필터요소) | $("li").filter(".list2") | <li>요소중 class값이 "list2"인요소만 선택 |
| $(요소 선택1).find(요소선택2) | $("li").find("strong") | <li>요소의 하위요소인 <strong>만 선택 |
| $("요소선택1").closet("요소선택") | $("strong").closet("div") | <strong>을감싸는 상위<div>요소중 가장 가까운 상위요소를 선택 |
| end() | $("li").children("a").end() | 필터링이 실행되기 이전의 요소인 <li> 가 선택 |
출처 : Do it ! 자바스크립트 제이쿼리입문 전면개정판 - 이지퍼블리싱
728x90
'STUDY > jQuery' 카테고리의 다른 글
| [jQuery] input 전화번호 하이픈 "-" 자동 처리 + 정규표현식 정리 (2) | 2023.02.02 |
|---|---|
| [jQuery] 제이쿼리 배열 관련 메서드 (5) | 2023.01.24 |
| [jQuery] 속성관리 .data()와 .attr()의 차이점 (0) | 2023.01.18 |
| [jQuery] attr() 와 prop() 의 차이점 - 속성과 프로퍼티 (0) | 2022.12.28 |
| [jQuery] 추가메서드 .append .prepend() .appendTo() .prepend() (0) | 2022.12.28 |