jQuery START ! / 선택자, method

jQuery START ! / 선택자, method

2022. 12. 8. 09:27ㆍStudy/jQuery

2022.12.08.

UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 60

Review

오늘은 jQuery를 처음 배우는 날이다.

선택자를 하나하나 작성해가며 선택자의 기능을 배워보는 시간을 가졌다.

코드가 지저분 해 정리하기가 어려워서 오늘은 공부하는 것을 정말 기록하는 날이니 참고하지는

않았으면 좋겠다.

나는 CSS가 어렵기도 하고 가장 재밌다고 느끼는데, jQuery로도 이렇게 구현할 수가 있다니

너무 신기하고 재밌었다.

JavaScript 보다 문법이 간단해서 머리가 지끈지끈 아프지는 않다.

빨리 JavaScript도 강의를 듣고 공부해서 정리해야하는데 할 일이 태산이다.

원래 국비 교육을 받고 나서 바로 취업을 하는 방향으로 고민을 해보았는데, 아무래도 나는 조금

더 공부를 하고 차근차근 커리어를 쌓아나가는 게 맞다는 판단이 든다.

요즘 이런저런 생각이 많은데, 잘 결정해서 현명하게 커리어를 쌓아나가고 싶다.

파이팅 !

UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 60

: jQuery는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다.

따라서 웹 페이지에서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 한다.

https://code.jquery.com/jquery-3.6.1.min.js

위의 링크로 접속하면 코드가 쫙 뜰 것이다.

1. 오른쪽 마우스를 클릭해 다른 이름으로 저장을 클릭

2. js 라는 새폴더를 만들고 안에 적혀 있는 이름 그대로 파일을 저장

<!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" />
    <script src="../js/jquery-3.6.1.min.js"></script>
    <title>jQuery START !</title>
  </head>
  <body></body>
</html>

중간에 script src ~ 이런 코드가 있다. title 태그 위에 코드를 저장한 경로를 작성하면 '여기서

jQuery를 실행할 것이다' 라고 선언하는 것이다.

jQuery 적용에 관한 더 자세한 사항은 http://www.tcpschool.com/jquery/jq_intro_apply 에서 참고하면 된다 !

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <title>JQuery Intro</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <script>

        $(function() {

            $("p").on("click", function() {

               $("p").css("color", "red");

            });

        });

    </script>

</head>

 

<body>

    <p>이제부터 제이쿼리를 다 같이 공부해보죠!!<br>

    마우스로 글씨를 클릭해보세요!!</p>

</body>

 

</html>

script 문법은 선언문 바로 밑에 적어도 되고, JavaScript처럼 body 태그 안에서 적어도 된다.

<jQuery에 사용되는 선택자>

<조상(ancestor) 요소를 탐색하기 위한 메소드>

.parent() 메소드

.parent() 메소드는 선택한 요소의 부모(parent) 요소를 선택한다.
이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택할 수도 있다.

.parents() 메소드

.parents() 메소드는 선택한 요소의 조상(ancestor) 요소를 모두 선택한다.
이때 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 조상 요소만을 선택할 수도 있다.

.parentsUntil() 메소드

.parentsUntil() 메소드는 선택한 요소의 조상 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택한다.
이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택한다.

.closest() 메소드

.closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택한다.
이 메소드가 요소의 집합을 구하는 방식은 .parents() 메소드와 비슷하지만, 해당 요소의 조상 요소뿐만 아니라 해당 요소 자신까지도 검사하는 점이 다르다.

<형제(sibling) 요소를 탐색하기 위한 메소드>

.siblings() 메소드

.siblings() 메소드는 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.

$(".me").siblings().css({"border": "2px solid red"});

.next() 메소드

.next() 메소드는 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
me 클래스를 가진 요소의 바로 다음 형제 요소 하나를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").next().css({"border": "2px solid red"});

.nextAll() 메소드

