'셀렉터'에 해당되는 글 1건

  1. [jQuery] jQuery 셀렉터 정리 2018.09.10

[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의 경우는 이벤트 리스너도 정리해 카피)




#07. 요소세트에 영향을 주는 조작

:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 add()

 

 

 andSelf(0

 

 

 children()

 

 

 filter()

 

 

 find()

 

 

 map()

 

 

 next()

 

 

 nextAll()

  

 not()

  

 parent()

  

 parents()

  

 prev()

  

 prevAll()

  

 siblings

  

 slice

  

 clone

  






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기