선택자(selector) 란?
- 문서 내에서 원하는 엘리먼트를 쉽게 식별하고 이를 추출하기 위해서 jQuery에서 제공하는 기술이다.
기본 셀렉터
|
셀렉터 |
설명 |
|
:first |
페이지에서 처음으로 일치하는 엘리먼트를 반환한다. |
|
:last |
페이지에서 마지막으로 일치하는 엘리먼트를 반환한다. |
|
:even |
페이지 전체의 짝수 번째 엘리먼트를 반환한다. |
|
:odd |
페이지 전체의 홀수 번째 엘리먼트를 반환한다. |
|
:eq(n) |
n번째로 일치하는 엘리먼트를 반환한다. |
|
:gt(n) |
n번째 엘리먼트(포함하지 않음) 이후의 일치하는 엘리먼트를 반환한 다. |
|
:lt(n) |
n번째 엘리먼트(포함하지 않음) 이전의 일치하는 엘리먼트를 반환한 다. |
|
:first-child |
첫 번째 자식 엘리먼트를 반환한다. |
|
:last-child |
마지막 자식 엘리먼트를 반환한다. |
|
:only-child |
형제가 없는 모든 엘리먼트를 반환한다. |
|
:nth-child(n) |
n번째 자식 엘리먼트를 반환한다. |
|
:nth-child(even) |
짝수 자식 엘리먼트를 반환한다. |
|
:nth-child(old) |
홀수 자식 엘리먼트를 반환한다. |
|
:nth-child(Xn+Y) |
전달된 공식에 따른 n번째 자식 엘리먼트를 반환한다. Y는 0인 경우 생략 가능하다. |
위치기반 셀렉터
|
셀렉터 |
설명 |
|
:first |
페이지에서 처음으로 일치하는 엘리먼트를 반환한다. |
|
:last |
페이지에서 마지막으로 일치하는 엘리먼트를 반환한다. |
|
:even |
페이지 전체의 짝수 번째 엘리먼트를 반환한다. |
|
:odd |
페이지 전체의 홀수 번째 엘리먼트를 반환한다. |
|
:eq(n) |
n번째로 일치하는 엘리먼트를 반환한다. |
|
:gt(n) |
n번째 엘리먼트(포함하지 않음) 이후의 일치하는 엘리먼트를 반환한 다. |
|
:lt(n) |
n번째 엘리먼트(포함하지 않음) 이전의 일치하는 엘리먼트를 반환한 다. |
|
:first-child |
첫 번째 자식 엘리먼트를 반환한다. |
|
:last-child |
마지막 자식 엘리먼트를 반환한다. |
|
:only-child |
형제가 없는 모든 엘리먼트를 반환한다. |
|
:nth-child(n) |
n번째 자식 엘리먼트를 반환한다. |
|
:nth-child(even) |
짝수 자식 엘리먼트를 반환한다. |
|
:nth-child(old) |
홀수 자식 엘리먼트를 반환한다. |
|
:nth-child(Xn+Y) |
전달된 공식에 따른 n번째 자식 엘리먼트를 반환한다. Y는 0인 경우 생략 가능하다. |
jQuery정의 필터 셀렉터
|
셀렉터 |
설명 |
|
:animated |
현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다. |
|
:button |
모든 버튼을 선택한다(input[type=submit], input[type=reset], input[type=button], button). |
|
:checkbox |
체크박스 엘리먼트만 선택한다. |
|
:checked |
선택된 체크박스나 라디오 버튼만을 선택한다(CSS에서 지원). |
|
:contains(foo) |
텍스트 foo를 포함하는 엘리먼트만 선택한다. |
|
:disabled |
인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다(CSS에 서 지원). |
|
:enabled |
인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다(CSS에서 지원). |
|
:file |
모든 파일 엘리먼트를 선택한다(input[type=file]). |
|
:header |
헤더 엘리먼트만 선택한다. 예를 들어<h1>부터 <h6>까지의 엘리먼트를 선택한다. |
|
:hidden |
감춰진 엘리먼트만 선택한다. |
|
:image |
폼 이미지를 선택한다(input[type=image]). |
|
:input |
폼 엘리먼트만 선택한다(input, select, textarea, button). |
|
:not(filter) |
필터의 값을 반대로 변경한다. |
|
:parent |
빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘 리먼트를 선택한다. |
|
:password |
패스워드 엘리먼트만 선택한다(input[type=password]). |
|
:radio |
라디오 버튼 엘리먼트만 선택한다(input[type=radio]). |
|
:reset |
리셋 버튼을 선택한다(input[type=reset] 이나 button[type=reset]). |
|
:selected |
선택된 엘리만트만 선택한다. |
|
:submit |
전송 버튼을 선택한다(button[type=submit] 이나 input[type=submit]). |
|
:text |
텍스트 엘리먼트만 선택한다(input[type=text]). |
|
:visible |
보이는(visible) 엘리먼트만 선택한다. |
juqery 기초(예제)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> start jQuery </title>
<style>
div{width:100px; height:100px; background-color:#0FF;}
</style>
<!-- jQuery library -->
<script src="../jquery/jquery-1.8.3.min.js"></script>
<!-- 기본 문법 :
$() = jquery 와 같은 표현식(단축 표현식)
아래의 3가지는 같은 표현식
1) jquery(document).ready ( function() { ...... } );
2) jquery( function() { ....... } )
3) $( function() { ....... } )
-->
<script>
$(function() {
$("div").click(function(e) {
$(this).text("Hello World");
});
})
</script>
</head>
<body>
<div></div>
</body>
</html>
첨부된 코드 실행 순서
첨부
jquery-selector.war
기본 선택자(Basic Selector)
tag_selector.html
class_selector.html
id_selector.html
group_selector.html
계층 선택자(Hierarchy Selector)
descendant_selector.html
child_selector.html
Sibling_selector.html
Siblings_selector.html
속성 선택자(Attribute Selector)
attribute_selector.html
기본 필터 선택자(Basic Filter Selector)
eq_selector.htm
gt_selector.html
lt_selector.html
first_last_selector.html
even_odd_selector.html
not_selector.html
내용 필터 선택자(Content Filter Selector)
contains_selector.html
has_selector.html
empty_selector.html
parent_selector.html
가시성 필터 선택자(Visibility Filter Selector)
hidden_visible_selector.html
자식 요소 필터 선택자(Child Filter Selector)
Child_Filters.html
'jQuery' 카테고리의 다른 글
| Eclipse에서 jQuery 라이브러리(~.js) 에러(error) 표시 제거법 (0) | 2013.08.09 |
|---|---|
| jQuery DOM 탐색(traversing) (0) | 2013.08.09 |
| jQuery 이벤트 처리 (0) | 2013.08.09 |