자바스크립트7 - 제이쿼리(JQUERY)

웹 프론트엔드

자바스크립트7 - 제이쿼리(JQUERY)

토리쟁이 2024. 1. 15. 17:29

이번 포스팅에서는 제이쿼리에 대해 다루어 보고자 한다.

제이쿼리란 무엇일까?

제이쿼리(JQUERY)

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화한 오픈 소스 기반의 자바스크립트 라이브러리
주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능(크로스 브라우징)
HTML DOM을 손쉽게 조작이 가능하며, CSS 스타일도 간단히 적용 가능
애니메이션 효과나 대화형 처리를 간단하게 적용 가능
같은 동작을 하더라도 자바스크립트에 비해 더욱 간결하게 구현이 가능
오픈 라이선스를 적용해 누구나 자유롭게 이용이 가능
(단점) 자바스크립트보다 느린 속도

즉, 제이쿼리는 자바스크립트를 간편하게 사용할 수 있도록 지원해주며, 위와 같은 다양한 장점들이 있기에 많이 사용된다.

제이쿼리를 사용하는 방법에는 크게 3가지가 있다.

1. 제이쿼리 파일 다운로드

2. URL을 이용한 사용

3. CDN(Content Delivery Network) 사용

https://releases.jquery.com/ 에 들어가면 원하는 버전의 제이쿼리를 사용할 수 있다.

제이쿼리 기본 틀은 다음과 같다.

제이쿼리에서의 선택자는 CSS에서 사용하는 선택자를 그대로 사용할 수 있다.

설정하기

$(선택자).val(); - 선택한 요소의 value 값을 가져온다.
$(선택자).val("설정할 값"); - 선택한 요소의 value 값을 원하는 값으로 설정한다.
$(선택자).css('속성', 속성값); - 선택한 요소의 style을 변경한다.
$(선택자).attr('속성', 속성값); - 선택한 요소의 style을 변경한다. (js의 setAttribute와 동일)
$(선택자).text("설정할 글자"); - 선택한 요소의 text를 변경한다. (js의 innerText과 동일)
$(선택자).html("설정할 HTML"); - 선택한 요소의 html을 변경한다. (js의 innerHtml과 동일)

<script>
        function setValue(){
            // input 태그의 value 값을 설정
            $("input").val('setting');
        }

        function getValue(){
            // input 태그의 value 값을 가져오기
            alert($('input').val());
        }

        function changeStyle(){
            // span 태그의 스타일 변경
            $('span').css('font-size', '28px');
        }

        function changeAttribute(){
            $('input').attr('placeholder', 'name');
            // 자바스크립트 setAttribut('placeholder', 'name');
        }

        function changeText(){
            $('span').text('jQuery text~');
            // innerText = '~~' 와 동일
        }

        function changeHtml(){
            $('p').html('<h3>jQuery html</h3>');
            // innerHtml = '~~' 과 동일
        }
    </script>
</head>
<body>
    <input type="text">
    <button onclick="setValue()">setValue</button>
    <button onclick="getValue()">getValue</button>
    <br>
    <span>안녕</span>
    <button onclick="changeStyle()">changeStyle</button>
    <button onclick="changeAttribute()">changeAttribute</button>

    <p>p태그</p>
    <button onclick="changeText()">changeText</button>
    <button onclick="changeHtml()">changeHtml</button>
</body>

여기에서는 제이쿼리에서의 요소 추가, 삭제, 탐색에 대해 공부해볼 것이며, 예제 코드에 제이쿼리 뿐만 아니라 자바스크립트로 작성할 경우의 코드도 같이 넣었으니 자바스크립트에 비해 제이쿼리가 얼마나 간편한지 체감할 수 있을 것이다.

요소의 추가&삭제&탐색

