[jQuery] Selector

Selector

문서 구조에서 원하는 HTML 노드를 선택하기 위해 Selector를 사용한다.

1. 기본 선택자(Basic)

$('h2')

웹 페이지에서 <h2> 태그를 모두 선택

$('.group')

웹 페이지에서 class 속성이 group인 것을 모두 선택

$('#main')

웹 페이지에서 id 속성이 "main"인 것을 선택

$('p, div, #nav')

웹 페이지에서 <p>, <div>, id 속성이 nav인 노드를 모두 선택

$('*')

웹 페이지에서 모든 노드를 선택

2. 계층 선택자(Hierarchy)

$('div#container li')

id 속성이 #container인 <div> 태그의 자손 태그중 <li> 태그를 모두 선택

$('div > p')

<div> 태그의 자식 태그 중 (자손태그는 포함하지 않음) <p> 태그를 선택

$('#first + li')

id 속성이 first인 노드를 찾은 후, 바로 그 다음 형제(li) 노드를 선택

<nav>

<li id="third"> Three </li>

</ul>

</nav>

$('second ~ li')

id 속성이 second인 노드를 선택한 것을 기준으로 다음에 오는 형제들을 모두 선택

단, 찾을 li는 모두 같은 부모를 두고 있는 형제의 관계인 것만 찾게 된다.

<nav>

<li id="third"> Three </li>

</ul>

</nav>

3. 속성 선택자(Attribute)

$("li a[href='page2']")

<li> 태그 안에 있는 <a> 태그의 href 속성 값이 'page2'와 일치하는 <a> 태그를 선택

$("li a[href^='http']")

<li> 태그 안의 <a> 태그의 href 속성 값이 "http"로 시작하는 <a> 태그를 선택

$("li a[href$='.com']")

<li> 태그 안의 <a> 태그의 href 속성 값이 ".com"로 끝나는 <a> 태그를 선택

$("[href*='2']")

<li> 태그 안의 <a> 태그의 href 속성 값에 '2'가 포함되어 있는 <a> 태그를 선택

$("img[src !='sample1.png']")

<img> 태그의 src 속성이 "sample1.png"와 일치하지 않는 이미지 태그를 선택

$("[src][alt]")

HTML 전체에서 src 속성과 alt 속성이 있는 모든 태그를 선택

$("[src='www.classloader.co.kr'][alt='사진2']")

HTML 전체에서 src 속성 값 'www.classloader.co,kr'과 alt 속성 값 '사진2'가 있는 모든 태그를 선택

4. 기본 필터 선택자(Basic Filter)

Filter 선택자에 사용되는 형식은 filter 선택자 앞에 :(클론)을 붙여 표현한다. filter 선택자는 선택자에 의해 선택된 집합 (jQuery Wrapper) 중에서 다양한 필터를 사용해 사용자의 조건에 맞는 태그를 다시 선택해준다.

즉, HTML 집합에서 선택자를 사용해 원하는 태그들을 jQuery 객체 집합(jQuery Wrapper)으로 모은 후, :filter를 통해 다시 걸러내는 작업을 한다.

선택자	기능
:animated	show, hide, slideDown, slideUp 등의 명령으로 현재 애니메이션되고 있는 태그를 찾아내는 필터이다.
:eq(index)	선택된 태그들을 인덱스 번호로 찾을 수 있는 선택자이다.
:gt(index)	선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그들을 반환한다.
:lt(index)	선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그들을 반환한다.
:header	h1, h2, h3와 같은 제목 요소들을 선택한다.
:first	선택된 집합 중에서 첫 번째 요소를 찾는 선택자이다.
:last	선택된 집합 중에서 가장 마지막 요소를 찾는 선택자이다.
:odd	선택된 집합 중에서 index를 기준으로 홀수인 요소를 찾는 선택자이다.
:even	선택된 집합 중에서 index를 기준으로 짝수인 요소를 선택하는 선택자이다.
:not()	부정형 선택자로, 현재 선택한 집합의 반대 집합을 선택한다.

:eq(), :it(). :gt(), :even, :odd는 모두 인덱스와 관련 있는 선택자이다. 같은 인덱스와 관련된 선택자는 찾고자 하는 태그들을 인덱스 값을 사용하여 찾는데, 이때에는 0부터 찾기 시작한다.

예를 들어 (myclass) 선택자로 찾은 태그가 10개라면 첫 번째 태그의 인덱스는 0이 되고, 여섯번째의 태그의 인덱스는 5가 되는 것이다.

$('li:eq(6)')

li 항목 중에서 index가 6인, 즉 일곱 번째 <li> 태그를 선택한다.

</ul>

</ul>

</div>

