jQuery Selector (셀렉터)

Jquery 2016. 1. 22. 17:53


1. 셀렉터


셀렉터는 매우 좋은 기능이다. HTML문서에 있는 다양한 엘리먼트들 중 자신이 원하는 엘리먼트를 선택하는 기능이다.

기존에는 document.getElementById('ID') 같은 식으로 했었지만 길기도하고 치기도 좆같은 방식이었다.

jQuery는 $('셀렉터 문법')을 통해 간단하고 다양한 스타일의 엘리먼트들을 선택 할 수 있다. 

셀렉터로 얻은 엘리먼트들은 확장 집합이라고 하는데, 특수한 배열 형태의 객체로 반환이 된다. 이렇게 반환된 객체들은 

지원하는 함수들을 사용할 수 있게 된다.


자식 / 어트리뷰트 / 컨테이너 셀렉터

셀렉터 문법
문법 설명
*
모든 엘리먼트
E
태그 명이 E인 모든 엘리먼트
E F
E의 자손이면서 태그명이 F인 모든 엘리먼트
E>F
E의 바로 아래 자식이면서 태그 명이 F인 모든 엘리먼트
E+F
E의 형제 엘리먼트로 바로 다음에 오는 엘리먼트 F
E~F
E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F
E:has(F)
태그 명이 F인 자손을 하나 이상 가지는 태그 명이 E인 모든 엘리먼트
E.C
클래스 명 C를 가지는 태그 명이 E인 모든 엘리먼트. E의 생략은 *.C와 동일함
E#I
아이디가 I인 태그 명이 E인 엘리먼트. E의 생략은 *#I와 동일
E[A=V]
값이 V인 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A=V]
값이 V로 시작하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A$=V]
값이 V로 끝나는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A*=V]
값이 V를 포함하는 에트리뷰트 A를 가지는 태그 명이 E인 엘리먼트
E[A]
에트리뷰트 A를 가지는 태그 명이 E인 모든 엘리먼트


위치 셀렉터

셀렉터 문법
문법 설명
E:first
모든 엘리먼트 E 중에서 첫 번째인 엘리먼트
E:last
모든 엘리먼트 E 중에서 마지막인 엘리먼트
E:first-child
엘리먼트 E의 자식 엘리먼트 중에서 첫 번째인 엘리먼트
E:last-child
엘리먼트 E의 자식 엘리먼트 중에서 마지막인 엘리먼트
E:only-child
엘리먼트 E의 자식 엘리먼트 중에서 형제가 없는 엘리먼트
E:nth-child(n)
엘리먼트 E의 n번째 자식 엘리먼트
E:nth-child(even or odd)
엘리먼트 E의 홀수 or 짝수 자식 엘리먼트
E:even or E:odd
페이지 전체의 짝수 or 홀수 엘리먼트
E:eq(n)
태그 값이 E인 모든 엘리먼트 중에서 n번째로 일치하는 엘리먼트
E:gt(n)
태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트(포함 X) 이후의 엘리먼트
E:lt(n)
태그 값이 E인 모든 엘리먼트 중에서 n번째 엘리먼트 이전의 엘리먼트


jQuery 정의 셀렉터

셀렉터 문법
문법 설명
:animated
현재 애니매이션이 적용되고 있는 엘리먼트 선택
:button
모든 버튼 선택
:checkbox
체크 박스 엘리먼트만 선택 (input[type=checkbox])
:checked
선택된 체크 박스나 라디오 버튼만을 선택
:contains(foo)
텍스트 foo를 포함하는 엘리먼트만 선택
:disabled
인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택
:enabled
인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택
: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] or button[type=reset])
:selected
선택된 엘리먼트만 선택
:submit
전송 버튼을 선택 (input[type=submit] or button[type=submit])
:text
텍스트 엘리먼트만 선택 (input[type=text])
:visible
보이는 엘리먼트만 선택 


함수 정리

 
함수 명
함수 설명
엘리먼트
each(Function)
선택된 엘리먼트가 다수일 경우에 each 함수를 사용하여 차례대로 엘리먼트를 선택한다.
에트리뷰트 조작
attr(name, value)
선택된 엘리먼트의 name 에트리뷰트의 값을 value로 설정
 
attr(name)
선택된 엘리먼트의 name 에트리뷰트의 값을 얻어옴.
 
attr(Attributes)
선택된 엘리먼트를 프로퍼티(json)형태로 설정할 수 있음
 
val()
엘리먼트의 value 에트리뷰트 값을 얻어옴. attr("value")와 동일함.
 
val(content)
엘리먼트의 value 에트리뷰트 값을 content로 설정함.
에트리뷰트 제거
removeAttr(name)
해당 어트리뷰트의 값이 초기화 된다.
스타일 변경
addClass(names)
선택된 엘리먼트에 CSS Class를 적용함. 만약에 다수의 Class를 적용하려면 공백으로 구분하여 할당하면 됨.
 
removeClass(names)
선택된 엘리먼트들을 제거함.
 
toggleClass(names)
특정 Class를 적용하지 않은 상태면 적용하고, 적용한 상태면 제거함.
스타일 얻고 설정
css(name, value)
선택된 엘리먼트의 name 에트리뷰트 값을 value로 설정함.
 
