제이쿼리 선택자
제이쿼리 선택자란 DOM안의 태그 요소를 선택할때 사용하는 선택자이다.제이쿼리 선택자의 종류로는 크게 '직접 선택자'와 '인접 관계 선택자'로 나눠진다.
직접 선택자는 태그를 직접 선택한다고 해서 직접선택자라고 부른다.
*(전체선택자), #(아이디 선택자) .(클래스 선택자), ,(그룹선택자), 태그명.클래스명 또는 태그명#아이디명 (종속선택자) ex)p.title1 p#title
제이쿼리에서 태그를 선택할 때에는 $("")안에 태그명이나 선택자의 이름을 써주면 된다.
[직접 선택자 기본형]
1. $("선택자") : 어떤 특정 태그를 선택한다.우선 선택자를 작성할때는 아래와 같이 입력하는데 css와 같다.
- $("*") : 전체선택자
- $(".클래스명") : 클래스 선택자
- $("#아이디명") : 아이디 선택자
- $("태그1,태그2") : 그룹 선택자
- $("태그.클래스명") : 종속 선택자
인접관계 선택자
인접 관계 선택자는 직접 선택자로 요소를 먼저 선택해 놓고 그 다음 선택한 요소와 가까이 있는 요소를 선택할 때 사용한다.
직접 선택자로 선택한 요소를 바로 감싸고 있는 윗계층의 부모요소는 parent요소라고 부르고 선택한 요소의 부모의 부모 처럼 상위에 있는 요소를 상위요소 closest요소라고 한다.
그리고 선택한 요소의 바로 위에 있는 태그를 형 요소(prev)라고 하고 다음 줄에 위치한 태그를 동생요소(next)라고 한다. 부모요소의 바로 아랫계층에 들어있는 자식요소들은 children요소라고 한다.
인접관계 선택자는 메서드의 형태로 쓰인다.
부모요소 선택자(parent)
부모요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택한다.
[기본형]
$("요소선택").parent()
하위요소 선택자
하위 요소 선택자는 기준으로 선택한 요소의 하위 요소만 선택한다.
css에서의 '후손' 요소를 의미한다.
[기본형]
$("요소선택1 요소선택2")
1.자식요소 선택자(children)
자식요소 선택자는 선택한 부모요소를 기준으로 지정한 자식요소를 선택할 때 사용한다. css에서 '자손'과 비슷한 개념이다.
[기본형]
1.$("부모요소 > 자식요소") 2.$("부모요소").children("자식요소") :부모요소 안에 있는 특정 자식요소를 1개 선택한다. 3.$("부모요소").children() :부모요소 안에 있는 모든 자식요소를 선택한다.
2.형(prev)요소, 동생(next)요소 선택자 (동일선상에 있는 관계일때)
형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택하고
동생 요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택한다.
[기본형]
1. $("요소선택").prev() : 선택 요소를 기준으로 바로 위에 있는 형 요소 1개를 선택한다.
2. $("요소선택").next() : 선택 요소를 기준으로 바로 아래에 있는 동생 요소 1개를 선택한다.
3. $("요소선택1+ 요소선택2") : 앞에 선택한 요소를 기준으로 바로 다음에 오는 요소 선택2를 선택한다.
전체 형요소, 전체 동생요소 선택자
전체 형, 동생 요소 선택자는 선택한 요소를 기준으로 위에 있는 형 요소를 선택하거나
아래에 있는 모든 동생 요소를 선택할 때 사용한다.
[기본형]
("요소선택").nextAll() -> 전체 동생
🎈스타일 속성들을 다양하게 적용하고싶은 경우에는 객체를 사용할 수있다. 스타일 속성들을 변수에 넣어 변수를 불러올때마다 그 속성을 사용할 수있다.
이때 객체에서 속성명과 속성값 모두 문자열로 작성하거나 속성명을 카멜표기법으로 작성한다.
$('선택자').siblings().css({속성명 : '속성갑'})와 같이 작성한다.
범위 제한 형, 동생 요소 선택자(prevUntill,nextuntil)
선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형요소 또는 동생 요소를 선택할때 사용한다.
[기본형]
("요소선택").nextUntil("범위 제한 요소 선택")
상위 요소 선택자(parents)
상위 요소 선택자는 선택한 요소를 기준으로 모든 상위요소를 선택하거나
상위 요소 중 특정 요소를 선택할때 사용한다.
[기본형]
1.("요소선택").parents("요소 선택")
:선택한 요소를 기준으로 상위 요소 중 특정 요소를 선택한다.
가장 가까운 상위 요소 선택자(closest)
선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할때 .closest()메서드를 사용한다.
[기본형]
$("요소선택").closest('요소선택')