.nextAll() 메소드는 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.
이때, 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만 선택할 수도 있다.
me 클래스를 가진 요소의 다음에 있는 형제 요소를 모두 선택, 해당 요소의 CSS 스타일을 변경한다.

$(".me").nextAll().css({"border": "2px solid red"});

.nextUntil() 메소드

.nextUntil() 메소드는 선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택한다.
이때, 선택자를 인수로 전달하지 않으면, .nextAll() 메소드와 동일하게 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다
me 클래스를 가진 요소의 이후 형제 요소 중에서
요소의 마지막 바로 이전까지의 모든 요소를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").nextUntil("li:last").css({"border": "2px solid red"});

.prev() 메소드

.prev() 메소드는 .next(), 메소드와 정반대로 요소들을 선택해 준다.
me 클래스를 가진 요소의 바로 이전 형제 요소 하나를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").prev().css({"border": "2px solid red"});

.prevAll() 메소드

.prevAll() 메소드는 .nextAll() 메소드와 정반대로 요소들을 선택해 준다.
me 클래스를 가진 요소의 이전에 있는 형제 요소를 모두 선택, 해당 요소의 CSS 스타일을 변경한다.

$(".me").prevAll().css({"border": "2px solid red"});

.prevUntil() 메소드

.prevUntil() 메소드는 .nextUntil() 메소드와 정반대로 요소들을 선택해 준다.
me 클래스를 가진 요소의 이전 형제 요소 중에서
요소의 첫번째 바로 이전까지의 모든 요소를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").prevUntil("li:first").css({"border": "2px solid red"});

<jQuery로 CSS style 적용하기 - 선택자1>

- HTML

    <p>jQuery</p>
    <p id="p01">jQuery</p>
    <p class="txt">jQuery</p>
    <div class="txt">div tag</div>

- CSS

      @font-face {
        font-family: pretendard;
        src: url(../fontawesome-free-6.2.0-web/webfonts/Pretendard-Regular.woff)
          format("woff");
      }

      * {
        padding: 0;
        margin: 0;

        font-family: pretendard, sans-serif;
      }

      body {
        max-width: 1200px;

        margin: 130px auto;

        text-align: center;
      }

      #p01 {
        color: #0f0;
      }

- jQuery

    <script>
    
      /*   $(document).ready(function () {
         $("p").css("color", "#f00");
        });  */

      /*  $(function () {
        $("p").css("color", "#f00");
      });  */

      /*  $(function () {
        $("div.txt").css("color", "red");
      });   */

      /*  $(function () {
        $("#p01, .txt").css("color", "red");
      });  */

      $(function () {
        $("p").css("color", "hotpink").css("fontSize", "30px");
      });

      $(function () {
        $("#p01")
          // .css("color", "blue")
          // .css("fontSize", "24px")
          // .css("backgroundColor", "#ff0");
          .css("color", "red")
          .css("font-size", "24px")
          .css("backgroundColor", "yellow")
          .css("padding", "20px");
        $(".txt").css({
          color: "#00f",
          "font-size": "50px",
          backgroundColor: "pink",
        });
      });
      
    </script>

엥 웹 캡쳐를 했더니 문구가 왜 저렇게 지지직거리듯이 나오는지 모르겠다.

원래 그냥 예쁜 핑크 문구다...

<jQuery로 CSS style 적용하기 - 선택자2>

- HTML

    <h1>h1 태그</h1>
    <h2>h2 태그</h2>
    <h3>h3 태그</h3>
    <h4>h4 태그</h4>
    <h5>h5 태그</h5>
    <h6>h6 태그</h6>
    <br />
    <hr />
    <br />
    <div class="container">
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
      </ul>
      <p>Portfolio</p>
    </div>
    <div class="div1">문단 태그</div>
    <div class="div2">텍스트와 inline 속성을 가진 요소만 올 수 있다.</div>
    <div class="div3">
      <p>p 태그는 중복으로 사용하면 안 된다.</p>
    </div>