css(properties)
{"name1:" value1", "name2": "value2", } 와 같은 형태로 설정함.
 
css(name)
특정 name의 프로퍼티의 스타일 값을 얻을 수 있음.
 
width(value)
선택된 엘리먼트의 width 값을 설정함.
 
height(value)
선택된 엘리먼트의 height 값을 설정함.
 
width()
선택된 엘리먼트의 width 값을 얻어옴.
 
height()
선택된 엘리먼트의 height 값을 얻어옴.
 
offset()
선택된 엘리먼트의 left 값과 top 값을 E.offset().leftE.offset().top과 같은 방법으로 얻을 수 있음.
엘리먼트 내용 설정
html()
선택된 엘리먼트 태그 내용을 얻을 수 있음.
 
html(content)
선택된 엘리먼트의 태그 내용을 content로 설정함.
 
text()
선택된 엘리먼트의 태그 내용 중 텍스트 값만 얻을 수 있음.
 
text(content)
선택된 엘리먼트의 태그 내용을 content로 설정함.
엘리먼트 복사&이동
append(content)
선택된 엘리먼트의 내용 마지막에 새로운 content를 추가함.
 
appendTo(target)
선택된 엘리먼트가 단일이면 target으로 이동시키고 다수라면 복사됨.
 
prepend(content)
append와 달리 앞으로 추가함
 
prependTo(target)
appendTo와 달리 앞으로 복사 또는 이동함
 
before(),
insertBefore()
엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 추가함.
 
after(),
insertAfter()
엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 추가함
엘리먼트 감싸기
wrap(wrapper)
매개 변수로는 String과 엘리먼트 타입이 올 수 있으며, "<div class='hello'></div>" 형태로 매개 변수 값을 넘기면 됨.
 
wrapAll(wrapper)
선택된 모든 엘리먼트를 wrapper로 감쌈
엘리먼트 제거
remove()
페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제함.
 
empty()
일치하는 집합의 모든 엘리먼트의 Content를 제거함.
엘리먼트 복사
clone(copyHandlers)
일반적으로 엘리먼트를 복사한 확장 집합을 만들면 이들은 DOM 어딘가에 덧붙일 수 있음


함수 정리2

 
함수 명
함수 설명
확장 집합 크기 얻기
size()
해당 엘리먼트의 개수를 반환한다.
확장 집합에서 특정 엘리먼트 얻기
get(index)
확장 집합에서 index번째의 엘리먼트를 가져온다. (배열과 유사함)
 
get()
모든 확장 엘리먼트를 일반 자바스크립트 배열로 얻는다.
 
index(element)
확장 집합에서 특정 엘리먼트의 index 값을 가져온다.
확장 집합 재편성 하기
add(element)
기존의 확장 집합에 다른 엘리먼트를 추가한다.
 
not(expression)
기존의 확장 집합에서 expression와 일치하는 엘리먼트를 제외시킨다.
 
filter(expression)
기존의 확장 집합에서 expression와 일치하는 엘리먼트만 가져온다.
확장 집합의 부분 집합 얻기
slice(begin, end)
기존의 확장 집합에서 begin번째부터 end번째까지의 엘리먼트만 가져온다.
확장 집합 관련 그 밖에 함수들
find(selector)
기존의 확장 집합에서 selector와 일치하는 엘리먼트들로 새로운 확장 집합을 생성한다.
 
is(selector)
기존의 확장 집합에서 selector와 일치하는 엘리먼트가 있다면 true, 없다면 false를 반환한다.
jQuery 체인 관리하기
end()
이전 확장 집합을 반환한다.
 
andSelf()
커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다
관계를 이용하여 확장 집합 얻기
 
아래 표 참조.


관계를 이용하여 확장 집합 얻기와 관련된 함수 정리

함수 명
설명
children()
확장 엘리먼트의 고유한 자식으로 구성된 확장 집합 반환한다.
contents()
엘리먼트의 콘텐츠로 구성된 확장 집합을 반환한다.
next()
확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다.
nextAll()
확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다.
parent()
바로 위 부모로 구성된 확장 집합을 반환한다.
parents()
바로 위 부모와 모든 조상이 포함하는 확장 집합을 반환한다.
prev()
바로 이전에 나오는 형제로 구성된 확장 집합을 반환한다.
prevAll()
이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다.
siblings()
확장 엘리먼트 내에 모든 형제를 포함한 확장 집합을 반환한다.


'Jquery' 카테고리의 다른 글

jQuery Selector (셀렉터)  (0) 2016.01.22
jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기  (0) 2015.12.16
attr() 와 prop() 비교  (0) 2015.12.16
jQuery와 DOM 첫걸음  (0) 2015.10.20
[08]JqueryBasic  (0) 2014.11.14
[07]JqueryBasic  (0) 2014.11.14
Posted by 양형

댓글을 달아 주세요

테스트 코드를 작성 하다보면 가장 먼저 접하게 되는 것은 테스트에 대한 결과 데이터 확인 입니다. 이 같은 확인은 Junit에서 작성 할 수 있게 도와주며 테스트 코드를 만들시 거의 필수적으로 만들어야 합니다.

1. assertThat이란?
assert 메소드는 많은 종류를 가지고 있습니다. 그 종류들을 하나씩 설명을 하지 못하지만 메소드 명으로만으로도 대충 짐작하시면서 사용 할 수 있기때문에 넘기겠습니다. 
 assertThat은 기존의 assert방식에서 나중에 나온 메소드로 자유롭게 검증 할 수 있는 조건을 만들어 준다는 점에서 차이가 나게 됩니다.

2. assertThat 사용


간단한 assertThat 활용입니다. aasetThat(  검사할 대상데이터 ,  Matcher   ) 이런 구조로 되어 있습니다. 
 여기서 is() 메소드가 생소 할 수 있는대요 바로 equals와 비슷한 역활을 수행하게 됩니다. 첫번째 인자값과 같으면 테스트 통과 하게 됩니다.

Posted by 양형

댓글을 달아 주세요

리눅스 서버를 한글로 설치하고 SecureCRT를 사용하여 접속해 보면 한글이 깨져보입니다.

사용자 삽입 이미지


Posted by 양형

댓글을 달아 주세요