$(선택자).append(요소); - 선택된 요소의 자식 요소 중 마지막으로 추가 (js의 append와 동일)
$(선택자).prepend(요소); - 선택된 요소의 자식 요소 중 첫 번째로 추가 (js의 prepend와 동일)
$(선택자).before(요소); - 선택된 요소의 형제 요소로 이전 형제로 추가 (js의 before과 동일)
$(선택자).after(요소); - 선택된 요소의 형제 요소로 다음 형제로 추가 (js의 after과 동일)
$(선택자).remove(); - 선택한 요소를 DOM 트리에서 삭제 / 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제 (js의 remove와 동일)
$(선택자).empty(); - 선택한 요소의 자식 요소를 모두 삭제 / 선택된 요소는 남아있고 그 안이 다 텅..
$(선택자).parent(요소); - 선택한 요소의 바로 위에 존재하는 하나의 부모 요소 선택 (js의 parent와 동일)
$(선택자). parents(요소); - 선택한 요소의 부모, 모든 조상을 선택 (js의 parents와 동일)
$(선택자).next(요소); - 선택한 요소의 바로 다음에 위치한 형제 요소 선택 (js의 next와 동일)
$(선택자).prev(요소); - 선택한 요소의 바로 이전에 위치한 형제 요소 선택 (js의 prev와 동일)
$(선택자).children(요소); - 선택된 요소의 모든 자식 요소 선택 (js의 children와 동일)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jQuery CDN 불러오기 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Document</title>
    <script>
        //요소 추가
        function appendJS(){
            // 부모 ul 에 자식 li를 append
            // 1. 부모 ul 선택
            let ul = document.querySelector('ul');
            // 2. 추가할 자식 li 요소 생성
            let li = document.createElement('li');
            // 3. li 요소에 내용 추가
            li.innerText ='red';
            // 4. ul에 자식 li를 append
            ul.append(li);
        }

        function appendJQ(){
            $('ul').append('<li>jQuery append</li>');
        }

        // 요소 맨 앞에 추가(prepend)
        function prependJS(){
            // 부모 ul 에 자식 li를 append
            // 1. 부모 ul 선택
            let ul = document.querySelector('ul');
            // 2. 추가할 자식 li 요소 생성
            let li = document.createElement('li');
            // 3. li 요소에 내용 추가
            li.innerText ='red';
            // 4. ul에 자식 li를 append
            ul.prepend(li);
        }

        function prependJQ(){
            $('ul').prepend('<li>jQuery prepend</li>');
        }

        // 형제 요소 추가
        function beforeJS(){
            // 1. 추가할 기준이 되는 요소 선택
            let green = document.querySelector('.green');
            // 2. 추가할 요소 생성
            let li = document.createElement('li');
            // 3. li 요소에 내용 추가
            li.innerText = 'before JS';
            // 4. 기준 요소 앞에 요소 추가
            green.before(li);
        }

        function beforeJQ(){
            $('.green').before('<li>jQuery before</li>');
        }

        function afterJS(){
            // 1. 추가할 기준이 되는 요소 선택
            let green = document.querySelector('.green');
            // 2. 추가할 요소 생성
            let li = document.createElement('li');
            // 3. li 요소에 내용 추가
            li.innerText = 'after JS';
            // 4. 기준 요소 앞에 요소 추가
            green.after(li);
        }

        function afterJQ(){
            $('.green').after('<li>jQuery after</li>');
        }

        // 요소 삭제
        // remove
        function removeJS(){
            // 삭제할 요소 선택
            let li = document.querySelector('#li2');
            // 삭제
            li.remove();
        }

        function removeJQ(){
            $('#li2').remove();
        }

        // empty
        function emptyJS(){
            // 비울 요소 선택
            let nums = document.querySelector('.nums');
            nums.innerHTML=' '; // 전체 비우기
        }

        function emptyJQ(){
            $('.nums').empty(); // nums 클래스의 자식 요소 비어짐(사라짐)
        }

        // 요소 탐색
        function findParent(){
            // parent(): 부모요소 반환
            console.log($('#li2').parent());
        }

        function findParents(){
            // parent(): 부모, 조상요소 반환
            console.log($('#li2').parents());
        }

        function findNext(){
            // next(): nextSibling과 동일
            console.log($('#li2').next());
            console.log($('#li2').next()[0]); // 0번째 요소에 접근
        }

        function findPrev(){
            // prev(): prevSibling과 동일
            console.log($('#li2').prev());
            console.log($('#li2').prev()[0]); // 0번째 요소에 접근
        }

        function findChildren(){
            // children(): 자식 요소 모두 반환
            console.log($('.nums').children());
        }

    </script>
</head>
<body>
    <ul>
        <li>orange</li>
        <li class="green">green</li>
        <li>navy</li>
        <!--요소 추가하기-->
    </ul>
    <button onclick="appendJS()">append js</button>
    <button onclick="appendJQ()">append jQuery</button>

    <button onclick="prependJS()">prepend js</button>
    <button onclick="prependJQ()">prepend jQuery</button>

    <button onclick="beforeJS()">before js</button>
    <button onclick="beforeJQ()">before jQuery</button>

    <button onclick="afterJS()">after js</button>
    <button onclick="afterJQ()">after jQuery</button>

    <!--요소 삭제-->
    <div>
        <div class="nums">
            <li>1</li>
            <li id="li2">2</li>
            <li>3</li>
            <li>4</li>
        </div>
    </div>
    <button onclick="removeJS()">remove js</button>
    <button onclick="removeJQ()">remove jQuery</button>

    <button onclick="emptyJS()">empty js</button>
    <button onclick="emptyJQ()">empty jQuery</button>

    <br>
    <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("클래스명"); - 선택된 요소의 클래스 여부 확인(true/false 반환)
