[JQuery] JQuery에 대하여 알아보기

JQuery

[JQuery] JQuery에 대하여 알아보기

YaluStar 2023. 1. 22. 02:42

안녕하세요.

이번에는 JavaScript 라이브러리 중 JQuery에 대해서 알아보겠습니다.

JQuery

JQuery는 HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.

장점

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

사용 방법

파일 다운로드
CDN 사용

여기서는 CDN 사용 방식으로 진행합니다.

CDN 링크 바로가기

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

사이트에 접속하면 버전 및 여러 종류를 확인할 수 있는데 여기서 제일 무난한 minified를 사용하겠습니다.

minified를 클릭하면 다음과 같이 나오는데 해당 주소를 복사해서 사용할 html 문서의 head 태그 사이에 입력합니다.

<!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">
    <title>JQuery demo</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

코드 사용 방법 기초

$( 선택자 ).동작함수();
$ 는 jQuery() 함수의 축약 형태로, 식별자 역할을 합니다.

JQuery 메서드 맛보기

val(), 값 변경

$(선택자).val()
value 값을 가져올 수 있습니다.

$(선택자).val(’설정할 값’)
value 값을 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="en, 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="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <title>JQuery</title>
    <script>
        function getData() {
            // 자바스크립트 방식
            var value1 = document.getElementById('input1').value;
            console.log(value1);

            // JQuery 방식
            var value2 = $("#input1").val();
            console.log(value2);
        }

        function setData() {
            // 자바스크립트 방식
            // document.getElementById('input1').value = 'hi';

            // JQuery 방식
            $('#input1').val('hi');
        }
    </script>
</head>
<body>
    <input type="text" id="input1">
    <button type="button" onclick="getData();">값 가져오기</button>
    <button type="button" onclick="setData();">값 불러오기</button>
</body>
</html>

값 가져오기 버튼을 누르면 입력한 값을 콘솔 창에 출력시키고,

값 불러오기를 누르면 ‘hi’를 입력 창에 띄어줍니다.

style(css) 변경

<!DOCTYPE html>
<html lang="en, 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="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <title>JQuery</title>
    <script>     
        function setStyle1() {
            var p1 = document.querySelector('#p1');
            p1.style = "background-color: yellow; color: blue;"
        }
        function setStyle2() {
            $('#p1').css("background-color", "red");
        }
        function setStyle3() {
            $('#p1').attr('style', 'background-color: blue; color: white;');
        }
    </script>
</head>
<body>
    <p id="p1">p태그입니다.</p>
    <button type="button" onclick="setStyle1();">javascript 변경</button>
    <button type="button" onclick="setStyle2();">jquery 변경</button>
    <button type="button" onclick="setStyle3();">jquery 여러 개 변경</button>
</body>
</html>

1번은 JavaScript를 이용하여 배경을 노란색, 글씨 색을 파란색으로 바꿔주고,

2번은 JQuery의 css 기능을 이용하여 배경을 빨간색으로 바꿔줍니다.

3번은 JQuery의 attr 기능을 이용하여 배경을 파란색, 글씨 색을 하얀색으로 바꾸는 방법입니다

$().css() - 요소의 css 속성값을 가져오거나 style을 추가합니다.

$().attr() - 요소의 속성값을 가져오거나 추가합니다.

<!DOCTYPE html>
<html lang="en, 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="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <title>JQuery</title>
</head>
<body>
    <div class="wrap" style="color: red">
        화이팅!!!
    </div>

    <script>
        const value1 = $('div').attr('class');
        const value2 = $('div').css('color');
        const value3 = $('div').attr('color');
        const value4 = $('div').css('css');
 
        console.log(value1);
        console.log(value2);
        console.log(value3);
        console.log(value4);
    </script>
    
</body>
</html>

Text 변경

$().text() - text 글자만 변경합니다.

$().html() - html 태그가 있는 경우 글자 변경하면서 태그도 적용이 됩니다.

<!DOCTYPE html>
<html lang="en, 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="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <title>JQuery</title>
    <script>     
        function changeText() {
            console.log($('#p1').text());
            $('#p1').text('text 글자 변경');
        }
        function changeHTML() {
            $('#p1').html('<strong>html 글자 변경</strong>');
        }
    </script>
</head>
<body>
    <p id="p1">p태그입니다.</p>
    <button type="button" onclick="changeText();">jquery Text</button>
    <button type="button" onclick="changeHTML();">jquery HTML</button>
</body>
</html>

이상

저작자표시 변경금지

'JQuery' 카테고리의 다른 글

[JQuery] JQuery의 이벤트 리스너에 대하여 알아보기 (0)	2023.01.27
[JQuery] JQuery UI 및 switchClass()에 대하여 알아보기 (0)	2023.01.26
[JQuery] JQuery의 클래스 함수에 대하여 알아보기 (0)	2023.01.25
[JQuery] JQuery의 선택자에 대하여 알아보기 (0)	2023.01.24
[JQuery] JQuery의 요소 추가, 삭제에 대하여 알아보기 (0)	2023.01.23

현재글[JQuery] JQuery에 대하여 알아보기

천천히 알아가는 세상