jQuery(인접 관계 선택자)

안녕하세요 19살 IT 개발자 포돌이입니다.

 

지난 시간에는 jQuery(직접 선택자)의 직접 선택자를 공부했었는데요 오늘은 인접 관계 선택자를 한번 공부해보려고 합니다. 그럼 한번 들어가시죠~

 

인접 관계 선택자

 

jQuery(선택자 1)에도 있지만 한번 더 복습하는 겸 다시 올렸습니다. 차례대로 기본형과 예제를 적으며 나아가도록 하겠습니다. 

 

부모 요소 선택자

 

부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택합니다. 기본형은 다음과 같습니다. 

 

기본형

$("요소 선택").parent();

 

 

코딩해보기

다음은 문단 태그 영역의 부모 요소 선택자를 적용한 예제입니다.

 

하위 요소 선택자

 

하위 요소 선택자는 선택한 요소로 선택한 하위 요소만 선택합니다.

 

기본형

$("기준 요소 선택 1 요소 선택 2")

ex) $("#wrap h1")

 

코딩해보기

다음은 문단 태그 영역의 하위 요소 선택자를 적용한 예제입니다.

자식 요소 선택자

 

자식 요소 선택자는 선택한 요소를 기준으로 지정한 자식 요소만 선택합니다.

 

기본형

$("요소 선택 > 자식 요소 선택")

$("요소 선택").chirdren("요소 선택")

$("요소 선택").chirdren()

 

코딩해보기

다음은 문단 태그 영역의 하위 요소 선택자를 적용한 예제입니다.

 

 

형(이전) / 동생(다음) 요소 선택자

 

형(이전) / 동생(다음) 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택합니다.

 

기본형

$("요소 선택").prev()

$("요소 선택").next()

$("요소 선택 1 + 요소 선택 2")

 

코딩해보기

다음은 문단 태그 영역의 형(이전) / 동생(다음) 요소 선택자를 적용한 예제입니다.

 

 

전체 형(이전) / 동생(다음) 요소 선택자

 

전체 형(이전) / 동생(다음) 요소 선택자는 선택한 요소를 기준으로 이전에 오는 전체 형제 요소를 선택합니다. 그리고 전체 동생 요소 선택자는 선택한 요소를 기준으로 다음의 오는 전체 형제 요소를 선택합니다.

 

기본형

$("요소 선택").prevAll()

$("요소 선택").nextAll()

 

코딩해보기

다음은 문단 태그 영역의 전체 형(이전) / 동생(다음) 요소 선택자를 적용한 예제입니다.

 

전체 형(이전) / 동생(다음) 요소 선택자

 

전체 전체 형제 요소 선택자는 선택한 요소를 기준으로 이전에 오는 전체 형제 요소를 선택합니다.

 

기본형

$("요소 선택").siblings();

 

코딩해보기

다음은 문단 태그 영역의 전체 형제 요소 선택자를 적용한 예제입니다.

 

 

범위 제한 전에 형 / 동생 요소 선택자

 

범위 제한 전체 형제 요소 선택자는 선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 전체 동생 요소를 선택합니다.

 

기본형

$("요소 선택").prevUntil("범위 제한 요소 선택")

$("요소 선택").nextUntil("범위 제한 요소 선택")

 

코딩해보기

다음은 문단 태그 영역의 형 / 동생 요소 선택자를 적용한 예제입니다.

 

 

상위 요소 선택자

 

상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자 하는 요소만 선택할 때 사용합니다.

 

기본형

$("요소 선택").parents()

$("요소 선택").parents("요소 선택")

 

코딩해보기

다음은 문단 태그 영역의 상위 요소 선택자를 적용한 예제입니다.

 

가장 가까운 상위 요소 선택자

 

가장 가까운 상위 요소 선택자는 선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 사용합니다.

 

기본형

$("요소 선택").closest("요소 선택")

 

코딩해보기

다음은 문단 태그 영역의 가장 가까운 상위 요소 선택자를 적용한 예제입니다.

이렇게 해서 jQuery(인접 관계 선택자)를 모두 마쳤습니다.  제가 감히 말씀드리자면 왜 기본형 마다 예제가 있는 이유는 기본형만 공부하고 끝내는 것보다 기본형을 공부하고 그걸 응용하는 문제를 풀어나가면 이해도가 훨씬 올라갑니다. 그러니 계속 공부하시면서 실력을 키우셨으면 좋겠습니다~

 

19살 IT 개발자 포돌이였습니다

 

-Coding is an Art-

 

코딩을 예술이라 생각하는 사람

 

책 광고 리뷰 주실 분들은 clonelee74@gmail.com 으로 메시지를 보내주시면 감사하겠습니다.