3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계)

어제 이어서

slidetoggle 예제 수정 부분

$("#flip2").click(function () {

$("#p2").slideToggle("show", function(){

let view = $("#p2").css("display");

if(view == "none"){

$("#flip2").text("토글 - 다운");

} else {

$("#flip2").text("토글 - 업");

}

});

기본선택자

1) 태그명 - $("div")

2) class - $(".box")

3) id - $("#d1")

선택자

전체 요소 선택자 - $("*")

현재 요소 선택자 - $(this)

속성 선택자 - $("[]")

조합 선택자

태그명과 class 혼합 - $("p.c1")

같은 형제 태그들 중 첫 번째 요소 - $("p:first")

하위 요소 중 첫번째 요소 - $("ul li:first")

선택자를 어떻게 쓰는지 확인할 수 있는 사이트

Try jQuery Selector

My name is Donald Duck I live in Duckburg I have many friends:

www.w3schools.com

first-of-type 은 문서 전체 상의 첫 번째와 div로 감싸져 있다면 감싸져 있는 첫 번째 들을 구할 때 사용한다.

기본적인 선택자가 CSS와 유사하기 하다. >는 바로 직계, 빈칸은 하위 요소 전부를 선택 + 인접한 요소만 선택

~ 형제이지만 인접해있지 않은 요소를 선택할 때 사용

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>선택자01</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<body>
    <h1>H1 태그...</h1>
    <p>태그만 있는 녀석, 그리고 첫번째 p</p>
    <p class="cls">클래스 가 있는 녀석</p>
    <p id="demo">아이디가 있는 녀석</p>
    <span id="cls">클래스가 있는 span</span><br>
    <button id="none">다 없애라!!</button>
    <button id="show">p.cls 없애라!!</button>
    <button id="first">첫번째 p</button>
    <p>List 1:</p>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Tea</li>
    </ul>

    <p>List 2:</p>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
        <li>Tea</li>
    </ul>
    <button id="first_ul">ul의 첫번째 li</button>
    <button id="all_ul">전체 ul의 첫번째 li</button>
</body>
<script>
    function turnBack() {//3초 후 페이지를 원상태로
        setTimeout(function () {
            location.reload(); //페이지를 다시, F5와 동일한 효과  $("*").show 제이쿼리 3.대의 버그 
        }, 3000);
    };

    $("#none").click(function () {
        $("*").hide();
        turnBack();
    });

    $("#show").click(function () {
        $("p.cls").hide(); //조합선택자
        turnBack();
    });

    $("#first").click(function(){
        $("p:first").hide();
        turnBack();
    });

    $("#first_ul").click(function(){
        $("ul li:first").hide();
        turnBack();
    });

    $("#all_ul").click(function(){
        $("ul li:first-child").hide();
        turnBack();
    });

    //this 선택자
    $("p").click(function(){
        //클릭한 p를 숨기자
        $(this).hide();
        turnBack();
    });
</script>

</html>

관계선택자(부모, 자식, 형제)

1. 상위 계층 요소 선택자 선택 요소는 제외된다

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

$("선택자").parents() : 모든 윗 계층의 요소를 선택(html까지 선택, 범위 지정이 필요)

$("선택자").parentsUntil("지정요소") : 선택자 요소와 지정요소 사이의 상위 요소 선택

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>상위 요소 선택</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .ancestors * {
      display: block;
      border: 2px solid gainsboro;
      color: blue;
      padding: 5px;
      margin: 15px;
    }
  </style>
</head>

<body>
  <div class="ancestors">
    <div style="width:500px;">div (great-grandparent)
      <ul>ul (grandparent)
        <li>li (direct parent)
          <span>span</span>
        </li>
      </ul>
    </div>

    <div style="width:500px;">div (grandparent)
      <p>p (direct parent)
        <span>span</span>
      </p>
    </div>
  </div>
  <button id="parent">부모선택</button>
  <button id="parents">상위요소선택</button>
  <button id="until">...까지선택</button>
