[제이쿼리] - 제이쿼리 선택자 / 직접선택자, 인접관계 선택자 / 제이쿼리 체이닝 기법

제이쿼리 체이닝 기법 

매서드를 여러 개 연결하여 사용하는 기법.
마치 체인이 연결된 것처럼 생겼다고 해서 체이닝 기법이라고 한다. 

ex) $('.txt').css('color', 'red').css('background', 'pink');

---

제이쿼리 선택자

제이쿼리 선택자란 DOM안의 태그 요소를 선택할 때 사용하는 선택자이다. 
제이쿼리 선택자의 종류로는 크게 '직접 선택자' 와 '인접 관계 선택자'로 나눠진다. 

---

 직접 선택자 

: 태그를 직접 선택한다고 해서 직접 선택자라고 부른다. 
1. *(전체 선택자) 2. #(아이디 선택자) 3. .(class선택자) 4. ,(그룹선택자) 5. 태그명.클래스명 또는 태그명#아이디명(종속선택자)가 있다.

제이쿼리에서 태그를 선택할 때에는 $(" ")안에 선택자의 이름을 써주면 된다. 

[기본형]


1. $("선택자") : 어떤 특정 태그를 선택한다. 
- $("*") : 전체 선택자
- $(".클래스명") : 클래스 선택자
- $("#아이디명") : 아이디 선택자
- $("태그1, 태그2") : 그룹 선택자
- $("태그.클래스명") : 종속 선택자

---

  인접 관계 선택자  

 

: 인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이 있는 요소를 선택할 때 사용한다. 
직접 선택자로 선택한 요소를 바로 감싸고 있는 윗계층의 부모 요소는 parent요소 라고 부르고, 
선택한 요소의 부모의 부모처럼 상위에 있는 요소를 상위 요소 closest요소 라고 한다. 
그리고 선택한 요소의 바로 위에 있는 태그를 형 요소prev 라고 하고, 다음 줄에 위치한 태그를 동생 요소next라고 한다.
부모 요소의 바로 아랫 계층에 들어있는 자식 요소들은 children요소라고 한다. 
인접 관계 선택자는 매서드의 형태로 쓰인다.

 
     
1. 부모요소 선택자 parent
: 부모요소 선택자는 선택한 요소를 감싸고 있는 가장 가까운 부모 요소를 선택한다.       

 [기본형]
 
$("요소선택").parent()

    

2. 하위요소 선택자
: 기준으로 선택한 요소의 하위 요소만 선택한다. 
     css에서의 '후손'요소를 의미한다. 

 [기본형]
 
$("요소선택1 요소선택2")

3. 자식요소 선택자 
: 선택한 부모요소를 기준으로 지정한 자식 요소를 선택할 때 사용한다. 
css에서 자손요소와 비슷한 개념을 갖는다. 

[기본형]
1. $('부모요소 > 자식요소')
2. $('부모요소').children('자식요소')  -> 부모 안에 있는 특정 자식을 한 개 선택할 때
3. $('부모요소').children()   -> 부모 안에 있는 모든 자식을 선택할 때

 

 <h1>인접관계 선택자</h1>

    <ul id="wrap">

      <li>

        리스트1

        <ul>

          <li id="list_1">리스트1-1</li>

          <li>리스트1-2</li>

        </ul>

      </li>

      <li class="list_2">리스트2</li>

      <li>리스트3</li>

    </ul>

 

  $(document).ready(function () {

        //부모 요소 선택자

        $("#list_1").parent().css("border", "1px solid orange");

        //하위 요소 선택자

        $("#wrap ul").css("background-color", "beige");

        //자식 요소 선택자

        $("#wrap > li").css("color", "blue");

        $("#wrap").children(".list_2").css("color", "tomato");

        $("#wrap").children().css("text-decoration", "underline");

      });

 

---

 
 형(prev)요소, 동생(next)요소 선택자 

: 형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택하고 
동생 요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택한다. 

[기본형]
1. $('요소선택').prev() : 선택 요소를 기준으로 바로 위에 있는 형 요소 1개를 선택함.

2. $('요소선택').next() : 선택 요소를 기준으로 바로 아래에 있는 동생 요소 1개를 선택함. 

