jQuery Selector

Table of contents

1. jQuery Selectors
   1. CSS Selectors
   2. jQuery Selectors

jQuery Selectors

CSS Selectors

CSS 선택자와 동일하게 사용

• tag name

  태그 이름으로 HTML 요소를 모두 선택

  자바스크립트의 getElementsByTagName() 메소드와 동일한 동작

    $("span").css("fontSize", "30px");
  

• id

  요소의 아이디(id)로 특정 HTML 요소를 선택

  자바스크립트의 getElementsById() 메소드와 동일한 동작

    $("#devkuma").css("fontSize", "30px");
  

• class

  클래스(class)로 같은 클래스의 HTML 요소를 모두 선택

  자바스크립트의 getElementsByClassName() 메소드와 동일한 동작

    $(".devkuma").css("fontSize", "30px");
  

• ect

  속성(attribute) 및 여러 css로 선택에 해당되는 특정 HTML 요소를 선택가능

  CSS 선택자 더보기

jQuery Selectors

CSS 선택자 뿐만 아니라 몇몇 비표준 선택자까지도 사용가능

비표준 선택자로 선택한 요소를 저장하거나 필터링할 수 있다.

• 선택 요소를 변수에 저장

    var coffees = $("li");
  

  이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장됨

  그러기에 요소가 저장된 이후에는 추가되거나 삭제된 요소들을 자동으로 갱신되지 않음

• 선택 요소를 필터링

    $("li:has(b)").append(" - 추천 메뉴입니다.");
    //문서 내의 모든 <li>요소 중에서 <b> 요소를 가지고 있는 요소만을 선택하여, 문장을 추가
  

  필터링에 사용할 수 있는 선택자들

  Syntax	example	Description
  :eq(n)	$(“ul li:eq(3)”)	인덱스가 n인 요소를 선택
  :gt(n)	$(“ul li:gt(3)”)	인덱스가 n보다 큰 요소를 모두 선택
  :lt(n)	$(“ul li:lt(3)”)	인덱스가 n보다 작은 요소를 모두 선택
  :even	$(“tr:even”)	인덱스가 짝수인 요소를 모두 선택
  :odd	$(“tr:odd”)	인덱스가 홀수인 요소를 모두 선택
  :first	$(“p:first”)	첫 번째 요소를 선택
  :last	$(“p:last”)	마지막 요소를 선택
  :animated	$(“:animated”)	애니메이션 효과가 실행 중인 요소를 모두 선택
  :header	$(“:header”)	<h1>부터 <h6>까지의 요소를 모두 선택
  :lang(lang)	$(“p:lang(ko)”)	지정한 언어의 요소를 모두 선택
  :not(selector)	$(“input:not(:empty)”)	지정한 선택자와 일치하지 않는 요소를 모두 선택
  :root	$(“:root”)	최상위 루트 요소를 선택
  target	$(“[href]”)	href가있는 모든 요소
  	$(“a[target=’_blank’]”)	타겟이 black인 모든 a요소
  	$(“a[target!=’_blank’]”)	타겟이 black이 아닌 모든 a요소
  :contains(txt)	$(“:contains(‘Hello’)”)	지정한 텍스트를 포함하는 요소를 모두 선택
  :has(selector)	$(“p:has(span)”)	지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택
  :empty	$(“:empty”)	자식 요소를 가지고 있지 않은 요소를 모두 선택
  :parent	$(“:parent”)	자식 요소를 가지고 있는 요소를 모두 선택

  input 요소 필터링

  Syntax	example	Description
  :button	$(“:button”)	속성값이 “button”인 요소를 모두 선택
  :checkbox	$(“:checkbox”)	속성값이 “checkbox”인 요소를 모두 선택
  :file	$(“:file”)	속성값이 “file”인 요소를 모두 선택한다.
  :image	$(“:image”)	속성값이 “image”인 요소를 모두 선택한다
  :password	$(“:password”)	속성값이 “password”인 요소를 모두 선택
  :radio	$(“:radio”)	속성값이 “radio”인 요소를 모두 선택
  :reset	$(“:reset”)	속성값이 “reset”인 요소를 모두 선택
  :submit	$(“:submit”)	속성값이 “submit”인 요소를 모두 선택
  :text	$(“:text”)	속성값이 “text”인 요소를 모두 선택
  :input	$(“:input”)	<input>, <textarea>, <select>, <button>요소를 모두 선택
  :checked	$(“:checked”)	“checkbox” 또는 “radio”인 요소 중 체크되어 있는 요소 모두 선택
  :selected	$(“:selected”)	<option>요소 중에서 선택된 요소를 모두 선택
  :focus	$(“:focus”)	현재 포커스가 가지고 있는 요소를 선택
  :disabled	$(“:disabled”)	비활성화되어있는 요소를 모두 선택
  :enabled	$(“:enabled”)	활성화되어있는 요소를 모두 선택