반응형

인접 관계 선택자


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

 

1) 부모 요소 선택자

선택한 부모 요소를 선택합니다,

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
     <!-- jquery cdn -->
     <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
     <script>
        $(function(){
            // 코딩 : #list_1에서 부모 태그 선택하기
            // 사용법 : $("CSS선택자").parent().함수()
            $("#list_1").parent()
                        .css("border", "2px dashed #f00");
        });
     </script>
</body>
</html>

 

결과

 

2) 자식 요소 선택자

선택한 요소의 모든 자식 요소를 선택합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용 1</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>

     <!-- jquery cdn -->
     <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
     <script>
        // #wrap > section 아래 자식 태그를 선택해서
        // background-color : yellow
        // border : 2px solid #f00 으로 수정하기

        $(function(){
            $('#wrap > section').children()
            .css('background-color', 'yellow')
            .css('border', '2px solid #f00');
        });
     </script>
</body>
</html>

 

결과

 

3) 형(이전) 요소 선택자 와 동생(다음) 요소들 선택자

- 선택한 요소의 바로 이전 요소를 선택합니다.( $("요소 선택").prev())

- 선택한 요소의 다음 요소를 선택합니다. ( $("요소 선택").next() / $("요소 선택 + 다음요소"))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
      </div>
  
      <!-- jquery cdn -->
      <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
      <script>
        $(function(){
            // .txt 선택태그 앞/뒤에 태그 선택하기
            // 사용법 : $('css 선택자').prev().함수() => 앞의 태그 선택
            $('.txt').prev().css('background-color', '#0ff');

            // 뒤의 태그 선택하기
            // 사용법 : $('css 선택자').next().함수() => 뒤의 태그 선택
            $('.txt').next().css('border', '2px dashed #f00');
        });
      </script>
</body>
</html>

 

결과

 

 

4) 형(이전) 요소들 선택자와 동생(다음) 요소들 선택자

- 선택한 요소의 이전 요소 모두를 선택합니다.

- 선택한 요소의 다음 요소를 모두 선택합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
      </div>
  
      <!-- jquery cdn -->
      <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
      <script>
        // 앞/뒤 모든 태그 선택하기

        // 앞의 모든 태그 선택
        // $('css 선택자').prevAll().함수();
        $('.txt')
        .prevAll()
        .css('background-color', '#0ff')
        .css('border', '2px dashed #f00');

        // 뒤의 모든 태그 선택
        // $('css 선택자').nextAll().함수();
        $('.txt')
        .nextAll()
        .css('background-color', '#f00')
        .css('border', '2px dashed #f00');

      </script>
</body>
</html>

 

결과

 

5) 전체 형제 요소 선택자

- 요소의 형제 요소 전체를 선택합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="wrap">
      <h1>인접 관계 선택자</h1>
      <p>내용1</p>
      <p class="txt">내용2</p>
      <p>내용3</p>
      <p>내용4</p>
    </div>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            // 코딩
            // 예제 : .txt의 형제 태그 선택해서 디자인 적용
            // $("CSS선택자").siblings().함수();
            $(".txt").siblings()
            .css("background-color", "#0ff")
            .css("border", "2px dashed #f00");
        });
    </script>
  </body>
</html>

 

결과

 

7) 지정 형(이전) 요소들 선택자와 지정 동생(다음) 요소들 선택자

- 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택합니다.

- 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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">내용6</p>
      </div>
  
      <!-- jquery cdn -->
      <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
      <script>
        // 선택태그(.txt) 부터 대상태그(.title) 앞까지만 선택하기 (앞)
        // 사용법 $('기준선택자').prevUntil('대상선택자').함수()
        $(function(){
            $('.txt3')
            .prevUntil('.title')
            .css('background-color', '#0ff')
            .css('border', '2px dashed #f00');
        });

        // 선택태그(.txt3)부터 대상태그(.txt6)사이 선택하기 (뒤)
        // 사용법 $('기준선택자').prevUntil('대상선택자').함수()
        $(function(){
            $('.txt3')
            .nextUntil('.txt6')
            .css('background-color', '#0ff')
            .css('border', '2px dashed #f00');
        });
      </script>
</body>
</html>

 

결과

 

8) 상위 요소 선택자

- 선택한 요소의 상위 요소를 모두 선택합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="title">선택자</h1>
    <section>
      <div>
        <p class="txt1">내용</p>
      </div>
    </section>

    <section>
      <div>
        <p class="txt2">내용</p>
      </div>
    </section>

     <!-- jquery cdn -->
     <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

     <script>
        // .txt1 선택태그 위의 부모 모두 선택하기
        // 사용법 : $('css선택자').parents().함수();
        $('.txt1').parents()
        .css('border', '2px dashed #f00');
     </script>
</body>
</html>

 

결과

 

 

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

