๐Ÿค Web/๐Ÿ“Œ JQuery

JQuery ์ •๋ณตํ•˜๊ธฐ 2 (wrapper, ์„ ํƒ์ž, chain)

chamroro 2022. 7. 6. 14:09

๋ž˜ํผ(wrapper)๋ž€?

jQuery(์—˜๋ฆฌ๋จผํŠธ ์˜ค๋ธŒ์ ํŠธ | 'CSS์Šคํƒ€์ผ ์„ ํƒ์ž')
bold ํ‘œ์‹œํ•œ ๋ถ€๋ถ„์ด ๋ž˜ํผ, ์ธ์ž๋กœ ์ „๋‹ฌ๋œ ์š”์†Œ๋“ค์— jQuery์˜ ๊ธฐ๋Šฅ์„ฑ์„ ๋ถ€๊ฐ€ํ•ด์„œ ๋ฐ˜ํ™˜ํ•œ๋‹ค.


๋ ˆํผ์˜ ์•ˆ์ „ํ•œ ์‚ฌ์šฉ

$(์—˜๋ฆฌ๋จผํŠธ) ์™€ jQuery(์—˜๋ฆฌ๋จผํŠธ)๋Š” ๊ฐ™์€ ์˜๋ฏธ์ด์ง€๋งŒ $๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค๊ณผ์˜ ์ถฉ๋Œ ๋•Œ๋ฌธ์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•œ๋‹ค.

<script type="text/javascript">
//$ ๋Œ€์‹  jQuery๋ฅผ ์‚ฌ์šฉ
jQuery('body').html('hello world');
</script>
<script type="text/javascript">
//$๋ฅผ ํ•จ์ˆ˜์˜ ์ง€์—ญ๋ณ€์ˆ˜๋กœ ์„ ์–ธํ•ด์„œ ์™ธ๋ถ€์— ์žˆ์„์ง€ ๋ชจ๋ฅด๋Š” ํƒ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ $์™€์˜ ์ถฉ๋Œ์„ ์˜ˆ๋ฐฉ
(function($){
    $('body').html('hello world');
})(jQuery)
</script>

์ œ์–ด ๋Œ€์ƒ์„ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

jQuery( selector, [context] )
jQuery( element )

์˜ˆ์ œ 1. jQuery( selector, [context] )

<html>
    <body>
        <ul>
            <li>test2</li>
        </ul>
        <ul class="foo">
            <li>test</li>
        </ul>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            (function($){            
                $('ul.foo').click( function() {
                    $('li', this).css('background-color','red');
                });
            })(jQuery)
        </script>
    </body>
</html>

์˜ˆ์ œ 2. jQuery( element )

<html>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document.body).css( "background-color", "black" );
        </script>
    </body>
</html>


์„ ํƒ์ž๋ž€?

jQuery wrapper์—๋Š” CSS ์„ ํƒ์ž๊ฐ€ ์œ„์น˜ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด๋ฅผ ํ†ตํ•ด์„œ ์ œ์–ดํ•˜๋ ค๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋น ๋ฅด๊ณ  ์ •ํ™•ํ•˜๊ฒŒ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.


