[ JQuery ] Selectors (선택자)

계층 선택자(selector)

ancestor descendant

: 조상(ancestor)엘리먼트의 자손(descendant)인 모든 descendant 엘리먼트를 선택

parent > child

: parent의 바로 아래 자식인 모든 child 엘리먼트를 선택

prev + next

: prev 엘리먼트 바로 다음의 형제인 next 엘리먼트를 선택

prev ~ sibling

: prev 엘리먼트 다음의 형제인 모든 sibling 엘리먼트를 선택

e.g.

// ancestor descendant
// form 태그 안의 input 태그 스타일 변경
$("form input").css("border", "2px solid red");

// prev > child
// 아이디가 main인 객체 아래의 모든 id 클래스 객체 스타일 변경
$("#main > .id").css("border", "3px dotted blue");

// prev + next
// label 태그 바로 아래 태그가 input인 모든 input 태그의 스타일 변경 및 value 값을 설정
$("label + input").css("color", "black").val("테스트!!!");
					:
<label>Name:</label>
<input name="name" />
<label>Email:</label>
<input name="email" />
<input name="none" />    <!--변화 없음-->

// prev ~ sibling
// 아이디가 prev 인 객체의 형제인 모든 div 태그의 스타일 변경
$("#prev ~ div").css("border", "2px groove blue");
					:
<div>div 1</div>    <!--변화 없음-->
<div id="prev">div 2</div>    <!--변화 없음-->
<div>div 3</div>
<div>div 4<div id="small">div 4-1</div></div>    <!-- 4-1은 변화 없음-->
<span>span</span>    <!--변화 없음-->
<div>div 5</div>

 

 

기본 필터 선택자(selector)

:first

: 페이지 처음 선택된 엘리먼트 선택

:last

: 페이지 마지막 선택된 엘리먼트 선택

:not(selector)

: 주어진 선택자와 반대의 모든 엘리먼트 선택

:even

: 페이지의 짝수 번째 엘리먼트 선택(인덱스는 0부터 시작)

:odd

: 페이지의 홀수 번째 엘리먼트 선택(인덱스는 0부터 시작)

:eq(index)

: 지정된 index 번째 엘리먼트 선택

:gt(index)

: 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트 선택

:lt(index)

: 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트 선택

:header

: 헤더(<h1> ~ <h6>) 엘리먼트 선택

:animated

: 현재 애니메이션이 적용되고 있는 엘리먼트 선택

e.g.

// 첫 번째 tr 태그 스타일 변경
$("tr:first").css("font-style", "italic");

// 마지막 tr 태그 스타일 변경
$("tr:last").css({"backgroundColor": "yellow", "fontWeight": "bolder"});

// checkbox 객체가 선택되지 않은 형제 태그인 span 태그의 스타일 변경
$("input:not(:checked) + span").css("background-color", "yellow");
			:

홍길동

이순신     

// 짝수행의 스타일 변경(인덱스는 0부터 시작)
$("tr:even").css("background-color", "#bbbbff");

// 홀수행의 스타일 변경(인덱스는 0부터 시작)
$("tr:odd").css("background-color", "#bbbbff");

// 2번째 인덱스의 td 태그의 스타일 변경(인덱스는 0부터 시작) - 하나의 td만 변경
$("td:eq(2)").css("text-decoration", "blink");

// 인덱스가 3보다 큰 td 태그 스타일 변경
$("td:gt(3)").css("text-decoration", "line-through");

// 인덱스가 4보다 작은 td 태그 스타일 변경
$("td:lt(4)").css("color", "red");

// h1, h2, h3 과 같은 헤더 태그 스타일 변경
$(":header").css({background:'#ccc', color:'blue'});

// 애니메이션이 동작하고 있는 것만 스타일 변경
			:
    
        $(document).ready(function(){
            $("#run").click(function(){
                $("div:animated").toggleClass("colored");
            });
            function animateIt(){
                $("#mover").slideToggle("slow", animateIt);
            }
            animateIt();
        });
    Run

 

 

 

내용 필터 선택자(selector)

:contains(text)

지정된 text 내용을 포함하는 엘리먼트 선택

:empty

자식을 가지지 않은 엘리먼트 선택

:has(selector)

지정된 selector와 일치되는 엘리먼트를 포함하는 엘리먼트 선택

:parent

빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택

e.g.

// b 태그 안의 text에 j가 포함된 text의 스타일 변경
$("b:contains('j')").css("background", "yellow");

// 내용이 없는 td 태그에 text를 추가하고 스타일 변경
$("td:empty").text("테스트!").css('background', 'rgb(255, 220, 200)');

// div 태그 안의 p 태그에 class 속성에 test 클래스 설정
$("div:has(p)").addClass("test");

