[jQuery]여러가지 선택자(parent, closest 등)

안녕하세요 :) 무택입니다🧔

오늘은 제이쿼리 여러 가지 선택자에 대해 정리해보려고 합니다.

closest(), parent() 등 선택자는 쓰이는 경우가 많아서 꼭 알아야 할 문법인 것 같습니다.

예시 코드도 같이 설명에 넣어놨으니 활성화 버튼을 누르기 전에 뭐가 활성화될지 한번 생각해 보고 눌러보면 좋을 것 같습니다.

 

 

#부모 선택자

$("기준요소").parent() : 기준요소의 부모 선택

-

See the Pen jQuery_parent by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").parents() : 기준요소의 부모들 모두 선택

-

See the Pen jQuery_parent by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").closest() : 기준요소의 가장 가까운 부모 선택(기준요소 포함)

-

See the Pen jQuery_closest by TytanLee (@TytanLee) on CodePen.

 

 

 

---

#형제 선택자

$("기준요소").prev() : 기준 요소의 바로 전 형제 선택

-

See the Pen jQuery_prev by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").prevAll() : 기준 요소의 전 형제들 모두 선택

-

See the Pen jQuery_prevAll by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").next() : 기준 요소의 바로 다음 형제 선택

-

See the Pen jQuery_next by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").nextAll() : 기준 요소의 다음 형제들 모두 선택

-

See the Pen jQuery_next by TytanLee (@TytanLee) on CodePen.

 

 

 

$("기준요소").siblings() : 기준요소의 형제들 모두 선택(기준요소 미포함)

-

See the Pen jQuery_siblings by TytanLee (@TytanLee) on CodePen.

 

 

$("기준요소" + "예시요소") : 기준요소 바로 다음에 오는 예시요소 선택

 

 

 

---

#하위 선택자

$("기준요소" "자식") : 기준요소의 자식을 포함한 요소들 모두 선택(css개념과 비슷)

---

#자식 선택자

$("기준요소").children() : 기준요소의 자식들 모두 선택(기준요소 포함)

-

See the Pen jQuery_children by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").children().first() : 기준요소의 첫 번째 자식 선택

-

See the Pen jQuery_children.first by TytanLee (@TytanLee) on CodePen.

$("기준요소").children(":first") : 기준요소의 첫 번째 자식 선택

-

See the Pen jQuery_children.first2 by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").children().last() : 기준요소의 마지막 자식 선택

-

See the Pen jQuery_children.last by TytanLee (@TytanLee) on CodePen.

 

$("기준요소").children(":last") : 기준요소의 마지막 자식 선택

-

See the Pen jQuery_children.last by TytanLee (@TytanLee) on CodePen.

 

 

---

#자손 선택자

$("기준요소").find() : 기준요소의 자손들 선택(기준요소의 모든 하위 태그)

-

See the Pen jQuery_응용 by TytanLee (@TytanLee) on CodePen.

 

 

 

 

 

---

#선택자 응용

See the Pen jQuery_응용2 by TytanLee (@TytanLee) on CodePen.

 

 

---

#공통 사항

$("기준요소").children(".example").css ... : 기준요소의 자식들 중 ".example" 클래스를 가진 요소 선택
$("기준요소").children("#example").css ... : 기준요소의 자식들 중 "#example" 아이디를 가진 요소 선택