์„ ํƒ์ž ํƒ์ƒ‰๊ธฐ

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            body{
                font-size:12px;
            }
            .selected,.selected_parent {
                background-color: red !important;
                color:white;
                border:2px solid red !important;
            }
            input.btn {
                width:130px;
            }
            ul, .live{
                float:left;
                width:150px;
                padding-left:20px;
                margin:0;
            }
            textarea{
                float:left;
                width: 400px;
                height:150px;
                font-size:11px;
                margin-left:20px;
            }
            .clear{
                clear: both;
            }
            .sample{
                margin-bottom: 20px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <fieldset>
            <legend> ๊ธฐ๋ณธ </legend>
            <div class="sample">
                <ul id="tutorials">
                    <li class="tutorial" id="HTML"> HTML </li>
                    <li class="tutorial" id="CSS"> CSS </li>
                    <li class="tutorial" id="javascript"> javascript </li>
                    <li class="tutorial" id="jquery"> jQuery </li>
                    <li class="tutorial" id="PHP"> PHP </li>
                    <li class="tutorial" id="MYSQL"> MYSQL </li>
                </ul>
<textarea>
<ul id="tutorials">
    <li class="tutorial" id="HTML"> HTML </li>
    <li class="tutorial" id="CSS"> CSS </li>
    <li class="tutorial" id="javascript"> javascript </li>
    <li class="tutorial" id="jquery"> jQuery </li>
    <li jclass="tutorial" id="PHP"> PHP </li>
    <li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>
</textarea>
            <div class="clear"></div>
                </div>
            <input class="btn" type="button" id="#jquerybtn" value="#jquery" /> - id ์„ ํƒ์ž <br />
            <input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="li" /> - ์—˜๋ฆฌ๋จผํŠธ ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#jquery, #MYSQL" /> - ๋‹ค์ค‘ ์„ ํƒ์ž <br />
        </fieldset>
        
        
        <fieldset>
            <legend> filter </legend>
            <div class="sample">
                <ul id="list">
                    <li> HTML </li>
                    <li> CSS </li>
                    <li> javascript </li>
                    <li> PHP </li>
                    <li> MYSQL </li>
                </ul>
<textarea>
<ul id="list">
    <li> HTML </li>
    <li> CSS </li>
    <li> javascript </li>
    <li> PHP </li>
    <li> MYSQL </li>
</ul>    
</textarea>
                <div class="clear"></div>
            </div>
            <input class="btn" type="button" value="#list li:eq(2)" /> - ์ธ์ž์™€ ์ธ๋ฑ์Šค๊ฐ€ ๋™์ผํ•œ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#list li:gt(1)" /> - ์ธ์ž ๋ณด๋‹ค ์ธ๋ฑ์Šค๊ฐ€ ํฐ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#list li:lt(2)" /> - ์ธ์ž ๋ณด๋‹ค ์ธ๋ฑ์Šค๊ฐ€ ์ž‘์€ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#list li:even" /> - ์ฒซ๋ฒˆ์งธ, ์„ธ๋ฒˆ์งธ... ํ™€ ์ˆ˜์˜ ์ธ๋ฑ์Šค ๊ฐ’์„ ๊ฐ€์ง„ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#list li:odd" /> - ๋‘๋ฒˆ์งธ, ๋„ค๋ฒˆ์งธ.... ์ง ์ˆ˜์˜ ์ธ๋ฑ์Šค ๊ฐ’์„ ๊ฐ€์ง„ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#list li:first" /> - ์ฒซ๋ฒˆ์žฌ ์ธ๋ฑ์Šค ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="#list li:last" /> - ๋งˆ์ง€๋ง‰ ์ธ๋ฑ์Šค ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ์„ ํƒ์ž <br />
        </fieldset>
        
        
        <fieldset>
            <legend> ์†์„ฑ </legend>
            <div class="sample">
                <ul id="attribute">
                    <li target="ABCD">ABCD</li>
                    <li target="BCDE">BCDE</li>
                    <li target="CDEF">CDEF</li>
                    <li target="DEFG">DEFG</li>
                    <li target="EFGH">EFGH</li>
                    <li id="FGHI" target="FGHI">FGHI</li>
                </ul>
<textarea>
<ul id="attribute">
    <li target="ABCD">ABCD</li>
    <li target="BCDE">BCDE</li>
    <li target="CDEF">CDEF</li>
    <li target="DEFG">DEFG</li>
    <li target="EFGH">EFGH</li>
    <li id="FGHI" target="FGHI">FGHI</li>
</ul>    
</textarea>
                <div class="clear"></div>
            </div>
            <input class="btn" type="button" value="[target*=&quot;BC&quot;]" /> - ์†์„ฑ์˜ ๊ฐ’์— ์ฃผ์–ด์ง„ ๋ฌธ์ž์—ด์ด ํฌํ•จ๋˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="[target=&quot;DEFG&quot;]" /> - ์†์„ฑ์˜ ๊ฐ’๊ณผ ์ฃผ์–ด์ง„ ๋ฌธ์ž์—ด์ด ์ผ์น˜ํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
            <input class="btn" type="button" value="[target!=&quot;DEFG&quot;]" /> - ์†์„ฑ์˜ ๊ฐ’๊ณผ ์ฃผ์–ด์ง„ ๋ฌธ์ž์—ด์ด ์ผ์น˜ํ•˜์ง€ ์•Š๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
<input class="btn" type="button" value="[target^=&quot;B&quot;]" /> - ์†์„ฑ์˜ ๊ฐ’์œผ๋กœ ์ฃผ์–ด์ง„ ๋ฌธ์ž์—ด์ด ์ฒ˜์Œ ๋“ฑ์žฅํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
<input class="btn" type="button" value="[target$=&quot;H&quot;]" /> - ์†์„ฑ์˜ ๊ฐ’์œผ๋กœ ์ฃผ์–ด์ง„ ๋ฌธ์ž์—ด์ด ๋งˆ์ง€๋ง‰์œผ๋กœ ๋“ฑ์žฅํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
<input class="btn" type="button" value="[target]" /> - ์†์„ฑ์ด ์กด์žฌํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
<input class="btn" type="button" value="[target][id]" /> - ์†์„ฑ๋“ค์ด ์กด์žฌํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž
        </fieldset>
        <fieldset>
            <legend>Form</legend>
                <div class="live">
                    <div>
                        <input type="text" disabled="disabled" value="disabled" />
                        <input type="text" value="enabled"/>
                    </div>
                    <div><input type="checkbox" checked="checked" /></div>
                    <div><input type="checkbox" /></div>
                </div>
<textarea class="sample">
<div>
    <input type="text" disabled="disabled" value="disabled" />
    <input type="text" value="enabled"/>
</div>
<div><input type="checkbox" checked="checked" /></div>
<div><input type="checkbox" /></div>
</textarea>
            <div class="clear"></div>
            <input class="btn" type="button" value="[type=&quot;text&quot;]" /> - ํผ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•  ๋•Œ๋Š” ์†์„ฑ ์…€๋ ‰ํ„ฐ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. <br />
            <input class="btn" type="button" value="[type=&quot;text&quot;]:disabled" /> - disabled ์†์„ฑ์˜ ๊ฐ’์ด disabled์ธ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž<br />
            <input class="btn" type="button" value="[type=&quot;text&quot;]:enabled" /> - disabled ์†์„ฑ์˜ ๊ฐ’์ด enabled์ธ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž<br />
            <input class="btn" type="button" value="input:checked" /> - ์ฒดํฌ๋ฐ•์Šค ์ค‘ ์ฒดํฌ๊ฐ€ ๋œ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฐพ์•„๋‚ด๋Š” ์„ ํƒ์ž <br />
        </fieldset>
        <script>
            $('input').on('click', function() {
                $this = $(this);
                $('*').removeClass('selected');
                switch($this.attr('value')) {
                    case '#jquery':
                        $('#jquery').addClass('selected');
                        break;
                    case '.tutorial':
                        $('.tutorial').addClass('selected');
                        break;
                    case 'li':
                        $('li').addClass('selected');
                        break;
                    case '#jquery, #MYSQL':
                        $('#jquery, #MYSQL').addClass('selected');    
                        break;
                    case '#list li:eq(2)':
                        $('#list li:eq(2)').addClass('selected');
                        break;
                    case '#list li:gt(1)':
                        $('#list li:gt(1)').addClass('selected');
                        break;
                    case '#list li:lt(2)':
                        $('#list li:lt(2)').addClass('selected');
                        break;
                    case '#list li:even':
                        $('#list li:even').addClass('selected');
                        break;
                    case '#list li:odd':
                        $('#list li:odd').addClass('selected');
                        break;
                    case '#list li:first':
                        $('#list li:first').addClass('selected');
                        break;
                    case '#list li:last':
                        $('#list li:last').addClass('selected');
                        break;
                    case '[target*="BC"]':
                        $('li[target*="BC"]').addClass('selected');
                        break;
                    case '[target="DEFG"]':
                        $('li[target="DEFG"]').addClass('selected');
                        break;
                    case '[target!="DEFG"]':
                        $('li[target!="DEFG"]').addClass('selected');
                        break;
                    case '[target^="B"]':
                        $('li[target^="B"]').addClass('selected');
                        break;
                    case '[target$="H"]':
                        $('li[target$="H"]').addClass('selected');
                        break;
                    case '[target]':
                        $('li[target]').addClass('selected');
                        break;
                    case '[target][id]':
                        $('li[target][id]').addClass('selected');
                        break;
                    case '[type="text"]':
                        $('[type="text"]').addClass('selected');                    
                        break;
                    case '[type="text"]:disabled':
                        $('[type="text"]:disabled').addClass('selected');
                        break;
                    case '[type="text"]:enabled':
                        $('[type="text"]:enabled').addClass('selected');
                        break;
                    case 'input:checked':
                        $('input:checked').parent().addClass('selected');;
                        break;
                    
                }
            })
        </script>
    </body>
</html>

Chain์ด๋ž€?

jQuery์˜ ๋ฉ”์†Œ๋“œ๋“ค์€ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ์ž๊ธฐ ์ž์‹ ์„ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ทœ์น™์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
์ด๋ฅผ ์ด์šฉํ•˜๋ฉด ํ•œ๋ฒˆ ์„ ํƒํ•œ ๋Œ€์ƒ์— ๋Œ€ํ•ด์„œ ์—ฐ์†์ ์ธ ์ œ์–ด๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜ˆ์ œ1. jQuery๋ฅผ ์ด์šฉํ•ด์„œ ์ฝ”๋”ฉํ•˜๋Š” ๊ฒฝ์šฐ

<html>
    <body>
        <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');
        </script>
    </body>

์˜ˆ์ œ2. javascript์˜ DOM์„ ์ด์šฉํ•ด์„œ ์ฝ”๋”ฉํ•˜๋Š” ๊ฒฝ์šฐ

<html>
     <body>
         <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>
         <script type="text/javascript">
             var tutorial = document.getElementById('tutorial');
             tutorial.setAttribute('href', 'http://jquery.org');
             tutorial.setAttribute('target', '_blank');
             tutorial.style.color = 'red';
         </script>
     </body>
 </html>

chain์˜ ์žฅ์ 

  • ์ฝ”๋“œ๊ฐ€ ๊ฐ„๊ฒฐํ•ด์ง„๋‹ค.
  • ์ธ๊ฐ„์˜ ์–ธ์–ด์™€ ์œ ์‚ฌํ•ด์„œ ์‚ฌ๊ณ ์˜ ์ž์—ฐ์Šค๋Ÿฌ์šด ๊ณผ์ •๊ณผ ์ผ์น˜ํ•จ.

ํƒ์ƒ‰(traversing)

  • chain์˜ ๋Œ€์ƒ์„ ๋ฐ”๊ฟ”์„œ ์ฒด์ธ์„ ๊ณ„์† ์—ฐ์žฅ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•
  • http://api.jquery.com/category/traversing/
  • ๋„ˆ๋ฌด ๋ณต์žกํ•œ chain์€ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ๋–จ์–ด ๋œจ๋ฆด ์ˆ˜ ์žˆ๋‹ค.

์˜ˆ์ œ3. traversing์„ ์ด์šฉํ•ด์„œ chain์•ˆ์—์„œ ๋Œ€์ƒ์„ ์›€์ง์ผ ์ˆ˜ ์žˆ๋‹ค.

<html>
    <body>
        <ul class="first">
            <li class="foo"> list item 1 </li>
            <li> list item 2 </li>
            <li class="bar"> list item 3 </li>
        </ul>
        <ul class="second">
            <li class="foo"> list item 1 </li>
            <li> list item 2 </li>
            <li class="bar"> list item 3 </li>
        </ul>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>
    </body>
</html>
๋ฐ˜์‘ํ˜•