'셀렉터'에 해당되는 글 1건
[jQuery] jQuery 셀렉터 정리[jQuery] jQuery 셀렉터 정리
Posted at 2018. 9. 10. 13:21 | Posted in JavaScript & jQuery/jQuery■ jQuery 셀렉터 정리
#01. CSS 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
태그 셀렉터 |
jQuery("태그명") |
· 특정 태그 |
아이디(id) 셀렉터 |
jQuery("#ID명") |
· 특정 ID를 속성으로 갖는 태그 |
네임(name) 셀렉터 | jQuery("태그속성[name=Name명]") | · 특정 Name을 속성으로 갖는 태그 |
클래스(class) 셀렉터 |
jQuery(".Class명") |
· 특정 클래스를 속성으로 갖는 태그 |
자손 셀렉터 |
jQuery("태그1 태그2") |
· 특정 태그의 안쪽에 있는 태그 |
유니버셜 셀렉터 |
jQuery("*") |
· 전체 태그 |
그룹 셀렉터 |
jQuery("셀렉터1, 셀렉터2") |
· 복수의 셀렉터 |
#02. jQuery 독자 필터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
first 필터 |
jQuery("태그").first() |
· 지정한 태그의 첫태그 |
last 필터 |
jQuery("태그").last() |
· 지정한 태그의 마지막 태그 |
even 필터 |
jQuery("태그:even") |
· 지정한 태그의 짝수 번째 태그 |
odd 필터 |
jQuery("태그:odd") |
· 지정한 태그의 홀수 번째 태그 |
eq 필터 |
jQuery("태그").eq(번호), |
· 지정한 번호의 태그(번호는 0부터 시작) |
| gt 필터 |
jQuery("태그").gt(번호) |
· 지정한 태그보다 뒤의 태그(index + 1번째 요소) |
| lt 필터 | jQuery("태그").lt(번호) | · 지정한 태그보다 앞의 태그(index 미만의 요소) |
header 필터 | jQuery("태그:header") | · h1 ~ h6까지의 heading 태그 |
contatin 필터 | jQuery("태그:contatin(문자열)") | · 특정 문자열을 포함하고 있는 태그 |
has 필터 | jQuery("태그:has(태그2)") | · 특정 태그를 호함하고 있는 태그 |
parent 필터 | jQuery("태그").parent() | · 자식 태그 혹은 문자열을 포함하고 있는 태그 |
animated 필터 | jQuery("태그:animated") | · 애니메이션 중의 모든 요소를 취득 |
contains 필터 | jQuery("태그:contains(문자열)") | · 특정문자열을 포함한 요소를 취득 |
empty 필터 | jQuery("태그").empty() | · 특정 태그의 문자열을 삭제 |
#03. CSS2에서 추가된 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
자손 셀렉터 | jQuery("부모 태그명 자손 태그명") | · 부모 태그의 모든 자손 요소의 자손 태그명을 취득 |
자식 셀렉터 |
jQuery("부모 태그명 > 자식 태그명") |
· 부모 태그의 바로 밑에 자식 태그 |
인접 셀렉터 |
jQuery("태그1 + 태그2") |
· 특정 태그의 다음 태그 |
형제 셀렉터 | jQuery("태그1 ~ 태그2") | · 특정 태그의 형제 요소 태그2를 취득 |
first-child 유사클래스 |
jQuery("태그:first-child") |
· 동일 태그 안의 첫 태그 |
#04. CSS3에서 추가된 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
| 간접 셀렉터 |
jQuery("태그1 ~ 태그2") |
· 특정 태그의 뒤에 나타나는 태그 |
부정유사 클래스 |
jQuery("태그1").not(태그2) |
· 특정 태그 안에서 태그2를 제외한 태그 |
empty 클래스 |
jQuery("태그:empty") |
· 자식태그 혹은 문자열을 포함하지 않는 태그 |
nth-child 유사 클래스 |
jQuery("태그:nth-child(번호)") |
· 특정 태그 안에서 지정한 번호의 태그 |
last-child 유사 클래스 |
jQuery("태그:last-child") |
· 동일 태그안의 가장 마지막 태그 |
only-child 유사 클래스 |
jQuery("태그:only-child") |
· 특정 태그가 하나만 포함된 태그 |
#05. CSS의 속성 셀렉터
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
[attribute] |
jQuery("[속성명]") |
· 특정 속성을 가진 태그 |
[attribute = 'value'] |
jQuery("[속성명 = '값']") |
· 특정 속성이 지정한 값을 가진 태그 |
[attribute != 'value'] |
jQuery("태그명[속성명 != '값']") |
· 특정 속성이 지정한 값을 갖지 않는 태그 |
[attribute ^= 'value'] |
jQuery("태그명[속성명 ^= '값']") |
· 특정 속성이 지정한 값으로 시작되는 태그 |
[attribute $= 'value'] |
jQuery("[속성명 $= '값']") |
· 특정 속성이 지정한 값으로 끝나는 태그 |
[attribute *= 'value'] |
jQuery("[속성명 *= '값']") |
· 특정 속성이 지정한 값을 포함하고 있는 태그 |
[attributeFilter1] [attributeFilter2] | jQuery("[태그셀렉터1][태그셀렉터2") | · 복수 속성 셀렉터에 해당하는 태그 |
#06. 요소의 조작
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
append(c) 내부 |
jQuery("태그").append(c) |
· 요소 c를 현재 요소의 자식 요소 뒤에 추가 |
append(함수) 내부 |
jQuery("태그").append(함수) |
· 함수의 결과를 현재 요소의 자식 요소 뒤에 추가 ※ 함수는 인수로서 인덱스 번호, 현재의 자식 요소를 나타내는 HTML 문자열을 받아 추가해야 할 HTML 문자열을 돌려준다. |
prepend(c) 내부 |
jQuery("태그").prepend(c) |
· 요소 c를 현재 요소의 자식 요소 선두에 추가 |
prepend(함수) 내부 |
jQuery("태그").prepend(함수) |
· 함수의 결과를 현재 요소의 자식 요소 선두에 추가 ※ 함수는 인수로서 인덱스 번호, 현재의 자식 요소를 나타내는 HTML 문자열을 받아 추가해야 할 HTML 문자열을 돌려준다. |
appendTo(c) 내부 |
jQuery("태그").appendTo(c) |
· 현재 요소를 요소 c의 자식 요소 뒤에 추가(append의 역) |
prependTo(c) 내부 |
jQuery("태그").prependTo(c) |
· 특정 속성이 지정한 값을 포함하고 있는 태그 |
after(c) 외부 | jQuery("태그").after(c) | · 요소 c를 현재 요소의 뒤에 추가 |
after(함수) 외부 | jQuery("태그").after(함수) | · 함수 결과를 현재 요소의 뒤에 추가 ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할 HTML 문자열을 돌려준다. |
before(c) 외부 | jQuery("태그").after(c) | · 요소 c를 현재 요소의 앞에 추가 |
before(함수) 외부 | jQuery("태그").after(함수) | · 함수 결과를 현재 요소의 앞에 추가 ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할 HTML 문자열을 돌려준다. |
insertAfter(c) 랩 | jQuery("태그").insertAfter(c) | · 현재 요소를 c의 뒤에 추가(after의 역) |
insertBefore(c) 랩 | jQuery("태그").insertBefore(c) | · 현재 요소를 c의 앞에 추가(before의 역) |
wrap(html | elem) 랩 | · 현재 요소를 지정한 HTML 문자열 / 요소를 둘러싼다. | |
wrap(함수) 랩 | · 현재 요소를 함수의 결과로 둘러 싼다. | |
wrapAll(html | elem) 랩 | · 현재 요소 전체를 지정한 HTML 문자열 / 요소로 둘러싼다. | |
wraplnner(html | elem) 랩 | · 현재 요소의 내용을 함수의 결과로 둘러싼다. | |
unwrap() 랩 | · 현재 요소를 둘러싸고 있는 요소를 제거 | |
replaceWith(c) 치환외부 | · 현재 요소를 요소 c로 치환 | |
replaceWith(함수) 치환외부 | · 현재 요소를 함수의 결과로 치환 | |
replaceAll(c) | · 현재 요소로 요소 c를 치환 | |
empty() 삭제 | · 현재 요소의 안에 있는 모든 요소를 삭제 | |
remove([exp]) | · 현재 요소를 삭제(인수 exp로 필터링 가능) | |
detach([exp]) | · 현재 요소를 이벤트 리스너를 유지한 채로 파기 (인수 exp로 필터링 가능) | |
| clone([flag]) | · 현재 요소를 카피 (인수 flag가 true의 경우는 이벤트 리스너도 정리해 카피) |
:: 명칭 :: |
:: 서식 :: |
:: 지정 대상 :: |
add() |
|
|
andSelf(0 |
|
|
children() |
|
|
filter() |
|
|
find() |
|
|
map() |
|
|
| next() |
| |
nextAll() | ||
not() | ||
parent() | ||
parents() | ||
prev() | ||
prevAll() | ||
siblings | ||
slice | ||
clone |
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
| [jQuery] jQuery Ajax 전송 (0) | 2018.09.28 |
|---|---|
| [jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0) | 2018.09.17 |
| [jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1) | 2018.08.20 |
| [jQuery] 커스텀 팝업창 오픈하기 (0) | 2018.08.14 |
| [jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0) | 2018.08.09 |
