[jQuery] jQuery 함수

WEB/jQuery

[jQuery] jQuery 함수

developer of the night sky 2023. 10. 13. 12:42

🔻jQuery() 함수

jQuery 라이브러리의 핵심이며, HTML 문서 내에서 요소를 선택하고 조작하기 위한 강력한 도구이다.

이 함수를 사용하여 CSS 선택자를 이용해 HTML 요소를 찾고, 해당 요소에 대해 다양한 작업을 수행한다.

🔻jQuery() 함수 특징

1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다.
2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다.
3. 자바스크립트 객체와 jQuery 객체는 서로 형변환할 수 있다.

기본 뼈대

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <h1>jQuery 함수</h1>
    <input type="button" value="확인" name="btn1" id="btn1">    
    <hr>
    <!-- 에밋 작성 -->
    <!-- div#box$.box{상자$}*5 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    <div id="box4" class="box">상자4</div>
    <div id="box5" class="box">상자5</div>

    <script src="../asset/js/jquery-1.12.4.js"></script>

</body>
</html>

1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다.

jQuery('CSS 선택자').css() 로 접근한다.

    <script>
        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {

            // jQuery + CSS 선택자
            jQuery('#btn1').css('color', 'blue');

    </script>

2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다.

CSS 조작법 비교하기(DOM, forEach, jQuery)

다섯개 box의 color 조작

DOM

    <script>
        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {
        
            //DOM
            const list = document.getElementsByClassName('box');

            for (let i=0; i<list.length; i++) {
                list[i].style.color = 'blue';
            }
        });
    </script>

forEach

    <script>
        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {

            //list : HTMLCollection (유사배열)
            const list = document.getElementsByClassName('box');

            //forEach > new Array()에서만 동작한다.
            // list.forEach(box => box.style.color = 'yellow');
            Array.from(list).forEach(box => box.style.color='yellow');      //array로 랩핑해준다.


        });
    </script>

배열과 forEach 사용시 주의해야할 점이 있는데 사실 'const list = document.getElementsByClassName('box');'로 찾은 list는 배열이 아닌 HTMLCollection 형태의 유사배열이다. HTMLCollection 은 완전한 배열이 아니기에 배열 사용법대로 사용할 수 없다. 그래서 Array.from()을 통해 랩핑하여 사용한다.

jQuery

    <script>
        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {

            //태그 선택자
            jQuery('div').css('color', 'orange');

        });
    </script>

위의 코드는 페이지 내의 모든 <div> 요소의 색상을 orange색으로 변경한다. 그러나 이 코드에서는 루프를 직접 작성하지 않았다. jQuery는 선택한 모든 <div> 요소에 대해 자동으로 루프를 실행하여 각 요소에 대해 스타일을 적용한다.

    <script>
        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {

            //id 선택자
            jQuery('#box1').css('color','blue');

            //class 선택자
            jQuery('.box').css('color', 'green');

            //그 외 선택자
            jQuery('h1, div:nth-child(even)').css('color','red');
        });
    </script>

태그 선택자, id 선택자, class 선택자 등 여러 선택자들로 접근이 가능하다.

이 특징은 jQuery의 강력한 특징 중 하나로, 개발자가 각 요소에 대한 루프를 작성할 필요 없이, jQuery가 내부에서 자동으로 처리해주어 여러 요소를 일괄적으로 처리하거나 조작할 때 매우 편리하다.

3. 자바스크립트 객체와 jQuery 객체는 서로 형변환할 수 있다.

BOM, DOM, jQuery 방식으로 btn1을 찾는다.

    <script>

        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {

            //btn1 찾기
            //BOM
            const a = document.all.btn1;

            //DOM
            const b = document.getElementById('btn1');

            //jQuery
            const c = jQuery('#btn1');

            alert(a===b);   //true
            alert(a==c);   //false

        });
    </script>

BOM으로 찾은 a와 DOM으로 찾은 b는 진성 비교 연산자로 비교했을 때 값과 자료형까지 같아 true를 반환했다.

하지만 jQuery로 찾은 c와 a를 비교하니 false를 반환했다. 이는 값이 서로 다르다는 것을 알 수 있다.

BOM과 DOM은 같은 자료형을 반환하지만 jQuery는 'jQuery 객체'를 반환한다.

서로 다른 객체로 인식하기에 BOM&DOM와 jQuery 메서드는 호환이 안된다.

    <script>

        const btn1 = document.getElementById('btn1');
        btn1.addEventListener('click', function() {

            //BOM
            const a = document.all.btn1;

            //DOM
            const b = document.getElementById('btn1');

            //jQuery
            const c = jQuery('#btn1');

            a.value  = 'ok';
            b.value = 'ok';
            a.setAttribute('value', 'ok');

            // c.value='ok';    //불가능
            c.val('ok');
        });
    </script>

BOM으로 찾은객체에 DOM 메서드인 setAttribute를 적용시켜도 잘 작동하고, DOM에게 찾은 객체에 BOM 메서드인 value를 적용시켜도 잘 작동한다.

하지만 jQuery로 찾은 객체에 BOM, DOM 메서드를 적용하면 작동하지 않는다. jQuery로 찾은 객체에는 jQuery 메서드인 val을 적용시켜야한다.

형변환

BOM, DOM 객체를 jQuery 기능을 사용해야 할 때가 있다. 이럴 때는 BOM, DOM 객체를 jQuery로 형변환 해준다.

BOM, DOM → (형변환) → jQuery

jQuery(a).val('ok');

형변환하는 방법은 객체를 jQuery로 맵핑해주면 된다.

jQuery → (형변환) → BOM, DOM

c[0].value = 'ok';

jQuery 객체는 배열로 구성되어 있어 [index]를 사용해서 꺼내는 순간, 순수 자바스크립트 객체가 반환된다.

저작자표시 (새창열림)