- jQuery

    <script>
      $(function () {
        /*  $("li:first").css("border", "1px solid #f00").css("padding", "10px");   */

        // $("li:last").css("border", "1px solid #f00");

        // $("li:even").css("border", "1px solid #f00");

        // $("li:odd").css("border", "1px solid #f00");

        /*  $(".container p:first-of-type").css("border", "1px solid #f00");  */

        // $("p:nth-last-child(1)").css("border", "1px solid #f00");

        // $("p:only-child").css("border", "1px solid #f00");

        // $("p:only-of-type").css("border", "2px solid #f00");

        // $(".container > p").css("border", "2px solid #f00");

        // $(".container p").css("border", "2px solid #f00");

        // $("ul + p").css("border", "2px solid #f00");

        // $("ul ~ p").css("border", "2px solid #f00");

        // $("li:eq(1)").css("border", "2px solid #f00");

        // $("li:gt(1)").css("border", "2px solid #f00");

        // $("li:lt(1)").css("border", "2px solid #f00");

        // $("li:not(:lt(1))").css("border", "2px solid #f00");

        $(":header").css("border", "1px solid #f00");
      });
    </script>

<jQuery로 CSS style 적용하기 - 속성 선택자>

- HTML

    <div class="container">
      <ul>
        <li class="html">HTML</li>
        <li class="css">CSS</li>
        <li class="css3">CSS3</li>
        <li class="javascript">JavaScript</li>
        <li class="jQuery">jQuery</li>
      </ul>
      <p><img src="../../마이페이지/img/pado.jpeg" alt="photo1" /></p>
      <p><img src="../../마이페이지/img/window.jpg" alt="photo2" /></p>
      <p>Portfolio</p>
      <p>Portfolio</p>
      <p>Portfolio</p>
    </div>
    <div class="div1">문단 태그</div>
    <div class="div2">텍스트와 inline 속성을 가진 요소만 올 수 있다.</div>
    <div class="div3">
      <p>p 태그는 중복으로 사용하면 안 된다.</p>
    </div>

- jQuery

    <script>
    
      $(function () {
        // 속성선택자
        // [name = "value"]

        $('li[class="html').css("color", "blue");

        // $('img[alt="photo1"]').css("width", "300px");
        $('img[alt^="photo1"]').css("width", "300px");

        $('li[class^="css"]').css("color", "green");
        // li 요소 중에서 class 속성이 css로 시작하는 요소 선택
        $('li[class$="3"]').css("color", "#f00");
        // li 요소 중에서 class 속성이 3로 끝나는 요소 선택

        $('li[class*="as"]').css("color", "#green");
        // li 요소 중에서 class 속성이 as가 포함되어 있는 요소 선택

        $(".container").children("p").text("자식 요소");

        $(".html").parent().css("color", "green");

        $(".css").parents().css("color", "pink");

        $(".html").parentsUntil("body").css("color", "#f00");

        $(".html").next().css("color", "#f00");

        $(".html").nextAll().css("color", "#f00");

        $(".html").nextUntil(".css3").css("color", "#f00");

        $(".html").prev().css("color", "#f00");

        $(".container .css3").siblings().css("color", "#f00");

        $(".container li:not('.css3')").css("color", "#f00");

        $(".container li").not(".css3").css("color", "#f00");

        $(".container li").filter(".css3").css("color", "#f00");

        $(".container li").slice(0, 2).css("color", "#f00");
      });
      
    </script>

<jQuery의 여러가지 메소드 알아보기>

- HTML

    <div class="container">
      <ul>
        <li class="html">HTML</li>
        <li class="css">CSS</li>
        <li class="css3">CSS3</li>
        <li class="javascript">JavaScript</li>
        <li class="jQuery">jQuery</li>
        <li class="blank"></li>
      </ul>
      <p>Portfolio</p>
      <p>Portfolio</p>
      <p>Portfolio</p>
    </div>
    <div class="div1">문단 태그</div>
    <div class="div2">텍스트와 inline 속성을 가진 요소만 올 수 있다.</div>
    <div class="div3">
      <p>p 태그는 중복으로 사용하면 안 된다.</p>
    </div>

