jQuery - 선택자
■ jQuery API Selectors
ο 개요
DOM의 요소(엘리먼트)를 선택
ο DOM(Document Object Model)
- HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원
- DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하기 위한 방법
- 브라우저별로 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성
ο 기본 셀렉터
- #id : 지정된 아이디를 가지는 엘리먼트와 일치하는 셀렉터.
- element : 모든 <element> 엘리먼트와 일치하는 셀렉터.(태그 등)
- .class : 지정된 클래스명을 가지는 요소를 선택
- * : 모든 엘리먼트를 선택 한다.
- selector1, selector2, ... selectorN : 각각의 지정된 셀렉터와 일치하는 엘리먼트 선택.
- 사용 예
// 모든 div 태그의 스타일 변경
$("div").css("border","3px solid red");
$("div").css({"backgroundColor": "yellow", "font-size": "9pt"});
// id가 myDiv인 객체의 스타일 변경
$("#myDiv").css("border","3px solid red");
// class 속성이 myClass인 객체의 스타일 변경
$(".myClass").css("border","3px solid red");
// 모든 엘리먼트의 스타일 변경
$("*").css("font-size","10pt");
// div, span, p 태그중 class 속성이 myClass인 스타일 변경
$("div,span,p.myClass").css("border","3px solid red");
ο 계층 실렉터
- ancestor descendant : 조상<ancestor> 엘리먼트의 자손(descendant)인 모든<descentant> 엘리먼트를 선택
- parent > child : <parent>의 바로 아래 자식인 모든 <child> 엘리먼트를 선택
- prev + next : <prev> 엘리먼트 바로 다음의 형재인 <next> 엘리먼트를 선택
- prev ~ sibling : <prev> 엘리먼트 다음의 형제인 모든 <sibling> 엘리먼트를 선택
- 사용예
// ancestor descendant -> form 태그 안의 input 태그 스타일 변경
$("form input").css("border", "2px dotted blue");
// parent > child : 아이디가 main인 객체 아래의 일단계의 모든 객체 스타일 변경
$("#main > *").css("border", "3px double red");
// prev + next -> label 태그 바로 아래 태그가 input인 모든 input 태그의 스타일 변경 및 value 값을 설정
$("label + input").css("color", "blue").val("테스트 !!!")
:
<label>Name:</label>
<input name="name" />
<label>Email:</label>
<input name="email" />
<input name="none" /> <!-- 변화 없음 --!>
// prev ~ sibling -> 아이디가 prev인 객체의 형제인 모든 div 태그의 스타일 변경
$("#prev ~ div").css("border", "3px groove blue");
:
<div>div 1</div> <!-- 변화 없음 --!>
<div id="prev">div 2</div> <!-- 변화 없음 --!>
<div>div 3</div>
<div>div 4<div id="small">div 4-1</div></div> <!-- 4-1은 변화 없음 --!>
<span>span</span> <!-- 변화 없음 --!>
<div>div 5</div>
ο 기본 필터 셀렉터
- :first : 페이지 처음 선택된 엘리먼트 선택
- :last : 페이지 마지막 선택된 엘리먼트 선택
- :not(selector) : 주어진 실렉터와 반대의 모든 엘리먼트 선택
- :even : 페이지의 짝수 번째 엘리먼트 선택(인덱스는 0부터 시작)
- :odd : 페이지의 홀수 번째 엘리먼트 선택(인덱스는 0부터 시작)
- :eq(index) : 지정된 index 번째의 엘리먼트 선택
- :gt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트 선택
- :lt(index) : 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트 선택
- :header : 헤더 <h1> ~ <h6> 엘리먼트 선택
- :animated : 현재 애니메이션이 적용되고 있는 엘리먼트 선택
- 사용 예
// 첫번째 tr 태그 스타일 변경
$("tr:first").css("font-style", "italic");
// 마지막 tr 태그 스타일 변경
$("tr:last").css({"backgroundColor": "yellow", "fontWeight": "bolder"});
// checkbox 객체가 선택되지 않은 형재 태그인 span 태그의 스타일 변경
$("input:not(:checked) + span").css("background-color", "yellow");
:
<input type="checkbox" name="a" />
<span>홍길동</span>
<input type="checkbox" name="b" checked="checked" />
<span>이순신</span> <!-- 변화 없음 --!>
// 짝수행의 스타일 변경(인덱스는 0부터 시작)
$("tr:even").css("background-color", "#bbbbff");
// 홀수행의 스타일 변경(인덱스는 0부터 시작)
$("tr:odd").css("background-color", "#bbbbff");
// 2번째 인덱스의 td 태그의 스타일 변경(인덱스는 0부터 시작) - 한번만 실행
$("td:eq(2)").css("text-decoration", "blink");
// 인덱스가 4보다 큰 td 태그 스타일 변경
$("td:gt(4)").css("text-decoration", "line-through");
// 인덱스가 4보다 작은 td 태그 스타일 변경
$("td:lt(4)").css("color", "red");
// h1, h2, h3과 같은 헤더 태그 스타일 변경
$(":header").css({ background:'#CCC', color:'blue' });
// 애니메이션이 동작하고 있는 것만 스타일 변경
:
<script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
});
</script>
<style>
div {background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left;}
div.colored {background:green;}
</style>
:
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
ο 내용 필터 셀렉터
- :contains(text) : 지정된 text 내용을 포함하는 엘리먼트 선택
- :empty : 자식을 가지지 않은 엘리먼트 선택
- :has(selector) : 지정된 selector와 일치되는 엘리먼트를 포함하는 엘리먼트 선택
- :parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택
- 사용예
// div 태그 안의 text에 Han이 포함된 text의 스타일 변경
$("div:contains('Han')").css("text-decoration", "underline");
// 내용이 없는 td 태그에 text를 추가하고 스타일 변경
$("td:empty").text("테스트 !!!").css('background', 'rgb(255,220,200)');
// div 태그 안의 p 태그에 class 속성에 test 클래스 설정
$("div:has(p)").addClass("test");
// td 태그에 값이 존재하는 경우 애니메이션효과 부여(주어진 것이 부모인 것을 모두 받아온다. 비어있는 것은 포함 안함)
$("td:parent").fadeTo(1500, 0.3);
ο 가시 필터 셀렉터
- :hidden : 감춰진(hidden) 엘리먼트 선택
- :visible : 보이는(visible) 엘리먼트 선택
- 사용예
// hidden 속성인 div 태그를 보이게 함
$("div:hidden").show(3000);
:
<div style="display:none;width:70px; height:40px; background:#ee77ff; margin:5px; float:left;">테스트 !!!</div>
// 보이는 div 태그를 클릭 할 경우 스타일 변경
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
ο 속성 필터 셀렉터
- [attribute] : 지정된 속성(attribute)를 가지는 엘리먼트 선택
- [attribute=value] : 지정된 속성(attribute)과 값(valu)을 가지는 엘리먼트 선택
- [attribute!=value] : 지정된 속성과 같지않거나 지정된 속성 값을 가지지않는 엘리먼트 선택
- [attribute^=value] : 지정한 값으로 시작하는 속성을 가진 엘리먼트 선택
- [attribute$=value] : 지정한 값으로 끝나는 속성을 가진 엘리먼트 선택
- [attribute*=value] : 지정한 값을 포함하는 속성을 가진 모든 엘리먼트 선택
- [attributeFilter1][attributeFilter2][attributeFilterN] : 지정한 속성 필터 셀럭터와 일치하는 모든 엘리먼트 선택
- 사용 예
// input 객체의 name 속성이 test인 모든 input 객체 다음 객체의 text를 변경
$("input[name='test']").next().text("테스트 !!!");
:
<input type="radio" name="test" value="1" />
<span>name?</span>
<input type="radio" name="test" value="2" />
<span>name?</span>
<input type="checkbox" name="ch" value="3" />
<span>man?</span>
// input 객체의 name 속성이 test가 아닌 모든 input 객체 다음 객체의 text를 변경
$("input[name!='test']").next().text("남자 ?");
:
<input type="radio" name="test" value="1" />
<span>name?</span>
<input type="radio" name="test" value="2" />
<span>name?</span>
<input type="checkbox" name="ch" value="3" />
<span>man?</span>
// input 객체의 name 속성이 news로 시작하는 객체의 value 속성 값 설정
$("input[name^='news']").val("abc !");
// input 객체의 name 속성이 letter로 끝나는 객체의 value 속성 값 설정
$("input[name$='letter']").val("a letter");
// input 객체의 name 속성이 man을 포함하는 모든 객체의 value 속성 값 설정
$("input[name*='man']").val("man !!!");
ο 자식 필터 셀렉터
- :nth-child(index/even/odd/equation) : N/짝수/홀수/수식에 따른 번째 자식 엘리먼트 선택
- :first-child : 첫 번째 자식 엘리먼트 선택
- :last-child : 마지막 자식 엘리먼트 선택
- :only-child : 동기(형제)가 없는 자식 엘리먼트 선택
ο 폼 셀렉터
- :input : 모든 input, textarea, select, button 요소 선택
- :text : text 타입의 모든 input 요소 선택
- :password : password 타입의 모든 input 요소 선택
- :radio : radio 타입의 모든 input 요소 선택
- :checkbox : checkbox 타입의 모든 input 요소 선택
- :submit : submit 타입의 모든 input 요소 선택
- :image : image 타입의 모든 input 요소 선택
- :reset : reset 타입의 모든 input 요소 선택
- :button 모든 button 요소들 및 button 타입의 input 요소 선택
- :file : file 타입의 모든 input 요소 선택
- :hidden : hidden 상태인 모든 요소 선택
ο 폼 필터 셀렉터
- :enabled : 현재 enable 상태인 모든 요소 선택
- :disabled : 현재 disable 상태인 모든 요소 선택
- :checked : 체크된 모든 요소 선택
- :selected : 선택된 모든 요소 선택
출처 - http://blog.daum.net/kitepc/550