Rainbow
선택자 본문
기본 선택자
태그 선택자 | $("p") | 기본 태그를 선택합니다. |
클래스 선택자 | $(".class") | 클래스 태그를 선택합니다. |
아이디 선택자 | $("#id") | 아이디 태그를 선택합니다. |
그룹 선택자 | $("p, .class, #id") | 여러가지 태그를 선택합니다. |
전체 선택자 | $("*") | 전체 태그를 선택합니다. |
속성 선택 - 태그의 속성을 사용하여 선택하는 방법입니다.
[name|="value"] | $("li a[href|='web']") | 속성 중에 'web'과 같은 속성 값을 선택합니다. |
[name*="value"] | $("li a[href*='web']") | 속성 중에 'web'가 포함되어 있는 태그를 선택합니다. |
[name~="value"] | $("li a[href~='web']") | 속성 중에 'web'으로 시작하는 태그를 선택합니다. |
[name$="value"] | $("li a[href$='web']") | 속성 중에 'web'으로 끝나는 태그를 선택합니다. |
[name="value"] | $("li a[href='web']") | 속성 중에 'web'와 일치하는 속성 값을 선택합니다. |
[name!="value"] | $("li a[href!='web']") | 속성 중에 'web'와 일치하지 않는 태그를 선택합니다. |
[name^="value"] | $("li a[href^='web']") | 속성 중에 'web'로 시작하는 태그를 선택합니다. |
[name] | $("li a[href]") | 속성 중에 일치하는 속성을 선택합니다. |
[name="value"][name="value"] | $("li a[href][class]") | 속성 중에 'href' 속성과 'class' 속성이 모두 있는 태그를 선택합니다. |
<script>
$(".choice .off1").on("click", function(e)
{ e.preventDefault();
$(".list li a").removeClass("rLine"); });
$(".choice .btn1").on("click", function(e)
{ e.preventDefault();
$("li a[href|='webs']").addClass("rLine"); });
$(".choice .btn2").on("click", function(e)
{ e.preventDefault();
$("li a[href*='webs']").addClass("rLine"); });
$(".choice .btn3").on("click", function(e)
{ e.preventDefault();
$("li a[href~='webs']").addClass("rLine"); });
$(".choice .btn4").on("click", function(e)
{ e.preventDefault();
$("li a[href$='webs']").addClass("rLine"); });
$(".choice .btn5").on("click", function(e)
{ e.preventDefault();
$("li a[href='webs']").addClass("rLine"); });
$(".choice .btn6").on("click", function(e)
{ e.preventDefault();
$("li a[href!='webs']").addClass("rLine"); });
$(".choice .btn7").on("click", function(e)
{ e.preventDefault();
$("li a[href^='webs']").addClass("rLine"); });
$(".choice .btn8").on("click", function(e)
{ e.preventDefault();
$("li a[href]").addClass("rLine"); });
$(".choice .btn9").on("click", function(e)
{ e.preventDefault();
$("li a[class][id]").addClass("rLine"); });
</script>
계층 선택자
하위 선택자(Descendant Selector) | $("div p") | div 태그의 모든 자식 중 p 태그를 모두 선택합니다. |
자식 선택자(Child Selector) | $("div > p") | div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택합니다. |
형제 선택자(Next Adjacent Selector) | $("div + p") | div 태그의 인접한 형제 p 태그 중 첫번째 태그만 선택합니다. |
형제들 선택자(Next Siblings Selector) | $("div ~ p") | div 태그의 인접한 형제 p 태그를 모두 선택합니다. |
기본 필터 선택자
:animated | 선택된 집합에서 show, hide, slideDown, slideUp등의 애니메이션 태그를 선택합니다. |
:eq(index) | 선택된 태그들의 인덱스 번호를 통해 선택합니다. |
:gt(index) | 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 선택합니다. |
:lt(index) | 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 선택합니다. |
:header | 선택된 집합에서 제목 요소(h1~h6)들을 선택합니다. |
:first | 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다. |
:last | 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다. |
:odd | 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다. |
:even | 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다. |
:not() | 선택된 요소 중에서 현재 선택한 요소의 반대 요소를 선택합니다. |
:root() | 문서의 가장 기본 루트 요소를 선택합니다. |
:lang() | 선택된 요소 중에서 언어 속성 요소를 선택합니다. |
'web > jquery' 카테고리의 다른 글
[jQuery] .text() (0) | 2021.01.24 |
---|---|
[jQuery] .add() (0) | 2021.01.23 |
[jQuery] .attr() (0) | 2021.01.21 |
scrolltop() (0) | 2021.01.21 |
offset() (0) | 2021.01.17 |