[포스코x코딩온] JQuery의 기초

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 14. 19:14

728x90

Jquery

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

장점

주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
HTML DOM를 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능
애니메이션 효과나 대화형 처리를 간단하게 적용
같은 동작을 하더라도 더욱 짧게 구현 가능
오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

사용

파일 다운로드
CDN(Content Delivery Network) 사용

uncompressed: 압축되지 않은 jQuery코드의 원본 스크립트를 의미. 디버깅에 용이하고 모듈의 구조와 코드를 이해하기에 편리하다. 다만, 파일의 용량이 커서 로딩이 오래 걸린다는 단점이 있다.
minified: jQuery코드가 압축된 형태로 원본 스크립트와 기능은 동일하다. 하지만, 이해하기 어려운 구조, 구문으로 변경된 스크립트이다. 크기가 작아서 배포에는 적합하다.
slim: jQuery3.0에서 추가된 형태로 ajax, effexts와 deprecated로 된 코드를 제거한 스크립트이다.
slim minified: slim을 압축한 형태이다.

여기서 사용할 코드를 클릭하여 script를 복사 하여 VSCode에 넣으면 jQuery를 사용할 수 있다.

JQuery 기초

$(선택자).함수(); =>여기서 $란, jQuerty(선택자).함수();의 축약으로 $()에 있는 parameter를 선택자를 전달받아 특정 HTML 요소를 선택할 수 있다. 선택된 요소는 jQuery 객체를 의미한다.

JQuery 메소드

$(선택자).val(); : Input과 같은 value 값을 가져올 수 있다. ( let value = $("#input").val(); )
- let value = document.getElementById("input").value; => let value = $("input").val();
$(선택자).val("설정할 값"); : Input과 같은 곳에 value 값을 설정할 수 있다. ($("#input").val("설정 완료"); )
- document.getElementById("input").value = "안녕"; => $("input").value("안녕");
$(선택자).css("속성", "속성값"); : 스타일 변경하기
- 선택자.style = "border: 10px ...;"; => $(선택자).css("border","10px...");
$(선택자).attr("속성", "속성값"); : 속성 변경하기
- 선택자.setAttribute("속성", "속성값"); => $("선택자").attr("속성", "속성값");
$(선택자).text("글자"); : Text 변경하기
- 선택자.innerText = "글자"; => $(선택자).text("글자");
$(선택자).html(html); : HTML 변경하기
- 선택자.innerHTML = "글자 및 태그" => $(선택자).html("글자 및 태그");

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous"
    ></script>
    <script>
      // $(선택자).함수();
      // $란? jQuery(선택자).함수(); 의 축약 => $(선택자).함수();
      // $() : parameter로 선택자를 전달받아 특정 HTML 요소를 선택한다. -> 선택된 요소는 jQuery 객체
      // 함수 : jQuery 메소드
      function setValue() {
        // document.getElementById("input").value = "안녕";

        //jquery문법을 이용해서 input값 할당하기
        $("#input").val("안녕");
      }
      function getValue() {
        //document로 요소 선택하고, 그 요소가 input일 때 value 가쟈오기
        // let value = document.getElementById("input").value;

        //jquery문법을 이용해서 input의 값 가져오기
        let value = $("#input").val();

        alert(value);
      }
      function changeStyle() {
        //     let div = document.querySelector("div");
        //     div.style = "border: 10px solid black;";

        // $().css("속성", 속성값);
        $("div").css("border", "10px solid black");
      }
      function changeText() {
        // let div = document.querySelector("div");
        // div.innerText = "<b>jqery 사용 전 글자 바꾸기</b>";

        //$().text();
        $("div").text("<b>jquery 사용 후</b>");
      }
      function changeAttribute() {
        // let a = document.querySelector("a");
        // a.setAttribute("href", "https://google.com");
        //setAttribute(속성, 속성값)

        //$().attr("속성","속성값")
        $("a").attr("href", "https://google.com");
      }
      function changeHTML() {
        // let div = document.querySelector("div");
        // div.innerHTML = "<b>jqery 사용 전 글자 바꾸기</b>";

        //$().html();
        $("div").html("<b>jquery 사용 후</b>");
      }
    </script>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
      .div1 {
        background-color: red;
      }
      .div2 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="https://naver.com">naver</a>
    <input type="text" id="input" />
    <div class="div1"></div>
    <div class="div2"></div>

    <button onclick="setValue()">setvalue</button>
    <button onclick="getValue()">getvalue</button>
    <button onclick="changeStyle()">changeStyle</button>
    <!-- innerText -->
    <button onclick="changeText()">changeText</button>
    <!-- setAttribute -->
    <button onclick="changeAttribute()">changeAttribute</button>
    <!-- innerHTML -->
    <button onclick="changeHTML()">changeHTML</button>
  </body>
</html>

요소 관련 메소드