3. $('요소선택1 + 요소선택2') : 앞에 선택한 요소를 기준으로 바로 다음에 오는 요소선택2를 선택함.

 

 <div id="wrap">

      <h1>형, 동생 요소 선택자</h1>

      <p>내용1</p>

      <h2>제목2</h2>

      <p class="txt">내용2</p>

      <p>내용3</p>

      <p>내용4</p>

    </div>

 let style1 = {

          "background-color": "lightblue",

          color: "orange",

          border: "2px solid pink",

        };

        let style2 = {

          "background-color": "beige",

          color: "tomato",

          border: "2px solid blue",

        };

        let style3 = {

          "background-color": "pink",

          color: "blue",

          border: "2px solid blue",

        };

        //내용2의 형 요소를 선택하여 css 적용. 여러가지 css를 객체로 변수 안에 담아놓은 다음에 css에 변수 이름을 넣어준다.

        $(".txt").prev().css(style1);

        //내용2의 동생 요소를 선택하여 css 적용.

        $(".txt").next().css(style2);

 

 //h1의 바로 뒤에 있는 h2태그 선택 -> 바로 뒤에 있지 않기때문에 적용이 되지 않는다.

        $("h1 + h2").css("font-style", "italic");

 

 //내용2의 밑밑 동생 요소인 내용4를 선택하여 css 적용 .next()를 두번 써주면 된다.

        $(".txt").next().next().css("background", "pink");

* 적용해야할 스타일이 많다면 변수에 담아놨다가 사용

css스타일 카멜표기법으로 쓸거면 ' '안써도 되고, ' ' 쓸거면 - 들어가도 된다.

---

 전체 형 요소,  전체 동생 요소 선택자 
 

: 전체 형, 동생 요소 선택자는 선택한 요소를 기준으로 위에 있는 모든 형 요소를 선택하거나
아래에 있는 모든 동생 요소를 선택할 때 사용한다. 

[기본형]
1. 전체 형
$("요소선택").prevAll()

2. 전체 동생
$("요소선택").nextAll()

<div id="wrap">

      <h1>형, 동생 요소 선택자</h1>

      <p>내용1</p>

      <h2>제목2</h2>

      <p class="txt">내용2</p>

      <p>내용3</p>

      <p>내용4</p>

    </div>

 //전체 형 요소에 style1 적용

        $(".txt").prevAll().css(style1);

        //전체 동생 요소에 style3 적용

        $(".txt").nextAll().css(style3);

내용2(클래스 txt)를 기준으로 전체 형 / 전체 동생 선택

---

 전체 형제 요소 선택자 

 

 : 선택한 요소를 기준으로 모든 형제 요소들을 선택할 때 사용한다. 
단 선택한, 기준이 되는 요소에는 코드가 적용되지 않는다. 

[기본형]

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

 //.txt의 모든 형 동생 요소들을 전부 선택|  전체 형제 요소 선택자

        $(".txt").siblings().css(style2);

 

전체 형제 요소 선택자

---

범위 제한 형, 동생 요소 선택자 

 

 : 선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 전체 동생 요소를 선택하고자 할 때 사용한다. 

[기본형]

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

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

        //.menu4부터 .menu1안에 있는  모든 형 요소를 선택한다.

        $(".menu4").prevUntil(".menu1").css(style1);

        //.menu4부터 .menu7안에 있는  모든 동생 요소를 선택한다.

        $(".menu4").nextUntil(".menu7").css(style3);

범위제한 형, 동생 선택자

---

상위 요소 선택자

 

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

 [기본형]
1. $('요소 선택').parents()
: 선택한 요소를 기준으로 상위 요소를 모두 선택한다. <body> <html>에도 적용된다.  

2. $('요소 선택').parents('요소 선택')
: 선택한 요소를 기준으로 상위 요소 중 특정 요소를 선택한다.

<h1 class="title">선택자</h1>

    <section>

      <div>

        <p class="txt1">내용1</p>

      </div>

    </section>

    <section>

      <div>

        <aside><p class="txt2">내용2</p></aside>

      </div>

    </section>

 

     //.txt1의 모든 부모 요소를 선택해서 적용

        $(".txt1").parents().css("border", "2px solid #888");

        //부모 특정 .txt2의 부모 요소 중 section태그를 선택한다.

        $(".txt2").parents("section").css("background-color", "lavender");

 

상위요소 선택자 전체 부모 선택

부모 특정

---

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

 

 

: 선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 .closest()매서드를 사용한다. 

[기본형]
1. $('요소 선택').closest('요소선택')

<h1 class="title">선택자</h1>

    <section>

      <div>

        <p class="txt1">내용1</p>

      </div>

    </section>

    <section>

      <div>

        <aside><p class="txt2">내용2</p></aside>

      </div>

    </section>

 //.txt2의 부모요소 중 가장 가까운 상위 요소 선택

        $(".txt2").closest("aside").css("background-color", "#ddd");     

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