[JQuery] 필터 선택자(Filter Selector) 종류

📚 selectors 필터링 : DOM트리에서 1차 필터링
📚 Traversing : 2차 필터링

기본 선택자

선택자	설명
💡 $("*")	모든 요소
💡 $("tag명")	지정한 태그 요소
💡 $("#id")	지정한 id 요소
💡 $(".class")	지정한 class 요소
💡 $("[속성]")	지정한 속성 요소
💡 $("[tag1 > tag2]")	자식 요소
💡 $("[tag1 tag2]")	자손 요소
💡 $("[tag1 + tag2]")	바로 뒤 형제 요소
💡 $("[tag1 ~ tag2]")	바로 뒤 모든 형제 요소
💡 $("selector1 , selector2")	지정한 선택자들 요소

    <div>
        <p class="y">Selectors</p>
        <a href="http://naver.com" class="y">naver</a><br />
        <a href="https://daum.net" class="y">daum</a><br />
        <a href="https://google.com" class="z">google</a><br />
    </div>
    <script>

        // 💡  $("[속성명]")  속성 선택
        $("[class]").css("color", "black");
        $("[class='y']").css("color", "aqua"); // 클래스명이 y 인 요소
        $("a[href^='https']").css("background-color", "yellow");  // https 로 시작하는 요소
        $("a[href$='com']").css("color", "red"); // com 으로 끝나는 요소
    </script>

---

자식 선택자

선택자	설명
💡 :first-child	부모 기준으로 첫 번째 자식 요소
💡 :last-child	부모 기준으로 마지막 자식 요소
💡 :nth-child(n)	부모 기준으로 n번째 자식 요소(1부터 시작)
💡 :nth-child(2n)	부모 기준으로 짝수 번째 자식 요소(1부터 시작)
💡 :only-child	부모 기준으로 유일한 자식 요소

 

---

기본필터 선택자

선택자	설명
💡 :contains(문자열)	문자열을 포함하는 요소
💡 :has(선택자)	지정된 선택자가 자식요소로 존재하는 요소
💡 :empty	자식이 없는 요소
💡 :parent	자식이 있는 요소

🍀 다음과 같은 html 문서가 있을 때,

    <div>John Resig</div>
    <div>George Martin</div>
    <div>
      <p>HiJohn Resig</p>
    </div>
    <table border="1">
      <tr><td>TD #0</td><td></td></tr>
      <tr><td>TD #2</td><td></td></tr>
      <tr><td></td><td>TD#5</td></tr>
    </table>

---

입력양식 폼(Form) 필터 선택자

선택자	설명
💡 :button	button 요소 반환
💡 :checkbox	checkbox 요소 반환
💡 :checked	checkbox 요소 중에서 checked 된 요소 반환
💡 :disabled	비활성화된 모든 요소 반환
💡 :enabled	활성화된 모든 요소 반환
💡 :focus	현재 포커스가 있는 요소 반환
💡 :image	모든 이미지 요소 반환
💡 :input	모든 input, select, button, textarea 요소 반환
💡 :selected	선택된 모든 요소 반환
💡 :submit	submit 요소 반환
💡 :text	text 요소 반환
💡 :radio	radio 요소 반환
💡 :password	password 요소 반환
💡 :reset	reset 요소 반환

 

<select>
   <option>발라드</option>
   <option>힙합</option>
   <option>댄스</option>
</select>

<script>
    var n = $('select > option:selected').val();   // selected 값 찾기
</script>

🎀참고. JQuery선택자 모음