- 선택한 요소의 상위 요소 중 가장 가까운 태그만 선택합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="title">선택자</h1>
    <div>
        <div>
            <p class="txt1">내용</p>
        </div>
    </div>

     <!-- jquery cdn -->
     <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

     <script>
        // 선택태그에서 부모태그들 중 가장 가까이 있는 태그 선택
        // 사용법 : $('css선택자').closest('부모태그').함수();

        $('.txt1').closest('div')
        .css('border', '2px dashed #f00');
     </script>
</body>
</html>

 

결과

 

반응형

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] 직접선택자(2)  (0) 2024.06.26
[jQuery] jQuery 기본과 직접선택자  (0) 2024.06.26
반응형
  • h1 요소와 ID가 tit3인 h3 요소의 스타일을 변경하여, 배경색을 하늘색으로, 테두리를 빨간색 점선으로 적용하기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3 id="tit3">직접선택자</h3>
    <h3>인접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

    <script>
        $(function(){
            // 예제 : 2개를 선택해서 디자인 적용하기
            // $('선택자, 선택자2').함수();
            $('h1, #tit3')
            .css('background-color', '#0ff')
            .css('border', '2px dashed #f00');
        });
    </script>
</body>
</html>

 

결과

 

💡 일치선택자

 

h1에 tit 부분에 배경색과 border 지정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="tit">제이쿼리</h1>
    <h1>선택자</h1>
    <h3 class="tit">직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        // 일치 선택자
        $(function(){
            $('h1.tit')
            .css('background-color', '#0ff')
            .css('border', '2px dashed #f00');
        });
    </script>
</body>
</html>

 

결과

💡 연습문제

#wrap 밑에 h1 태그만 선택해서 디자인 적용    background-color yellow    border 2px dashed #f00

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <!-- 연습문제 : #wrap 밑에 h1 태그만 선택해서 디자인 적용
    background-color yellow
    border 2px dashed #f00
    -->
    <div id="wrap">
        <h1>인접한 관계 선택자</h1>
        <p>내용</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>
      <!-- jquery cdn -->
      <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
      <script>
        $('#wrap > h1')
        .css('background-color', 'yellow')
        .css('border', '2px dashed #f00');
      </script>

</body>
</html>

 

결과

 

 

반응형

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] 인접 관계 선택자  (0) 2024.06.26
[jQuery] jQuery 기본과 직접선택자  (0) 2024.06.26
반응형

들어가기 전에


💡 라이브러리?

 

자주 사용되는 함수들의 모임(묶음)을 말합니다.

 

💡 jquery를 사용하게 된 배경
  • 웹 브라우저(익스플로러, 크롬, 사파리 등…) 간의 js 문법이 잘 동작하지 않았음
    • 크로스 브라우저 문제 ⇒ jquery가 등장
  • 바닐라 js 보다 코딩이 짧고 사용이 쉬운 것이 장점
  • 단점으로는 용량이 크고, 성능이 떨어짐
💡 jquery?

 

함수를 이용해서 DOM을 조작하는 것임

 

jQuery 기본문법

$(function() {jquery 실행문});
  • HTML 위쪽에 넣어도 실행되게 만드는 구문 ⇒ HTML 태그 보다 뒤 늦게 실행을 시켜주는 구문
// 사용법

$(function(){
	$('#title').css('color', 'skyblue');
});

 

전체 선택자


‘*’ 키워드를 사용하며, 전체 태그를 선택함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            // * : 전체선택자
            // 전체 태그를 선택해서 외곽선을 1px solid blue 해라.
            // jquery : $("*").css("속성", "값");   // 디자인 조작
            $("*").css("border", "1px solid blue");
        })
    </script>
</body>
</html>

 

결과

css 선택자


1. 직접선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

    <script>
        $(function(){
            // jquery 작성
            // 예제 : 배경색: #ff0, border : 2px solid black
            // TODO : 메소드(함수) 체이닝
            // 사용법 : $("CSS선택자").함수().함수() ...
            $("#tit").css("background-color", "#ff0")
                    .css("border", "2px solid black");
        })
    </script>
</body>
</html>

 

결과

[연습문제]

id = tit 선택해서 / background-color : #ff0 / border : 2px dashed black 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 연습문제 1) id = tit 선택해서 -->
    <!-- background-color : #ff0 -->
    <!-- border : 2px dashed black -->
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("#tit").css("background-color", "#ff0")
                    .css("border", "2px dashed black");
        })
    </script>
</body>
</html>

 

결과

 

[연습문제 2]

h2 태그를 선택해서 디자인 적용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 연습문제 h2 태그를 선택해서 디자인 적용 -->
    <!-- background-color : skyblue -->
    <!-- border : 2px dashed black -->
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("h2")
            .css("background-color", "skyblue")
            .css("border","2px dashed black");
        })
    </script>
</body>
</html>

 

결과

반응형

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] 인접 관계 선택자  (0) 2024.06.26
[jQuery] 직접선택자(2)  (0) 2024.06.26

+ Recent posts