JAVASCRIPT

[JavaScript]제이쿼리(jQuery)

 
Contents
  1. [JavaScript]제이쿼리(jQuery)

[JavaScript]제이쿼리(jQuery)

자바스크립트 코드를 줄여주는 라이브러리. 최근에는 리액트가 나와서 제이쿼리를 사용하지 않는 추세라고는 하지만 이미 제이쿼리를 사용하여 개발한 프로그램이 많이 존재하기 때문에 꼭 알아두는 것이 좋다.

제이쿼리 시작하기

파일을 직접 다운로드 받아 html 상단에서 로드해주는 방법도 있지만 cdn을 사용하면 다운로드 받지 않아도 jQuery를 사용할 수 있다. cdn은 인터넷 사용이 원활해야 하므로 그렇지 못한 지역에서는 직접 다운로드 받는 것이 좋다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

https://code.jquery.com

 

제이쿼리 함수

<!DOCTYPE html>
<html lang="en">
<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="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
  
    <h4 id="test" class="test">안녕하세요</h4>

    <script>

        //document.querySelector("#test");
        //document.querySelectorAll(".test");
        $(".test") // 클래스명 선택
        $("#test").html("안녕"); // html 내부 변경
        $("#test").text("안녕"); // text 변경
        $("#test").text(); // text 로드
        $("#test").css("color","red"); // 스타일 지정
        $("#test").attr("src","http://~~~") // 속성 변경

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

 

제이쿼리 사용하는 이유

  1. 자바스크립트 코드가 줄어든다.
  2. 자바스크립트에서 할 수 없는 일괄 요소 변경이 가능하다.
  3. 애니메이션 UI를 쉽게 구현할 수 있다.
Javascript jQuery
최신글
RELATED POST