- jQuery

    <script>
    
      $(function () {
        /*  $(".container li:empty").text("blank");
        $(".container li:contains(css)").text("blank");
        $(".container:has(p)").text("blank");  */
        /* .container 클래스 하위에 p 요소가 있을 경우, 
        .container 클래스를 선택  */

        //노드구조변경
        // $("ul").append('<li class="page">page</li>');

        // $("ul").prepend('<li class="page">page</li>');

        $('<li class="page">page</li>').appendTo("ul");

        $('<li class="page">page</li>').prependTo("ul");

        // $(".container").clone().appendTo("body");

        $(".container").clone().prependTo("body");

        $(".container p").wrap('<div class="in"></div>');

        $(".container p").wrapAll('<div class="in"</div>');

        $(".container p").wrapInner('<div class="in"></div>');

        $(".html").after('<li class="new">new</li>');
        $(".html").before('<li class="new">new</li>');

        $('<li class="new">new</li>').insertAfter(".html");
        $('<li class="new">new</li>').insertBefore(".html");

        $(".cs").replaceWith('<li class="replace_css">대체된 서식</li>');

        $('<li class="replace_css">대체된 서식</li>').replaceAll(".javascript");
      });
      
    </script>

<replace(), slice() 메소드 알아보기>

- HTML

<p>오늘은 목요일입니다</p>

- jQuery

    <script>
    
      $(function () {
        let txt = $("p").text();
        console.log(txt);

        let txt1 = txt.slice(0, 3);
        console.log(txt1);

        let txt2 = txt1.replace("오늘은", "내일은");
        console.log(txt2);
        console.log(txt.replace(txt.slice(0, 2), "내일"));

        let txt3 = txt.replace(txt.slice(0, 2), "내일");
        console.log(txt3);
        console.log(txt3.replace(txt3.slice(4, 5), "금"));

        let txt4 = txt
          .replace(txt.slice(0, 2), "내일")
          .replace(txt.slice(4, 5), "금");
        console.log(txt4);
      });
      
    </script>

<attr, removeattr(), remove(), empty() 메소드 알아보기>

- HTML

    <p>오늘은 목요일입니다</p>
    <img src="../../마이페이지/img/win.jpeg" alt="" />
    <p class="week">내일은 금요일이야아 -</p>

    <input type="text" value="변경 전" />
    <button>Click me !</button>

- jQuery

    <script>
    
      $(function () {
        $("img").css("width", "500px");
      });
      $(function () {
        $("p").attr("class", "study");

        // $("img").attr("alt", "photo2").attr("id", "visual");
        $("img").attr({ alt: "photo2", id: "visual" });

        $("p").removeAttr("class");

        $(".week").remove();

        $(".week").empty();

        /*   $("button").click(function () {
                 $("input").val("변경 후");
               });   */

        $("button").click(function () {
          if ($("input").val() == "변경 전") {
            $("input").val("변경 후");
          } else {
            $("input").val("변경 전");
          }
        });
      });
      
    </script>

<slice() 이용한 click event 예제>

- HTML

    <div id="wrap">
      <div id="nav">
        <ul>
          <li><a href="#">Photo1</a></li>
          <li><a href="#">Photo2</a></li>
          <li><a href="#">Photo3</a></li>
          <li><a href="#">Photo4</a></li>
        </ul>
      </div>
      <div id="photo">
        <img src="img/photo1.jpg" alt="" />
      </div>
    </div>