// td 태그에 값이 존재하는 경우 애니메이션효과 부여
// (주어진 것이 부모인 것을 모두 받아온다. 비어있는 것은 포함 안함)
$("td:parent").fadeTo(1500, 0.3);

 

 

가시 필터 선택자(selector)

:hidden

감춰진(hidden) 엘리먼트 선택

:visible

보이는(visible) 엘리먼트 선택

상태 확인하는 방법

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

css 속성이 #myDiv{display: none;} 이러면 isVisible은 false, isHidden은 true

e.g.

// hidden 속성인 div 태그를 보이게 함
$("div:hidden").show(3000);
			:
<div style="display:none; width:70px; height:40px; background:#ee77ff; margin:5px; float:left;">
  테스트~
</div>

// 보이는 div 태그를 클릭 할 경우 스타일 변경
$("div:visible").click(function(){
  $(this).css("background", "yellow");
});

// hidden 속성인 경우 보이게 함
if($('#myDiv').is(':hidden'))
  $('#myDiv').show();

 

 

속성 필터 선택자(selector)

[attribute]

지정된 속성(attribute)를 가지는 엘리먼트 선택

[attribute = value]

지정된 속성(attribute)과 값(value)을 가지는 엘리먼트 선택

[attribute != value]

지정된 속성과 같지 않거나 지정된 속성값을 가지지 않는 엘리먼트 선택

[attribute ^= value]

지정한 값으로 시작하는 속성을 가진 엘리먼트 선택

[attribute $= value]

지정한 값으로 끝나는 속성을 가진 엘리먼트 선택

[attribute *= value]

지정한 값을 포함하는 속성을 가진 모든 엘리먼트 선택

[attributeFilter1][attributeFilter2][attributeFilterN]

지정한 속성 필터 선택자와 일치하는 모든 엘리먼트 선택

e.g.

// 버튼의 style 변경
$("input[type='button']").css("background", "yellow");
			:
<input type="button" value="클릭" />

// input 객체의 name 속성이 test 인 모든 input 객체 다음 객체의 text 를 변경
$("input[name='test']").next().text("테스트~");
			:
<input type="radio" name="test" value="1">
<span>name?</span>
<input type="radio" name="test" value="2">
<span>name?</span>
<input type="checkbox" name="ch" value="3">
<span>name?</span>     <!-- 변화 없음 -->

// input 객체의 name 속성이 test가 아닌 모든 input 객체 다음 객체의 text를 변경
$("input[name!='test']").next().text("안녕!");
			:
<input type="radio" name="test" value="1">
<span>name?</span>     <!-- 변화 없음 -->
<input type="radio" name="test" value="2">
<span>name?</span>     <!-- 변화 없음 -->
<input type="checkbox" name="ch" value="3">
<span>name?</span>

// input 객체의 name속성이 news로 시작하는 객체의 value 속성 값 설정
$("input[name^='news']").val("abc !");

// input 객체의 name 속성이 letter 로 끝나는 객체의 value 속성 값 설정
$("input[name$='letter']").val("a letter");

// input 객체의 name 속성이 man을 포함하는 모든 객체의 value 속성 값 설정
$("input[name*='man']").val("man !!!");

 

 

자식 필터 선택자(selector)

:nth-child(index/even/odd/equation)

N/짝수/홀수/수식에 따른 번째 자식 엘리먼트 선택

:first-child

첫 번째 자식 엘리먼트 선택

:last-child

마지막 자식 엘리먼트 선택

:only-child

형제가 없는 자식 엘리먼트 선택

// tr의 2번째 자식의 td태그 스타일 변경(인덱스는 1부터 시작) - 3번째 자식 열 전체
$("td:nth-child(3)").css("text-decoration", "blink");

 

 

폼 선택자(selector)

:input

모든 input, textarea, select, button 요소 선택

:text

text 타입의 모든 input 요소 선택

:password

password 타입의 모든 input 요소 선택

:radio

radio 타입의 모든 input 요소 선택

:checkbox

checkbox 타입의 모든 input 요소 선택

:submit

submit 타입의 모든 input 요소 선택

:image

image 타입의 모든 input 요소 선택

:reset

reset 타입의 모든 input 요소 선택

:button

모든 button 요소들 및 button 타입의 input 요소 선택

:file

file 타입의 모든 input 요소 선택

:hidden

hidden 상태인 모든 요소 선택

e.g.

// text 타입의 모든 input 요소의 스타일 변경
$('input:text').css('border', '1px solid blue');

// checked 속성과 selected 속성을 가진 항목 스타일 변경
$(":checked,:selected").css("border", "2px solid red");

 

 

폼 필터 선택자(selector)

:enabled

현재 enable 상태인 모든 요소 선택

:disabled

현재 disable 상태인 모든 요소 선택

:checked

체크 상태인 모든 요소 선택

:selected

선택된 모든 요소 선택