$(선택자).toggleClass("클래스명"); - 선택된 요소에 클래스가 있으면 추가, 없으면 삭제
$(선택자).switchClass("클래스명1", "클래스명2", 시간) - 설정한 시간동안 클래스1를 클래스2로 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jQuery CDN 불러오기 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!--클래스 조작을 위한 jquery CDN-->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
    
    <title>Document</title>
    <style>
        .color-blue{
            color: blue;
        }
        .fs-50{
            font-size: 50px;
        }
        .bg-pink{
            background-color: pink;
        }
        .color-orange{
            color: orange;
        }
    </style>
    <script>
        function addClass(){
            $('#hi').addClass('fs-50');
        }

        function removeClass(){
            $('#hi').removeClass('fs-50');
            //$('#hi').removeClass(); // 클래스 모두 제거
        }

        function hasClass(){
            // true or false 반환
            console.log($('#hi').hasClass('fs-50')); // 'fs-50'이라는 클래스가 있는지
        }

        function toggleClass(){
            // 있으면 삭제, 없으면 추가
            $('#hi').toggleClass('bg-pink');
        }

        function switchClass(){
        // 애니메이션 역할
            $('#hi').switchClass('color-blue', 'color-orange', 2000) // // 2000밀리초(1초=1000밀리초)동안 color-blue 클래스를 color-orange 클래스로 변경
        }
    </script>
</head>
<body>
    <p id="hi" class="color-blue">안녕하세요</p>
    <button onclick="addClass()">클래스 추가</button>
    <button onclick="removeClass()">클래스 삭제</button>
    <button onclick="hasClass()">클래스 유무 확인</button>
    <button onclick="toggleClass()">클래스 toggle</button>
    <button onclick="switchClass()">클래스 switch</button>
</body>
</html>

EventListener

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

간단한 이벤트만 짚고 넘어가보도록 하겠다.

Loading Event

$().ready() - 돔 트리 생성이 완료되었을 때(로딩이 다 되었을 때)

$() -위와 동일함 / ()안에 함수 작성

마우스나 키보드 이벤트 등.. 자바스크립트6 포스팅에서 다뤘던 이벤트와 동일하다.

예제)

// click
        $('button').click(function(){
            alert('클릭');
        })

        // 위의 코드와 동일
        $('button').on('click', function(){
            alert('클릭2');
        })
 
 

// keydown
        $('input').keydown(function(e){
            console.log("e:", e);
            console.log("e.target:", e.target); //이벤트가 일어난 요소 선택
            console.log("e.key:", e.key); // 값
            if(e.key == 'Enter'){
                alert('enter 입력!');
            }
            console.log("this:", this); // e.target과 동일

            console.log("e.target type:",typeof e.target); // text
            console.log("this type:",typeof this); // text
        })

위의 예제를 보면, this가 나오는데 이벤트가 발생한 부분을 뜻한다. (e.target과 동일)

this와 e.target 모두 해당 이벤트가 일어난 요소를 텍스트값으로 반환한다.

따라서, 해당 부분에 대한 처리를 하고 싶을 때는 다시 해당 요소를 선택해야되므로 $(this) 나 $(e.target)으로 접근하여 처리를 해주어야 한다.

참고

선택자 모음

https://lcs1245.tistory.com/entry/JavaScriptJQuery-%EC%84%A0%ED%83%9D%EC%9E%90-Selector-%EB%AA%A8%EC%9D%8C

'웹 프론트엔드' 카테고리의 다른 글

자바스크립트8 - 구조 분해 할당 & 전개 구문 (1)	2024.01.23
반응형 웹(Responsive Web) (0)	2024.01.18
자바스크립트6 - 이벤트 (0)	2024.01.15
자바스크립트5 - DOM(Document Object Model) (0)	2024.01.14
자바스크립트4 - 표준 내장 객체 (0)	2024.01.12

현재글자바스크립트7 - 제이쿼리(JQUERY)

printf("Hello dev_TORY!");