</body>
<script>
  //3초 후 새로고침 함수 만들기
  function turnBack() {
    setTimeout(function () {
      location.reload();
    }, 3000);
  };

  $("#parent").click(function () {
    // 2가지 이상의 스타일 변경 시 JSON 형태로 작성, 자바스트크립트 객체 형식
    $("span").parent().css({
      "color": "#e16",
      "border": "2px solid balck",
      "background-color": "orange"
    });
    turnBack();
  });

$("#parents").click(function(){
$("span").parents().css({
      "color": "#e16",
      "border": "2px solid red"
    });
    turnBack();
  });

  $("#until").click(function(){
$("span").parentsUntil(".ancestors").css({
      "color": "#e16",
      "border": "2px solid blue"
    });
    turnBack();
  });

</script>

</html>

2. 하위 계층 요소 선택자 선택 요소는 제외된다

$("선택자").children() : 선택자 요소의 자식 요소 선택

$("선택자").find("지정요소") : 선택자 요소 하위 요소 중 지정 요소 선택, 지정 요소에 전체 선택("*") 을 작성하면 모든 하위 요소를 선택

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>상위 요소 선택</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .ancestors * {
      display: block;
      border: 2px solid gainsboro;
      color: blue;
      padding: 5px;
      margin: 15px;
    }
  </style>
</head>

<body>
  <div class="ancestors">
    <div class="parent" style="width:500px;">div (great-grandparent)
      <ul>ul (grandparent)
        <li>li (direct parent)
          <span>span</span>
        </li>
      </ul>
    </div>

    <div class="parent" style="width:500px;">div (grandparent)
      <p>p (direct parent)
        <span>span</span>
      </p>
    </div>
  </div>
  <button id="parent">부모선택</button>
  <button id="parents">상위요소선택</button>
  <button id="until">...까지선택</button>
  <br><br>
  <button id="child">자식선택</button>
  <button id="find">span찾기</button>
  <button id="find2">자식 전체</button>
</body>
<script>
  //3초 후 새로고침 함수 만들기
  function turnBack() {
    setTimeout(function () {
      location.reload();
    }, 3000);
  };

  $("#parent").click(function () {
    // 2가지 이상의 스타일 변경 시 JSON 형태로 작성, 자바스트크립트 객체 형식
    $("span").parent().css({
      "color": "#e16",
      "border": "2px solid balck",
      "background-color": "orange"
    });
    turnBack();
  });

$("#parents").click(function(){
$("span").parents().css({
      "color": "#e16",
      "border": "2px solid red"
    });
    turnBack();
  });

  $("#until").click(function(){
$("span").parentsUntil(".ancestors").css({
      "color": "#e16",
      "border": "2px solid blue"
    });
    turnBack();
  });

  //great-grandparent 기준
$("#child").click(function(){
  $(".parent").children().css({
      "color": "#e16",
      "border": "2px solid orange"
    });
    turnBack();
});

$("#find").click(function(){
  $(".parent").find("span").css({
      "color": "#e16",
      "border": "2px solid green"
    });
    turnBack();
});

$("#find2").click(function(){
  $(".parent").find("*").css({
      "color": "#e16",
      "border": "2px solid green"
    });
    turnBack();
});
</script>

</html>

틀린 것 확인 할 때 그 부분을 제외하고 다른 부분에 문제가 없는지 주석처리하고 확인해 보기!

제대로 화면, 코딩이 작동하는지 확인 한 후에 어떤 부분이 틀렸는지 확인하고 고치기

저작자표시 비영리 변경금지

'공부기록 > JavaScript' 카테고리의 다른 글

3월 22일 JavaScript - jQuery 요소삭제, AJAX (0)	2023.03.22
3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 (0)	2023.03.21
3월 20일 (2) JavaScript - jQuery event, effect (0)	2023.03.20
3월 20일 (1) JavaScript - 예제, jQuery (0)	2023.03.20
3월 17일 (2) JavaScript - locatoin, history (0)	2023.03.17

새롭게 공부시작하기

3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계)

'공부기록 > JavaScript' 카테고리의 다른 글

티스토리툴바

3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계)

'공부기록 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바