$(function(){
$(“셀렉터“).jQuery 명령
});
1. CSS 셀렉터들
1.1 태그셀렉터
예] ‘목록태그<li>의 css 컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li“).css(“color“,”blue“);
});
1.2 ID셀렉터, Class(클래스)셀렉터
예] ‘목록태그<li>중 id=”first”인 요소를 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li#first“).css(“color“,”blue“);
});
예] ‘목록태그<li>중 class=”first”인 요소를 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li.first“).css(“color“,”blue“);
});
1.3 자손셀렉터
포인트는 부모자식요소 사이를 한칸뛰우기
예] ‘class=”first”인 요소의 자손, <em>을 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“.first em“).css(“color“,”blue“);
});
1.4 유니버셜셀렉터
예] ‘목록태그<li>의 모든자손요소(*)들을 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li *“).css(“color“,”blue“);
});
1.5 그룹셀렉터
여러개의 셀렉터를 ,(콤마)로 지정
예] ‘id=”first”인 요소와 id=”second”인 요소를 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“#first, #second“).css(“color“,”blue“);
});
2. CSS2 셀렉터
2.1 자식셀렉터
예] ‘목록태그<li>의 자식요소중 <strong>태그를 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li > strong“).css(“color“,”blue“);
});
2.2 인접셀렉터
예] ‘id=”first”인 목록태그<li> 바로 다음에 오는 요소<li>를 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“#first + li“).css(“color“,”blue“);
});
2.3 first-child클래스
예] ‘처음 나오는 <li>요소를 찾아 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li:first-child“).css(“color“,”blue“);
});
3. CSS3셀렉터
3.1 간접셀렉터
특정 셀렉터 뒤에 있는 태그를 선택할 수 있다. 셀렉터와 태그사이 ~(틸드)로 연결한다.
예] ‘ id=”second”인 요소뒤의 나오는 <li>태그들의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“#second ~ li“).css(“color“,”blue“);
});
3.2 부정 수도클래스 (Negation pseudo-class)
셀렉터 안 태그 중 특정 조건을 제외한 태그를 지정할 수 있다.
셀렉터 뒤에 :not(…)을 붙이고 제외 조건을 명시한다.
예] ‘첫번째 <li>를 제외하고 <li>태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li:not(first-child)“).css(“color“,”blue“);
});
3.3 empty 수도클래스 (empty pseudo-class)
자식 태그나 텍스트를 포함하지 않는 태그를 선택할 수 있다.
셀렉터 뒤에 :empty를 붙인다.
예] ‘내용이 없는 <li>태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li:empty“).css(“color“,”blue“);
});
3.4 nth-child 수도클래스 (nth-child pseudo-class)
셀렉터의 태그 중 번호를 지정하여 태그를 지정할 수 있다.
짝수는 $(“li:nth-child(even)”), 홀수는 $(“li:nth-child(odd)”), 3의 배수면 $(“li:nth-child(3n)”)으로 지정할 수 있다.
예] ‘<li>태그중 두번째 <li>태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li:nth-child(2)“).css(“color“,”blue“);
});
3.5 last-child 수도클래스 (last-child pseudo-class)
특정 셀렉터 안에 가장 마지막 태그를 선택할 수 있다.
예] ‘<li>태그중 가장 마지막 <li>태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li:last-child“).css(“color“,”blue“);
});
3.6 only-child 수도클래스 (only-child pseudo-class)
셀렉터에 특정 태그가 한 개만 포함되어 있을 경우 선택할 수 있다.
예] ‘<li>태그 안에 <span>태그가 한 개만 포함하고 있는 경우, 그 <span>태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“li span:only-child“).css(“color“,”blue“);
});
4 CSS 속성 셀렉터
4.1 [attribite]
특정 속성을 가진 태그를 선택 할 수 있다.
예] ‘ id속성을 가진 태그들의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“[id]“).css(“color“,”blue“);
});
4.2 [attribite='value']
속성이 특정한 값을 가진 태그를 선택 할 수 있다.
예] ‘ title 속성값이 “img”인 태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“[title=img]“).css(“color“,”blue“);
});
4.3 [attribite!='value']
특정 속성이 특정한 값을 갖지 않는 태그를 선택 할 수 있다.
예] ‘ title 속성값이 “img”가 아닌 태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“[title=img]“).css(“color“,”blue“);
});
4.4 [attribite^='value']
특정 속성값이 특정 문자열로 시작되고 있는 태그를 선택 할 수 있다.
예] ‘ title 속성값이 “a”로 시작하는 태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“[title^='a']“).css(“color“,”blue“);
});
4.5 [attribite$='value']
특정 속성값이 특정 문자열로 끝나는 태그를 선택 할 수 있다.
예] ‘ title 속성값이 “z”로 끝나는 태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“[title$='z']“).css(“color“,”blue“);
});
4.6 [attribite*='value']
특정 문자열을 포함하고 있는 태그를 선택 할 수 있다.
예] ‘ title 속성의 값이 “ing”를 포함하고 있는 태그의 css컬러 속성값을 블루로 바꿔라’
$(function(){
$(“[title*='ing']“).css(“color“,”blue“);
});
5. 제이쿼리(jQuery) 자체 필터
제이쿼리(jQuery)에서는 CSS 셀렉터 이외에도 자체적으로 제공하는 셀렉터인 “필터”를 이용할 수 있다.
5.1 first 필터/ last 필터
셀렉터 안에서 첫 태그를 “first 필터”, 마지막 태그를 “last 필터”로 지정할 수 있다.
$(“li:first“).css(“color“,”blue“);
$(“li:last“).css(“color“,”blue“);
5.2 even 필터/ odd 필터
셀렉터 안에서 짝수 번째 태그를 “even필터”, 홀수 번째 태그를 “odd필터”로 지정할 수 있다.
$(“li:even“).css(“color“,”blue“);
$(“li:odd“).css(“color“,”blue“);
5.3 eq 필터/ gt 필터 / lt 필터
셀렉터 안에서 특정 순서의 태그를 “eq 필터”(equal), 특정 태그보다 앞의 태그를 “lt 필터”(less than), 뒤의 태그를 “gt필터”(greater than)로 선택할 수 있다.
$(“li:lt(1)“).css(“color“,”red“);
$(“li:eq(1)“).css(“color“,”green“);
$(“li:gt(1)“).css(“color“,”blue“);
5.4 header 필터
h1~h6까지의 heading 태그를 함께 선택할 수 있다.
$(“:header)“).css(“color“,”blue“);
5.5 contains 필터 / has 필터
“contains필터”는 특정 문자열이 포함되어 있는 태그를 “has필터”는 특정 태그가 포함되어 있는 태그를 선택할 수 있다.
$(“li:contains(‘동영상’)“).css(“color“,”blue“);
$(“li:has(em)“).css(“color“,”green“);
5.6 parent 필터
어떤 태그의 자식 태그 혹은 문자열을 포함하는 태그를 선택할 수 있는 empty 수도클래스와 반대되는 필터이다.
$(“li:parent“).css(“color“,”red“);
출처 : http://blog.naver.com/how2book?Redirect=Log&logNo=10129499123