[제이쿼리] jQuery 인접 관계 선택자(selector)

Front/jquery 2020. 3. 23. 02:09

제이쿼리(jQuery) 인접 관계 선택자(selector)

안녕하세요? 장장스입니다.

직접 선택자에 이어 인접 관계 선택자를 포스팅하겠습니다.

인접 관계 선택자

종류	사용법	설명
부모 요소 선택자	$("요소 선택").parent()	선택한 부모 요소를 선택합니다.
상위 요소 선자	$("요소 선택").parents()	선택한 요소의 상위 요소를 모두 선택합니다.
가장 가까운 상위 요소 선택자	$("요소 선택").closest("div")	선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택합니다.
하위 요소 선택자	$("요소 선택 하위 요소")	선택한 요소에 지정한 하위 요소를 선택합니다.
자식 요소 선택자	$("요소 선택>자식 요소")	선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택니다.
자식 요소들 선택자	$("요소 선택").children()	선택한 요소의 모든 자식 요소를 선택합니다.
형(이전) 요소 선택자	$("요소 선택").prev()	선택한 요소의 바로 이전 요소를 선택합니다.
형(이전) 요소들 선택자	$("요소 선택").prevAll()	선택한 요소의 이전 요소 모두를 선택합니다.
지정 형(이전) 요소들 선택자	$("요소 선택").prevUntil("요소명")	선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다.
동생(다음) 요소 선택자	$("요소 선택").next() $("요소 선택 + 다음요소")	선택한 요소의 다음 요소를 선택합니다.
동생(다음) 요소들 선택자	$("요소 선택").nextAll()	선택한 요소의 다음 요소를 모두 선택합니다.
지정 동생(다음) 요소들 선택자	$("요소 선택").nextUntil("h2")	선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택합니다.
전체 형제 요소 선택자	$(".box_1").siblings()	class 값이 box_1인 요소의 형제 요소 전체를 선택합니다.

○부모 요소 선택자, $("요소 선택").parent()

▼javascript

$(function(){
        $("#list_1").parent().css("border","2px dashed #f00");
});

▼html

<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
    <li>리스트 1
    <ul>
        <li id="list_1">리스트1-1</li>
        <li>리스트 1-2</li>
    </ul>
</li>  
    <li>리스트2</li> 
    <li>리스트3</li> 
</ul>
</body>

▼실행결과

인접 관계 선택자

리스트 1

리스트 1-1

리스트 1-2

리스트2

리스트3

○ 하위 요소 선택자, $("요소 선택 하위 요소")

▼javascript

$(function(){
   $("#wrap h1").css("border", "2px dashed #f00");
});

▼html

<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>    
        <p>내용1</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>
</body>

▼실행결과

인접 관계 선택자

내용1

하위 요소 선택자

내용2

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

○자식 요소 선택자, $("요소 선택").children()

▼javascript

$(function(){
   $("#wrap> h1").css("border", "2px dashed #f00");
   $("#wrap > section").children().css({
        "background-color":"yellow",
        "border": "2px solid #f00"
    });
});

▼html

<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>    
        <p>내용1</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>
</body>

▼실행결과

인접 관계 선택자

내용1

하위 요소 선택자

내용2

○동생(다음) 요소 선택자, $("요소 선택").next() | $("요소 선택 + 다음요소")

○형(이전) 요소 선택자, $("요소 선택").prev()

▼javascript

$(function(){
	var style_1 = {
	"background-color":"#0ff",
	"border":"2px solid #f00"
  }
var style_2 ={
    "background-color":"#ff0",
    "border":"2px dashed #f00"
  }
  $(".txt").prev().css(style_1);
  $(".txt + p").css(style_2);
  $(".txt").next().next().css(style_2);
});

▼html

<body>
    <div id="wrap">
      <h1>인접 관계 선택자</h1>
      <p>내용1</p>
      <p class="txt">내용2</p>
      <p>내용3</p>
      <p>내용4</p>
    </div>    
</body>

▼실행결과

인접 관계 선택자

내용1

내용2

내용3

내용4

○ 동생(다음) 요소들 선택자, $("요소 선택").next() / $("요소 선택 + 다음요소")

○ 형(이전) 요소들 선택자 ,$("요소 선택").prev()

▼javascript

$(function(){
  var style_1 = {
      "background-color":"#0ff",
      "border":"2px solid #f00"
  }
  var style_2 ={
    "background-color":"#ff0",
    "border":"2px dashed #f00"
  }
  $(".txt").prevAll().css(style_1);
  $(".txt").nextAll().css(style_2);
});

▼html

<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>    
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>    
</body>

▼실행결과

인접 관계 선택자

내용1

내용2

내용3

내용4

○전체 형제 요소 선택자, $(".box_1").siblings()

▼javascript

$(function(){
  var style_1 = {
      "background-color":"#0ff",
      "border":"2px solid #f00"
      }
  $(".txt").siblings().css(style_1);
});

▼html

<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>    
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>    
</body>

▼실행결과

인접 관계 선택자

내용1

내용2

내용3

내용4

○지정 동생(다음) 요소들 선택자, $("요소 선택").nextUntil("h2")

○지정 형(이전) 요소들 선택자, $("요소 선택").prevUntil("요소명")

▼javascript

<script>
$(function(){
  var style_1 = {
      "background-color":"#0ff",
      "border":"2px solid #f00"
  }
  $(".txt3").prevUntil(".title").css(style_1);
  $(".txt3").nextUntil(".txt6").css(style_1);
});
</script>

▼html

<body>
    <div id="wrap">
        <h1 class="title">인접 관계 선택자</h1>    
        <p>내용1</p>
        <p >내용2</p>
        <p class="txt3">내용3</p>
        <p>내용4</p>
        <p>내용5</p>
        <p class="txt6">내용4</p>
    </div>    
</body>

▼실행결과

인접 관계 선택자

내용1

내용2

내용3

내용4

내용5

내용4

Post

References

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)

'Front > jquery' 카테고리의 다른 글

[제이쿼리] jQuery 콘텐츠 탐색 선택자(selector) (0)	2020.03.29
[제이쿼리] jQuery 속성 탐색 선택자(selector) (0)	2020.03.27
[제이쿼리] jQuery 위치 탐색 선택자(selector) (0)	2020.03.25
[제이쿼리] jQuery 직접 선택자(selector) (0)	2020.03.21
[제이쿼리] 제이쿼리(jQuery) 라이브러리 설치하기 (0)	2020.03.19

ABOUT ME

장장스 장장스