$('li:gt(5)')

li 항목 중에서 index가 5인 여섯 번째 <li> 태그보다 뒤에 있는 <li> 태그들을 모두 선택한다.

</ul>

</ul>

</div>

$('li:lt(3)')

li 항목 중에서 index가 3인 즉, 네번째 <li> 태그보다 앞에 있는 <li> 태그들을 모두 선택한다.

</ul>

</ul>

</div>

$('li:first, li:last')

<li> 태그 중에서 처음과 맨 마지막 노드를 선택한다.

</ul>

</ul>

</div>

$('li:even')

li 태그 중에서 짝수 번째 인덱스를 선택한다.

</ul>

</ul>

</div>

$('li:odd')

li 태그 중에서 홀수 번째 인덱스를 선택한다.

</ul>

</ul>

</div>

$('li:not(eq(7))')

<li> 태그 중에서 인덱스가 7인 것을 제외한 나머지를 선택한다. :not 선택자는 부정형 선택자라고 한다. ()안의 선택자에 의해 선택된 요소들의 반대, 즉 선택되지 않은 요소들만 선택한다.

</ul>

</ul>

</div>

5. 내용 필터 선택자(Content Filter)

HTML에서 컨텐츠라 함은 대표적으로 텍스트를 의미한다. 아래에 소개하는 선택자들을 HTML의 콘텐츠(주로 텍스트)에 관련된 것들이다. 찾고 싶은 텍스트를 가지는 노드를 선택할 수도 있고,

선택한 노드의 내용이 있는지의 여부도 알 수 있다.

선택자	기능
:contains()	()안의 텍스트와 일치하는 문자열이 요소의 내용 중에 있을 때에 그 요소를 반환한다.
:empty()	요소에 텍스트가 없을 대에 선택된다. enter버튼에 의해 개행이 되거나 공백이 있는 경우에는 빈 요소 로 인정하지 않는점에 주의하자.
:has()	:has(selector)의 요소 내부에서 찾고 싶은 태그를 후손 요소까지 모두 살펴본 후, 그 요소가 있으면 반 환해준다.
:parent()	이 선택자는 부모 노드를 의미하는 것으로 이해할 수도 있지만, 여기서는 :empty와 반대로 요소에 텍스트가 존재할 때에 선택된다.

$("li:contains('ap')")

<li> 태그가 가지고 있는 텍스트 중에서 'ap'가 있는 것을 선택한다.

<li> apple </li>

$("ul:has('li')")

<li> 태그를 가지고 있는 <ul> 요소들을 반환한다.

</ul>

$("li:empty").text("Hello")

아무 값도 없는 li를 선택한 후 "Hello"라고 적는다.

</ul>

<li>Hello</li>

</ul>

$("li:parent")

li 노드 중에서 텍스트나 공백 등을 포함한 콘텐츠가 있으면 선택한다.

<li>tiger</li>

</ul>

6. 보임 필터 선택자(Visibility Filter)

Visibility Filter 선택자는 화면에 보이지 않는 노드들을 찾아준다.

노드들을 아래 같은 몇 가지 원인에 의해 보이지 않게 된다.

- CSS display 속성 값이 none일 때

- <form> 요소 중에 type="hidden" 일 때

- 요소의 width와 height가 0일 때

- 부모 요소가 보이지 않거나 숨겨져 있을 때

참고로 visibility:hidden이나 opacity:0은 노드들의 위치에서 제거되지 않고 일정 공간을 차지하고 있다. 따라서 이 속성들은 :hidden 선택자에게 선택되지 않는다.

선택자	기능
:hidden	보이지 않는 노드를 선택한다.
:visible	보이는 노드를 선택한다.

<li style="display:none"> apple </li>

<li> banana </li>

<li> grape </li>

</ul>

<li style="display:none"> tiger </li>

</ul>

</div>

function showTime(){

$("li:hidden").show(1000)

}

setTimeout("showTime()",3000);

</script>

7. 자식 요소 필터 선택자(Child Filter)

자손 노드들을 이용하는 선택자이다. Child Filter 특징 중 하나는 부모 노드를 각각의 독립된 공간으로 본다는 것이다. 예를 들어 아래와 같은 DOM에서 li:first 선택자는 li를 선택할 때 DOM에서 모든 li를 선택한 후 그 중에서 첫 번째를 선택하는 것이고, li:first-child 선택자는 li를 선택할 때 DOM에서 같은 부모를 가지는 li를 따로 관리하여 각 부모의 첫 번째 자식을 선택하는 것이다.