$(선택자).append(요소); : 선택된 요소의 자식 요소 중 마지막으로 추가
- document.querySelector("ul").append(li); => $("ul").append(li);
$(선택자).prepend(요소): 선택된 요소의 자식 요소 중 첫번째로 추가
- document.querySelector("ul").prepend(li); => $("ul").prepend(li);
$(선택자).before(요소) : 선택된 요소의 형제 요소로 이전 형제에 추가
- document.querySelector("#li2").before(li); => $("#li2").before(li);
$(선택자).after(요소) : 선택된 요소의 형제 요소로 다음 형제에 추가
- document.querySelector("#li2").after(li); => $("#li2").after(li);
$(선택자).remove(요소) : 선택한 요소를 DOM 트리에서 삭제 / 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제
- document.querySelector("ul").remove(); => $("ul").remove();
$(선택자).empty(요소) : 선택한 요소의 자식 요소를 모두 삭제 / 선택된 요소는 남아 있고 그 안이 다 비워진다.
- document.querySelector("ul").removechild(standard); => $("ul").empty();
$(선택자).parent().함수() : 부모 요소를 모두 반환
$(선택자).parents().함수() : 조상 요소를 모두 반환
$(선택자).next().함수() : 선택한 요소 바로 다음에 위치한 형제 요소 선택
- document의 nextElementSibling와 동일하다.(text는 무시한다.)
$(선택자).prev().함수() : 선택한 요소 바로 이전에 위치한 형제 요소 선택
- document의 previousSibling와 동일하다.(text는 무시한다.)
$(선택자).children().함수() : 선택한 요소의 자식 요소 모두 선택
- document의 children과 동일하다.(text는 무시하고 태그만 가져온다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous"
    ></script>
    <script>
      function append() {
        //append() : 마지막 자식 요소에 추가
        let li = document.createElement("li");

        // li.innerText = "append 된 친구";
        // document.querySelector("ul").append(li);

        //jquery로 요소 생성을 할 수 없다.
        $(li).text("jquery로 append");
        $("ul").append(li);
      }
      function prepend() {
        //prepend() :첫번째 자식 요소에 추가
        let li = document.createElement("li");

        // li.innerText = "prepend 된 친구";
        // document.querySelector("ul").prepend(li);

        //jquery로 요소 생성을 할 수 없다.
        $(li).text("jquery로 prepend");
        $("ul").prepend(li);
      }
      function before() {
        //before() : 기준요소의 앞에 추가한다.
        let li = document.createElement("li");
        li.innerText = "before 된 친구";
        //document.querySelector("#li2").before(li);

        $("#li2").before(li);
      }
      function after() {
        //after() : 기준요소의 앞에 추가한다.
        let li = document.createElement("li");
        li.innerText = "after 된 친구";
        //document.querySelector("#li2").after(li);

        $("#li2").after(li);
      }
      function removeElement() {
        //remove() : 내가 선택한 요소를 삭제함
        // document.querySelector("ul").remove();
        $("ul").remove();
      }
      function emptyElement() {
        // let standard = document.querySelector("li");
        // document.querySelector("ul").removeChild(standard);
        //removeChild() : 부모를 선택하고 삭제할 자식 하나를 보내야 한다.

        //empty() : 선택된 자식들을 모두 삭제한다.
        $("ul").empty();
      }
      function findParent() {
        //parent() : 부모 요소를 반환
        console.log($(".child2").parent());
      }
      function findParents() {
        //parents() : 조상요소를 모두 반환
        console.log($(".child2").parents());
      }
      function findNext() {
        //next() : nextSibling 내 다음 형제를 보여줌
        console.log($(".child2").next());
        //document의 nextElementSibling와 동일(text는 무시)
      }
      function findPrev() {
        //prev() : previousSibling 내 이전 형제를 보여줌
        console.log($(".child3").prev());
        //document의 previousElementSibling와 동일(text는 무시)
      }
      function findChildren() {
        //children() : 부모 요소를 선택했을 때 그 자식요소들을 반환
        console.log($(".parent").children());
        //document의 children과 동일(text는 무시하고 태그만 가져옴)
      }
    </script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li id="li2">2</li>
      <li id="li3">3</li>
    </ul>
    <button onclick="append()">append</button>
    <button onclick="prepend()">prepend</button>
    <button onclick="before()">before</button>
    <button onclick="after()">after</button>
    <button onclick="removeElement()">removeElement</button>
    <button onclick="emptyElement()">emptyElement</button>

    <hr />
    <h5>요소 탐색</h5>
    <div class="ancestor">
      <div class="parent">
        <div class="child1">자식1</div>
        <div class="child2">자식2</div>
        얘는 Text임.
        <div class="child3">자식3</div>
      </div>
    </div>

    <button onclick="findParent()">findParent</button>
    <button onclick="findParents()">findParents</button>
    <button onclick="findNext()">findNext</button>
    <button onclick="findPrev()">findPrev</button>
    <button onclick="findChildren()">findChildren</button>
  </body>
</html>

클래스 조작하기

$(선택자).addClass("클래스명") : 선택된 요소에 클래스 추가
$(선택자).removeClass("클래스명") : 선택된 요소에 클래스 삭제
$(선택자).hasClass("클래스명") : 선택된 요소에 클래스가 있는지 여부 확인 (boolean값)
$(선택자).toggleClass("클래스명") : 선택된 요소에 클래스가 있으면 삭제, 없으면 추가
$(선택자).switchClass("클래스명1", "클래스명2", 시간) : 클래스1을 클래스2로 바꾼다. (시간은 바꿀때 걸리는 시간 의미)
- 사용하기 위해서는 jqueryui의 script를 추가해줘야 한다.

    <script
      src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"
      integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="
      crossorigin="anonymous"
    ></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"
      integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="
      crossorigin="anonymous"
    ></script>
    <style>
      .css1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .css2 {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
    <script>
      function addClass() {
        //$().addClass("클래스명")
        $("div").addClass("css1");
      }
      function removeClass() {
        $("div").removeClass("css1");
      }
      function hasClass() {
        //있는지 여부 확인(boolean값)
        alert($("div").hasClass("css1"));
      }
      function toggleClass() {
        //있으면 삭제, 없으면 추가
        $("div").toggleClass("css1");
      }
      function switchClass() {
        //jQuery-UI를 불러와야 사용 가능
        //$().switchClass("클래스명1", "클래스명2", [시간]);
        $("div").switchClass("css1", "css2", 3000);
      }
    </script>
  </head>
  <body>
    <div></div>
    <button onclick="addClass()">addClass</button>
    <button onclick="removeClass()">removeClass</button>
    <button onclick="hasClass()">hasClass</button>
    <button onclick="toggleClass()">toggleClass</button
    ><button onclick="switchClass()">switchClass</button>
  </body>
</html>

이벤트 리스너

이벤트가 발생했을 때 그 처리르 담당하는 함수

로딩 이벤트
- .ready()
  - window.addEventListener("load", function() {}); => $(window).ready(function () {}); / $(function(){});
- $()
마우스 이벤트
- click()
- mouseover()
- hover()
- scroll()
키보드 이벤트
- keydown()
- keyup()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://code.jquery.com/jquery-3.7.0.js"
      integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <button>button</button>
    <input type="text" name="" id="" />
    <script>
      //로딩 이벤트
      window.addEventListener("load", function () {});

      $(window).ready(function () {});
      //두개가 동일 = > $(window).ready(function(){})  ==  $(function(){})
      $(function () {});
      //아래 3개의 이벤트가 모두 DOM 요소가 불러와진 후에 실행
      $(window).ready(function () {
        console.log("로드 완료1");
      });

      $(document).ready(function () {
        console.log("로드 완료2");
      });
      $(function () {
        console.log("로드 완료3");
      });

      //$().on("click")
      //addEventLister("Click")
      //   $().on("이벤트명","콜백함수")

      //   $("button").on("click", function () {
      //     alert("클릭");
      //   });
      $("button").click(function () {
        alert("클릭");
      });
      $("input").keyup(function (e) {
        console.log(e);
        console.log(e.key);
        console.loe(e.keyCode);
        console.log(e.currentTarget);
        console.log(e.currentTarget.value);
      });
      //on함수를 이용하지 않고 바로 쓸 수 있는 이벤트 함수
      //click, scroll, mouseover, hover, keyup, keydown
    </script>
  </body>
</html>

Github코드(230714 폴더): https://github.com/DongHo-Kang/KDT-8-web.git

GitHub - DongHo-Kang/KDT-8-web

Contribute to DongHo-Kang/KDT-8-web development by creating an account on GitHub.

github.com

실습 바로가기

jquery를 활용한 버튼 클릭 시 이미지 전환 : https://dongho-kang.tistory.com/17

jquery를 활용한 버튼 클릭 시 이미지 전환

jquery를 활용한 이미지 전환 결과 버튼을 누르면 그 글자에 맞는 과일이 뜨게 만들었습니다. 코드 jquery를 사용할 예정이니 CDN을 연결해준다. 첫번째 방법 1. 먼저 버튼들을 만들어 줍니다. 사과

dongho-kang.tistory.com

JQuery를 활용한 색깔 변화 : https://dongho-kang.tistory.com/18

JQuery를 활용한 색깔 변화

JQuery를 활용한 색깔 변화 결과 박스를 클릭하면 색이 자동으로 변하게 만들었습니다. 코드 jquery를 사용할 예정이니 CDN을 연결해준다. 1. div를 이용하여 박스를 하나 만들어 줍니다. 2. onClick시 실

dongho-kang.tistory.com

jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기 : https://dongho-kang.tistory.com/19

jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기

jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기 결과 선택한 날짜를 입력 받아서 내용을 추가하게 만들었습니다. 코드 jquery를 사용할 예정이니 CDN을 연결해준다. 1. 달력 만들기 2023년 7월

dongho-kang.tistory.com

728x90

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

JQuery를 활용한 색깔 변화 (0)	2023.07.14
jquery를 활용한 버튼 클릭 시 이미지 전환 (0)	2023.07.14
[포스코x코딩온] 표준객체, 요소 다루기, 이벤트 (0)	2023.07.13
[포스코x코딩온] JavaScript - 문자열,배열 관련 메소드 / for, forOf, forEach문 (0)	2023.07.12
[포스코x코딩온] JavaScript 기초, 함수, 반복문 (1)	2023.07.11

ABOUT ME

개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자

Jquery

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Jquery

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바