제이쿼리 선택자
제이쿼리 선택자란 DOM 안의 태그 요소를 선택할 때 사용하는 선택자이다.
종류로는 크게 '직접 선택자'와 '인접 관계 선택자'로 나뉜다.
제이쿼리에서 태그를 선택할 때에는 $(" ")안에 선택자명을 쓴다.
직접선택자
전체 선택자, id 선택자, class 선택자, 그룹 선택자, 종속 선택자와 같이 태그를 직접 선택하는 선택자이다.
| 직접 선택자 기본형 | |
| $("*") | 전체선택자 |
| $("#아이디명") | 아이디 선택자 |
| $(".클래스명") | 클래스 선택자 |
| $("태그1, 태그2") | 그룹 선택자 |
| $("태그.클래스명") or $("태그#아이디명") |
종속 선택자 |
인접 관계 선택자
인접 관계 선택자는 직접 선택자로 요소를 먼저 선택한 뒤 그와 가까이 있는 요소를 선택할 때 사용한다.
선택한 요소를 감싸고 있는 바로 윗계층 요소는 부모요소(parent), 그 위로 부모의 부모처럼 상위에 있는 요소를 상위(closest) 요소라고 한다.
부모요소의 바로 아랫계층에 들어있는 요소들은 자식(children)요소이다.
같은 부모태그 안에서 바로 위에 있는 태그는 형 요소(prev), 아래에 위치한 태그를 동생요소(next)라고 한다.
인접관계 선택자는 메서드의 형태로 쓰인다.
// 기본형
$("기준태그명").closest() // 기준태그의 상위요소를 선택할 때
$("기준태그명").parent() // 기준태그의 부모요소를 선택할 때
$("기준태그명").children() // 기준태그의 자식요소를 선택할 때
%("기준태그명").prev() // 기준태그의 형요소를 선택할 때
%("기준태그명").next() // 기준태그의 동생요소를 선택할 때
1. 부모요소 선택자
부모요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택한다.
// 기본형
$("기준태그명").parent()2. 상위 요소 선택자
상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 특정 요소를 선택할 때 사용한다.
// 기본형(1): 기준요소의 상위 요소를 모두 선택한다.
$("기준요소").parents()
// 기본형(2) : 기준요소의 상위 요소 중 특정 요소를 선택한다.
$("기준요소").parents("요소 선택")3. 가장 가까운 상위 요소 선택자
선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 .closest()메서드를 사용한다.
// 기본형
$("기준요소").closest("요소선택")4. 하위요소 선택자
하위 요소 선택자는 기준으로 선택한 요소의 하위 요소만 선택한다. css에서 '후속'요소를 의미한다.
띄어쓰기로 구분한다.
// 기본형
$("요소선택1 요소선택2")5. 자식요소 선택자
자식요소 선택자는 선택한 부모 요소를 기준으로 지정한 자식요소를 선택할 때 사용한다.
css에서 '자손'요소와 비슷한 개념을 갖는다.
//기본형(1)
$("부모요소 > 자식요소")
//기본형(2) : 부모안의 특정 자식요소를 1개 선택한다.
$("부모요소").children("자식요소")
//기본형(3) : 부모요소 안에 있는 모든 자식요소를 선택한다.
$("부모요소").children()6. 형(prev)요소, 동생(next)요소 선택자
형요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택하고 동생요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택한다.
//기본형(1) : 기준요소의 바로 위나 아래에 있는 요소 1개를 선택한다.
$("기준요소").prev() // 형 요소
$("기준요소").next() // 동생 요소
//기본형(2) : 기준요소의 바로 다음에 오는 요소 1개를 선택한다.
$("기준요소 + 요소선택") // 동생 요소7. 전체 형요소, 전체 동생요소 선택자
전체 형, 동생 요소 선택자는 선택한 요소를 기준으로 위에 있는 모든 형 요소를 선택하거나 아래에 있는 모든 동생 요소를 선택할 때 사용한다.
//기본형
$("기준요소").prevAll()
$("기준요소").nextAll()8. 전체 형제 요소 선택자
전체 형제 요소 선택자는 선택한 요소를 기준으로 모든 형제 요소들을 선택할 때 사용한다.
단, 기준이 되는 요소에는 적용되지 않는다.
// 기본형
$("기준요소").siblings()9. 범위 제한 형, 동생 요소 선택자
선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 동생요소를 선택할 때 사용한다.
// 기본형
$("기준요소").prevUntill('범위 제한 요소 선택')
$("기준요소").nextUntill('범위 제한 요소 선택')
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
제이쿼리 탐색 선택자 ★
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색하여 더 정확하게 선택할 수 있다.
대표적인 탐색 선택자에는 배열의 index를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다.
이 외에도 컨텐츠의 포함 여부로 다시 선택할 수 있는 '컨텐츠 탐색 선택자'와 '필터링 선택자'도 있다.
위치 탐색 선택자 ★
기본 선택자로 태그요소를 선택하면 이 요소들은 배열에 담긴다.
이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있다.
1. first / last 선택자
first 선택자는 선택된 요소 중 첫번째 요소만 선택하고, last 선택자는 선택된 요소 중 마지막 요소만 선택한다.
// 기본형(1) : 단순하게 요소를 선택하고 싶을 때 사용
$("기준요소:first")
$("기준요소:last")
// 기본형(2) : 요소를 선택하여 기능을 넣고 싶을 때 사용
$("기준요소").first()
$("기준요소").last()2. even/odd 선택자
even 선택자는 선택한 요소 중 홀수번째에 위치한 요소를 선택하고, odd 선택자는 선택한 요소 중 짝수번째에 위치한 요소를 선택할 때 사용한다.
// 기본형
$("기준요소:even") : 홀수번째(짝수 인덱스)
$("기준요소:odd") : 짝수 번째(홀수 인덱스)See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
3. eq(index), lt(index), gt(index) 탐색 선택자
eq 탐색자는 선택한 요소 중 지정한 인덱스가 참조하고 있는 요소만 선택한다.
lt 탐색자는 선택한 요소 중 지정한 인덱스보다 작은(less than)인덱스를 참조하는 요소만 선택한다.
gt 탐색자는 선택한 요소 중 지정한 인덱스보다 큰(greater than)인덱스를 참조하는 요소만 선택한다.
// eq 기본형
$("요소:eq(index)")
$("요소"):eq(index)
// lt 기본형
$("요소:lt(index)")
// gt 기본형
$("요소:gt(index)")4. fitst-of-type / last-of-type 선택자
선택한 요소의 무리 중 첫 번째 요소만 선택하거나 마지막 요소를 선택할 때 사용한다.
// 기본형
$("요소:first-of-type")
$("요소:last-of-type")5. nth-child(숫자n) / nth-last-child(숫자) / nth-of-type(숫자) / nth-last-of-type(숫자)
nth-child(숫자n)는 선택한 요소 무리 중 지정한 숫자 번째에 있는 요소를 선택할 때 사용한다. 숫자 뒤에 n이 붙으면 '배수'를 의미한다. 2n = 2의 배수 = 짝수 nth-last-of-type(숫자)는 뒤에서 해당 숫자 번째의 요소를 선택할 때 사용한다.
// 기본형
$("요소:nth-child(숫자n)")
$("요소:nth-last-child(숫자n))
$("요소:nth-of-type(숫자n)")
$("요소:nth-last-of-type(숫자n))6. only-child
부모요소에게 자식요소가 하나일 때 선택하는 선택자이다.
// 기본형
$("요소:only-child")7. slice 선택자
slice 선택자는 선택한 요소의 지정 구간 인덱스의 요소를 선택한다.
slice는 시작 인덱스 번호부터 끝나는 인덱스의 바로 앞번호의 인덱스까지의 요소를 반환한다.
ex. slice(0, 3) → 0, 1, 2
// 기본형
$("요소").slice(start index, end index)See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
속성 탐색 선택자 ★★★
속성 탐색 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함여부를 따져 요소를 선택하는 선택자이다.
예를 들어 이미지 태그 중 경로가 ./img/~~~.jpg와 일치하는 요소가 있는지 찾을 때 사용한다.
1. 속성과 값에 따른 선택자
선택한 요소 중 지정한 속성과 일치하는 속성이 있는지 없는지 포함여부를 따져 요소를 선택한다.
// 기본형(1) : 선택한 요소 중 지정한 속성명이 있는 요소만 선택한다.
$('요소[속성명]')
// 기본형(2) : 선택한 요소 중 지정한 속성명과 값이 전부 일치하는 요소를 선택한다.
$('요소[속성명 = 속성값]')
// 기본형(3) : 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택한다. 단, 명시한 값은 한 단어로 일치해야한다.
$('요소[속성명 ^= 속성값]')
// 기본형(4) : 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택한다. 단, 명시한 값은 한 단어로 일치해야한다.
$('요소[속성명 $= 속성값]')
// 기본형(5) : 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택한다. 명시한 값의 단위가 단어가 아니더라도 해당하는 글자가 포함되어 있으면 위치와 관계 없이 선택한다.
$('요소[속성명 *= 속성값]')
// 기본형(6) : input 태그 중 type 속성 값이 일치하는 요소만 선택한다. type 부분에는 text, password 같은 타입종류가 들어간다.
$(':type 속성값')2. 속성 상태에 따른 선택자
속성 상태에 따른 선택자는 선택한 요소 중 속성 상태에 따라 요소를 선택할 수 있다.
// 기본형(1) : 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택한다.
$('요소:visible')
$('요소:hidden')
// 기본형(2) : select 태그의 option 중 현재 선택된 요소만 선택한다.
$(':selected')
// 기본형(3) : checkbox 또는 radio 버튼 요소 중 체크된 요소만 선택한다.
$(':checked')See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
컨텐츠 탐색 선택자
컨텐츠 탐색 선택자는 요소 또는 속성의 포함 여부에 따라서 특정 요소를 선택하는 선택자이다.
1. contains() / contents() / has() / not() / end() 선택자
contains() 선택자는 선택한 요소 중 지정한 텍스트를 포함하는 요소만 선택하고,
contents() 선택자는 선택한 요소의 하위 요소 중 자손의 텍스트와 태그 노드를 선택한다.
has() 선택자는 선택한 요소 중 지정한 태그를 포함하는 요소만 선택하고,
not() 선택자는 선택한 요소 중 지정한 태그만 제외하고 선택한다.
end() 선택자는 필터링 되기 이전 선택자를 다시 선택한다.
end() 선택자는 child나 eq 등 탐색 선택자가 나온 뒤 end를 쓰게 되면 바로 앞에 쓴 탐색선택자를 취소해주고 그 이전의 요소를 선택해준다.
// 기본형
$('요소:contains(텍스트)')
$('요소').contents()
$('요소:has(요소명)') 또는 $('요소').has()
$('요소:not(요소명)') 또는 $('요소').not()
$('요소').탐색선택자().end()2. find() / filter() 선택자
find() 선택자는 선택한 하위 요소 중 find로 필터링한 요소만 선택한다.
filter() 선택자는 선택한 요소 중에서 filter()로 필터링한 요소만 선택한다.
둘의 차이점은 필터링 할 대상이 선택 요소를 기준으로 '하위요소'인지 '선택한 요소'인지로 구분한다는 점이다.
// 기본형
$('요소').find('하위 요소 중 필터링할 요소')
$('요소').filter('선택한 요소 중 필터링할 요소')3. is()메서드
선택한 요소의 상태가 지정한 속성과 일치하면 true를, 그렇지 않으면 false를 반환한다.
is()메서드는 폼 요소 중 체크박스나 셀렉트 박스의 '선택여부' 또는 '보이는지에 대한 여부'를 주로 알아 볼 때 사용한다.
1. checked : 선택한 체크박스 또는 라디오 버튼 요소가 체크된 상태면 true, 아니면 false를 반환한다.
2. selected : 선택한 셀렉트 박스가 선택된 상태면 true, 아니면 false를 반환한다.
3. visible : 선택한 요소가 보이면 true, 안보이면 false를 반환한다.
4. hidden : 선택한 요소가 보이면 false, 안보이면 true를 반환한다.
5. animated : 선택한 요소가 애니메이션 동작 상태면 true, 아니면 false를 반환한다.
// 기본형
$('요소').is(':checked / :selected / :visible / :hidden / :animated')See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
'자바스크립트(JavaScript) > 제이쿼리(jquery)' 카테고리의 다른 글
| [Jquery] 제이쿼리 이벤트(Event) (0) | 2024.08.23 |
|---|---|
| [Jquery] 객체 조작 메서드 (0) | 2024.08.20 |
| [Jquery] 제이쿼리 배열 관련 메서드 (0) | 2024.08.20 |
| [Jquery] 제이쿼리 기본형 및 태그 요소 불러오는 방법 (0) | 2024.08.13 |
| [Jquery] 제이쿼리란? (0) | 2024.08.13 |