선택자	기능
:first-child	첫 번째 자식 노드를 선택한다. :first-child는 :nth-child(1)로 대체할 수 있다.
:last-child	마지막 노드를 선택한다.
:nth-child()	:nth-child(index) index번째에 있는 자식 노드를 선택한다. :nth-child(even) 짝수 번째에 있는 자식 노드를 선택한다. :nth-child(odd) 홀수 번째에 있는 자식 노드를 선택한다. :nth-child(Nn) N번째마다 있는 자식 노드를 선택한다.
:only-child	자식 노드의 숫자가 오직 하나인 노드를 선택한다.

$("li:first-child")

<li> 태그 중에서 첫 번재 자식 노드를 선택하는 것이다. 여기서 흥미로운 점은 같은 부모를 가지는 <li> 태그들끼리 하나의 영역이 된다는 것이다. 즉, 영역에서 첫 번째 자식을 선택하는 것이다.

</ul>

</ul>

</div>

$("li:last-child")

<li> 태그 중에서 마지막 자식 노드를 선택한다.

first-child와 같이 부모를 가지는 <li> 태그들끼리 하나의 영역이 된다. 즉, 그 영역에서 마지막 자식을 선택하는 것이다.

</ul>

</ul>

</div>

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

이 선택자는 선택된 집합에서 n번째 자식을 찾는 다양한 방법을 제공한다. 여기서 주의할 점은 인덱스 값은 0부터가 아니라 1부터 시작한다는 것과 숫자뿐만 아니라 even, odd, equation이라는 문자열도 사용할 수 있다는 것이다.

$("li:nth-child(1)")

선택된 li 집합에서 첫 번째 노드들을 선택한다.

</ul>

</ul>

</div>

$("li:nth-child(even)")

선택된 li 집합에서 짝수 번째 노드들을 선택한다.

</ul>

</ul>

</div>

$("li:nth-child(odd)")

선택된 li 집합에서 홀수 번째 노들들을 선택한다.

</ul>

</ul>

</div>

$("li:nth-child(2n)")

선택된 li 집합에서 2배수(0,2,4,6...)번째 노드들을 선택한다. 이때 0은 $("li:nth-child(0)")이 되는데, 여기서는 아무것도 선택되지 않는다. 왜냐하면 nth-child(1)는 1을 첫번째 노드라고 생각하기 때문이다.

</ul>

</ul>

</div>

$("li:nth-child(2n+1)")

선택된 li 집합에서 2배수+1(1,3,5,7...)번째 노드들을 선택한다.

</ul>

</ul>

</div>

$("div p:only-child")

div 태그 내부의 <p> 태그가 오직 1개일 때에 <p> 태그를 선택한다.

8. 폼 선택자(Forms)

(1) 입력 양식 지정

:input	모든 입력 양식
:file	파일 업로드 양식
:hidden	숨겨진 입력 양식
:image	이미지 입력 양식
:password	암호 입력 양식
:radio	라디오 버튼 입력 양식
:reset	리셋 입력 양식
:submit	데이터 보내기 입력 양식
:text	텍스트 박스

(2 입력 양식의 현재 상태를 통해 지정

:enable	입력 양식의 현재 상태를 통해 지정
:disabled	사용할 수 있는 모든 노드
:checked	사용할 수 없는 모든 노드
:selected	체크된 모든 노드

<!doctype html>

<head>

<title>button demo</title>

<style>

textarea {

height: 35px;

}

div {

color: red;

}

fieldset {

margin: 0;

padding: 0;

border-width: 0;

}

.marked {

background-color: yellow;

border: 3px red solid;

}

</style>

$(document).ready(function(){

var input = $( ":button" ).addClass( "marked" );

var input = $( ":checkbox" ).addClass( "marked" );

var input = $( ":file" ).addClass( "marked" );

var input = $( ":image" ).addClass( "marked" );

var input = $( ":password" ).addClass( "marked" );

var input = $( ":radio" ).addClass( "marked" );

var input = $( ":reset" ).addClass( "marked" );

var input = $( ":submit" ).addClass( "marked" );

var input = $( ":text" ).addClass( "marked" );

$( "div" ).text( "For this type jQuery found " + input.length + "." );

// Prevent the form from submitting

$( "form" ).submit(function( event ) {

event.preventDefault();

});

</script>

</head>

<body>

<form>

<option>Option</option>

</select>

<button>Button</button>

</fieldset>

</form>

</body>

</html>

저작자표시

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Event (0)	2014.12.07
[jQuery] Attribute/CSS (0)	2014.12.07
[jQuery] DOM Manipulation (0)	2014.12.07
[jQuery] Traversing (0)	2014.12.07
[jQuery] Wrapper (0)	2014.12.07

'WebFont-end > jQuery' 카테고리의 다른 글

티스토리툴바