- CSS

      @font-face {
        font-family: pretendard;
        src: url(../fontawesome-free-6.2.0-web/webfonts/Pretendard-Regular.woff)
          format("woff");
      }

      * {
        padding: 0;
        margin: 0;

        font-family: pretendard, sans-serif;
      }

      body {
        max-width: 1200px;

        margin: 130px auto;

        text-align: center;
        line-height: 50px;

        font-size: 18px;
      }

      ul,
      li {
        list-style: none;
      }

      a {
        text-decoration: none;

        color: #222222;
      }

      #wrap {
        width: 500px;
        margin: 0 auto;
      }

      ul li {
        float: left;

        width: 25%;

        text-align: center;
      }

      ul li a {
        display: block;
      }

      ul li a:hover {
        background: #222222;
        color: #fff;
      }

      #photo img {
        width: 500px;
      }

- jQuery

    <script>
    
      $(function () {
        $("ul li:nth-child(1) a").click(function () {
          $("#photo img").attr("src", "img/photo1.jpg");
        });

        $("ul li:nth-child(2) a").click(function () {
          $("#photo img").attr("src", "img/photo2.jpg");
        });

        $("ul li:nth-child(3) a").click(function () {
          $("#photo img").attr("src", "img/photo3.jpg");
        });

        $("ul li:nth-child(4) a").click(function () {
          $("#photo img").attr("src", "img/photo4.jpg");
        });

        $("ul li a").click(function () {
          let txt = $(this).text();
          let num = txt.slice(-1);
          console.log(num);

          let arr = ["봄", "여름", "가을", "겨울"];

          $("photo img")
            .attr("src", "img/" + txt + ".jpg")
            .attr("alt", arr[num - 1]);
        });
      });
      
    </script>

<replace(), slice() 이용한 click event 예제>

- HTML

    <div id="wrap">
      <div id="nav">
        <ul>
          <li><a href="#">Photo1</a></li>
          <li><a href="#">Photo2</a></li>
          <li><a href="#">Photo3</a></li>
          <li><a href="#">Photo4</a></li>
        </ul>
      </div>
      <div id="photo">
        <img src="img/photo1.jpg" alt="" />
      </div>
    </div>

- CSS

      @font-face {
        font-family: pretendard;
        src: url(../fontawesome-free-6.2.0-web/webfonts/Pretendard-Regular.woff)
          format("woff");
      }

      * {
        padding: 0;
        margin: 0;

        font-family: pretendard, sans-serif;
      }

      body {
        max-width: 1200px;

        margin: 130px auto;

        text-align: center;
        line-height: 50px;

        font-size: 18px;
      }

      ul,
      li {
        list-style: none;
      }

      a {
        text-decoration: none;

        color: #222222;
      }

      #wrap {
        width: 500px;
        margin: 0 auto;
      }

      ul li {
        float: left;

        width: 25%;

        text-align: center;
      }

      ul li a {
        display: block;
      }

      ul li a:hover {
        background: #222222;
        color: #fff;
      }

      #photo img {
        width: 500px;
      }

- jQuery

    <script>
    
      $(function () {
        $("ul li a").click(function (e) {
          e.preventDefault();
          let txt = $(this).text(); // this는 클릭한 나 자신
          let img_path = $("img").attr("src");

          $("img").attr(
            "src",
            img_path.replace(img_path.slice(-5, -4), txt.slice(-1))
          );
        });
      });
      
    </script>

replace() 이용

* 내용 출처

: TCP School

* 이미지 출처

instagram: @postershop.kr

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

jQuery : 웹디자인기능사 실기 문제 - silde (0)	2022.12.20
웹디자인 기능사 실기 연습 - 가로 메뉴 만들어보기 (0)	2022.12.16
jQuery : animate() / setInterval() / clearInterval() 메소드 (0)	2022.12.13
jQuery Effects (0)	2022.12.12
jQuery click event : attr() / slice() / replace() / class 추가, 제거 (0)	2022.12.09

인기 검색어

최근 게시글

아카이브

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

관련글

티스토리툴바