top

선택자

기본 선택자
종류 선택자 jQuery javascript 설명
기본 선택자 태그 선택자 $("li") querySelector("li") querySelectorAll("li") 기본 태그를 선택합니다.
클래스 선택자 $(".class") querySelector(".class") 클래스를 선택합니다.
아이디 선택자 $("#id") getElementById("id") 아이디를 선택합니다.
그룹 선택자 $("#id, .class") - 여러개를 선택합니다.
전체 선택자 $("*") - 전체를 선택합니다.
계층 선택자 하위 선택자 $("div p") querySelector("div p") div 태그 모든 자식 중 p 태그를 모두 선택합니다.
자식 선택자 $("div > p") - div 태그 모든 자식 중 첫 번째 자식 p 태그만 선택합니다.
형제 선택자 $("div + p") - div 태그의 인접한 형제 p 태그 중 첫 번째 태그만 선택합니다.
형제들 선택자 $("div ~ p") - div 태그의 인접한 형제 p 태그 중 모든 형제 태그를 선택합니다.
속성 선택자 [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' 속성이 있는 요소를 선택합니다.
기본 필터 선택자 :animated $("div:animated") - 선택된 요소에서 애니메이션 요소를 선택합니다.
:eq() 👍🏻 $("li:eq(2)") - 선택한 요소에서 index 번호를 통해 요소를 선택합니다.
:gt() $("li:gt(2)") - 선택된 요소에서 인덱스 번호보다 큰 요소를 선택합니다.
:lt() $("li:lt(2)") - 선택된 요소에서 index 번호보다 작은 요소를 선택합니다.
:header $("div:header") - 선택된 요소에서 제목 요소(h1~h6)를 선택합니다.
:first $("div:first") - 선택된 요소에서 첫번째 요소를 선택합니다.
:last $("div:last") - 선택된 요소에서 마지막 요소를 선택합니다.
:odd $("div:odd") - 선택된 요소에서 홀수 번째 요소를 선택합니다.
:even $("div:even") - 선택된 요소에서 짝수 번째 요소를 선택합니다.
:not $("li:not(eq(3))") - 선택한 요소에서 현재 선택한 요소의 반대 요소를 선택합니다.
:root() $("div:root") - 문서의 가장 기본 루트 요소를 선택합니다.
:lang() $("div:lang(kr)") - 선택된 요소 중에선 언어 속성 요소를 선택합니다.
:target $("div:target") - 선택된 요소 중에서 타겟 요소를 선택합니다.
내용 필터 선택자 :contanis $("div:contanis('찾아라 비밀의 열쇠')") - 선택된 요소에서 일치하는 문자열 요소를 선택합니다.
:empty $("div:empty") - 선택된 요소에서 텍스트가 없는 요소를 선택합니다.
:has() 👍🏻 $("div:has(p)") - 선택된 요소에서 일치하는 요소를 선택합니다.
:parent $("div:parent") - 선택된 요소에서 텍스트가 있는 요소를 선택합니다.
보임 필터 선택자 :hidden $("div:hidden") - 선택된 요소에서 보이지 않는 요소를 선택합니다.
:visible $("div:visible") - 선택된 요소에서 보이는 요소를 선택합니다.
자식 요소 필터 선택자 :first-child $("[li]:first-child") - 선택된 요소에서 첫 번째 자식 요소를 선택합니다.
:first-of-type $("p:first-of-type") - 선택된 요소에서 첫 번째 자식 유형 요소를 선택합니다.
:last-child $("p:last-of-type") - 선택된 요소에서 마지막 번째 자식 유형 요소를 선택합니다.
:last-of-type $("p:last-of-type") - 선택된 요소에서 마지막 번째 자식 유형 요소를 선택합니다.
:nth-child 👍🏻 $("li:nth-child(2)") - 선택된 요소에서 인덱스 번호 요소를 선택합니다.
:last-child() $(li:nth-last-child(2)) - 선택된 요소에서 마지막 인덱스 번호 요소를 선택합니다.
:nth-of-type() $("li:nth--of-type(2)") - 선택된 요소에서 유형 인덱스 번호 요소를 선택합니다.
:nth-last-of-type() $("li:nth-last-of-type(2)") - 선택된 요소에서 마지막 유형 인덱스 번호 요소를 선택합니다.
:only-child() $(":only-child") - 선택된 요소에서 유형이 하나인 요소를 선택합니다.
:only-of-type() $(":only-of-type") - 선택된 요소에서 유형이 오직 하나인 요소를 선택합니다.
폼 선택자 :button $(":button") - 선택된 요소에서 버튼 요소를 선택합니다.
:checkbox $(":checkbox") - 선택된 요소에서 체크박스 요소를 선택합니다.
:checked $(":checked") - 선택된 요소에서 체크된 박스 요소를 선택합니다.
:disabled $(":disabled") - 선택된 요소에서 disabled된 박스 요소를 선택합니다.
:enabled $(":enabled") - 선택된 요소에서 enabled된 박스 요소를 선택합니다.
:focus $(":focus") - 선택된 요소에서 focus된 요소를 선택합니다.
:file $(":file") - 선택된 요소에서 file 업로드 요소를 선택합니다.
:image $(":image") - 선택된 요소에서 image 입력 양식 요소를 선택합니다.
:input $(":input") - 선택된 요소에서 입력 양식 요소를 선택합니다.
:password $(":password") - 선택된 요소에서 password 양식 요소를 선택합니다.
:radio $(":radio") - 선택된 요소에서 radio 버튼 요소를 선택합니다.
:reset $(":reset") - 선택된 요소에서 reset 버튼 요소를 선택합니다.
:selected $(":selected") - 선택된 요소에서 selected된 요소를 선택합니다.
:submit $(":submit") - 선택된 요소에서 전송 버튼 요소를 선택합니다.
:text $(":text") - 선택된 요소에서 텍스트 버튼 요소를 선택합니다.

01. 기본 선택자

리셋 클릭하면 클래스(.class)를 선택합니다. 클릭하면 아이디(#id)를 선택합니다. 클릭하면 기본(li) 태그를 선택합니다. 클릭하면 여러가지(.class, #id) 태그를 선택합니다. 클릭하면 전체 태그(*)를 선택합니다. 
{
    $(".reset").click(function () {
      $(".view1 *").removeClass("blue");
    });
    $(".btn1-1").click(function () {
      $(".view1 .class").addClass("blue");
    });

    $(".btn1-2").click(function () {
      $(".view1 #id").addClass("blue");
    });

    $(".btn1-3").click(function () {
      $(".view1 li").addClass("blue");
    });

    $(".btn1-4").click(function () {
      $(".view1 .class, .view1 #id").addClass("blue");
    });

    $(".btn1-5").click(function () {
      $(".view1 *").addClass("blue");
    });
}

01. 기본 선택자 - javascript

리셋 클릭하면 클래스(.class)를 선택합니다. 클릭하면 아이디(#id)를 선택합니다. 클릭하면 기본(li) 태그를 선택합니다. 
{
    const jreset1 = document.querySelector(".jreset1");
    const jbtn_1 = document.querySelector(".jbtn1-1");
    const jbtn_2 = document.querySelector(".jbtn1-2");
    const jbtn_3 = document.querySelector(".jbtn1-3");

    jreset1.addEventListener("click", function () {
        const liList = document.querySelectorAll(".jview1 li");

        liList.forEach(el => {
            el.classList.remove("red");
        });
    });

    jbtn_1.addEventListener("click", function () {
        document.querySelector(".j1_class").classList.add("red");
    });

    jbtn_2.addEventListener("click", function () {
        document.getElementById("j1_id").classList.add("red");
    });

    jbtn_3.addEventListener("click", function () {
        const liList = document.querySelectorAll(".jview1 li");

        //for문
        for (let i = 0; i ≶ liList.length; i++) {
            liList[i].classList.add("red");
        }
    });
}

02. 계층 선택자

div p p p p p p p p
리셋 클릭하면 $("div p") 선택합니다. 클릭하면 $("div > p") 선택합니다. 클릭하면 $("div + p") 선택합니다. 클릭하면 $("div ~ p") 선택합니다. 
{
    $(".reset2").click(function () {
        $(".s2 span").removeClass("blue");
    });

    $(".btn2-1").click(function () {
        $(".s2 span").addClass("blue");
    });

    $(".btn2-2").click(function () {
        $(".s2 > span").addClass("blue");
    });

    $(".btn2-3").click(function () {
        $(".s2 .select + span").addClass("blue");
    });

    $(".btn2-4").click(function () {
        $(".s2 .select ~ span").addClass("blue");
    });
}