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]λ₯Ό μ‚¬μš©ν•΄μ„œ κΊΌλ‚΄λŠ” μˆœκ°„, μˆœμˆ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ κ°μ²΄κ°€ λ°˜ν™˜λœλ‹€.