JQuery ์ •๋ณตํ•˜๊ธฐ 4 (ํƒ์ƒ‰, animation, ajax)

    ํƒ์ƒ‰

    • ์ฒด์ธ ์ปจํ…์ŠคํŠธ๋ฅผ ์œ ์ง€ํ•˜๋ฉด์„œ ์ œ์–ด์˜ ๋Œ€์ƒ์ด ๋˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ธฐ๋ฒ•
    • http://api.jquery.com/category/traversing/

    ๐Ÿ“ ์˜ˆ์ œ

    
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            body{
                font-size:11px;
                width:1000px;
            }
            #panel div,#panel li,#panel ul{
                border:2px solid black;
                margin:10px;
                padding:10px;
            }
            #panel ul{
                list-style: none;
            }
            #panel .s{
                border:2px solid red;
                background-color: #808080;
            }
            #panel #root{
##                 margin-top:0;
                }
            textarea{
####                 width:1982px;
                height:100px;
                font-size:11px;
                overflow: visible;
            }        
            #help{
                float:left;
                width:500px;
                height:450px;
                overflow-y: scroll;
                overflow-x: hidden
            }
         ```   #panel{
                float:left;
                width:2500px;
            }
            #help table{
                border:1px solid gray;
                border-collapse: collapse;
                width:100%;
         ```   }
            #help table td{
                border:1px solid gray;
                padding:5px;
            }
            #help .title{
                color:white;
                background-color:#555;
                padding:3px;
            }
            #help .title.checked{
                background-color:red;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <p>
                javascript์„ ์ž…๋ ฅ ํ•œ ํ›„์— ์—”ํ„ฐ๋ฅผ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”.
                <textarea id="code"></textarea></p>
            <div id="help">
                <table>
                    <tr id="add"><td><div class="title">.add(selector)</div>์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค</td></tr>
                    <tr id="andSelf"><td><div class="title">.andSelf()</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์— ์ด์ „ ์—˜๋ฆฌ๋จผํŠธ ์…‹์„ ๋” ํ•œ๋‹ค</td></tr>
                    <tr id="children"><td><div class="title">.children([selector])</div>์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="closet"><td><div class="title">.closest(selector)</div>๊ฐ€์žฅ ๊ฐ€๊นŒ์šด selector ์กฐ์ƒ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํƒ์ƒ‰ํ•œ๋‹ค</td></tr>
                    <tr id="each"><td><div class="title">.each(function(index,Element))</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์— ๋ฐ˜๋ณต ์ž‘์—…์„ ์‹คํ–‰ํ•œ๋‹ค</td></tr>
                    <tr id="end"><td><div class="title">.end()</div>์ด์ „ ์ฒด์ธ ์ปจํ…์ŠคํŠธ๋กœ ๋Œ์•„๊ฐ„๋‹ค.</td></tr>
                    <tr id="eq"><td><div class="title">.eq(index)</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์—์„œ index์— ํ•ด๋‹นํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="filter"><td><div class="title">.filter(selector)</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์—์„œ selector์— ํ•ด๋‹นํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="find"><td><div class="title">.find(selector)</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์—์„œ selector์— ํ•ด๋‹นํ•˜๋Š” ์ž์† ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="first"><td><div class="title">.first()</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹ ์ค‘ ์ฒซ๋ฒˆ์งธ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="last"><td><div class="title">.last()</div>ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹ ์ค‘ ๋งˆ์ง€๋ง‰ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="next"><td><div class="title">.next()</div>๊ฐ๊ฐ์˜ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ๋‹ค์Œ ํ˜•์žฌ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="nextAll"><td><div class="title">.nextAll()</div>๊ฐ๊ฐ์˜ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ๋‹ค์Œ ํ˜•์žฌ ์—˜๋ฆฌ๋จผํŠธ ์ „๋ถ€๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="prev"><td><div class="title">.prev()</div>๊ฐ๊ฐ์˜ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ์ด์ „ ํ˜•์žฌ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="prevAll"><td><div class="title">.prevAll()</div>๊ฐ๊ฐ์˜ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ์ด์ „ ํ˜•์žฌ ์—˜๋ฆฌ๋จผํŠธ ์ „๋ถ€๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="siblings"><td><div class="title">.siblings()</div>๊ฐ๊ฐ์˜ ์—˜๋ฆฌ๋จผํŠธ์— ๋Œ€ํ•œ ํ˜•์žฌ ์—˜๋ฆฌ๋จผํŠธ ์ „๋ถ€๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                    <tr id="slice"><td><div class="title">.slice(start, [end])</div>ํ˜„์ œ์˜ ์—˜๋ฆฌ๋จผํŠธ ์…‹ ์ค‘ start์—์„œ end๊นŒ์ง€์˜ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค</td></tr>
                </table>
            </div>
            <div id="panel">
                <div id="root">
                    div#root
                    <div>
                        div
                    </div>
                    <div>
                        div
                        <ul>
                            ul
                            <li>li</li>
                            <li>li</li>
                            <li>li</li>
                            <li>li</li>
                        </ul>
                    </div>
                    <div>
                        div
                    </div>
                </div>    
            </div>
        </div>
        <script>
            var $wrapper = $('#root').addClass('selected');
            $('#code').keydown(function(e){
                if(e.keyCode == 13){
                    eval($(this).val());
                    return false;
                }
            }).change(function(){
                    eval($(this).val());
            });
            $('tr').click(function(){
                $(this).find('.title').toggleClass('checked');
            })
        </script>
    </body>
</html>

    ํšจ๊ณผ๋ž€?

    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ CSS๋ฅผ ์ด์šฉํ•ด์„œ HTML์—˜๋ฆฌ๋จผํŠธ์— ๋™์ ์ธ ํšจ๊ณผ๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
    • jQuery์˜ ํšจ๊ณผ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ๊ฐ„๋‹จํžˆ ํšจ๊ณผ๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

    ๐Ÿ“ ์˜ˆ์ œ1

    <!DOCTYPE html>
<html>
    <head>
        <style>        span {
                color:red;
                cursor:pointer;
            }
            div {
                margin:3px;
                width:80px;
                height:80px;
            }
            div {
                background:#f00;
            }
</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <input type="button" id="fadeout" value="fade out" />
        <input type="button" id="fadein" value="fade in" />
        <input type="button" id="hide" value="hide" />
        <input type="button" id="show" value="show" />
        <input type="button" id="slidedown" value="slide down" />
        <input type="button" id="slideup" value="slide up" />
        <input type="button" id="mix" value="mix" />
        <div id="target">
            target
        </div>
        <script>$('input[type="button"]').click( function(e) {
                var $this = $(e.target);
                switch($this.attr('id')) {
                    case 'fadeout':
                        $('#target').fadeOut('slow');
                        break;
                    case 'fadein':
                        $('#target').fadeIn('slow');
                        break;
                    case 'hide':
                        $('#target').hide();
                        break;
                    case 'show':
                        $('#target').show();
                        break;
                    case 'slidedown':
                        $('#target').hide().slideDown('slow');
                        break;
                    case 'slideup':
                        $('#target').slideUp('slow');
                        break;
                    case 'mix':
                        $('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
                        break;
                }
            }) 
        </script>
    </body>
</html>

    ๐Ÿ“ ์˜ˆ์ œ2

    <!DOCTYPE html>
<html>
    <head>
        <style>        
            div {
                background-color:#bca;
                width:100px;
                border:1px solid green;
            }
</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <button id="go">
            &raquo; Run
        </button>
 
        <div id="block">
            Hello!
        </div>
        <script>/* Using multiple unit types within one animation. */
 
            $("#go").click( function() {
                $("#block").animate({
                    width: "300px",
                    opacity: 0.4,
                    marginLeft: "50px",
                    fontSize: "30px",
                    borderWidth: "10px"
                }, 3000);
            });</script>
    </body>
</html>

    ajax๋ž€

    • Asynchronous JavaScript and XML ์˜ ์•ฝ์ž
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ๋น„๋™๊ธฐ์‹์œผ๋กœ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๋Š” ๋ฐฉ์‹. ์ด ๋•Œ XML์„ ์ด์šฉํ•œ๋‹ค.
    • ๊ผญ XML์„ ์ด์šฉํ•  ํ•„์š”๋Š” ์—†๊ณ , ์ตœ๊ทผ์—๋Š” json์„ ๋” ๋งŽ์ด ์ด์šฉํ•œ๋‹ค.
    • ๋น„๋™๊ธฐ์‹์ด๋ž€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ผ์ด ๋™์‹œ์ ์œผ๋กœ ๋ฐœ์ƒํ•œ๋‹ค๋Š” ๋œป์œผ๋กœ, ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๋Š” ๋™์•ˆ ๋‹ค๋ฅธ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ.

    $.ajax(settings)

    • jQuery๋ฅผ ์ด์šฉํ•œ ajaxํ†ต์‹ ์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ API
    • ์ฃผ์š”์†์„ฑ
      - data : ์„œ๋ฒ„์— ์ „์†กํ•  ๋ฐ์ดํ„ฐ, key/value ํ˜•์‹์˜ ๊ฐ์ฒด
      - dataType : ์„œ๋ฒ„๊ฐ€ ๋ฆฌํ„ดํ•˜๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž… (xml, json, script, html)
      - type : ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š” ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž… (POST, GET)
      - url : ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•  URL
      - success : ajaxํ†ต์‹ ์— ์„ฑ๊ณตํ–ˆ์„ ๋•Œ ํ˜ธ์ถœ๋  ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ

    ๐Ÿ“ ์˜ˆ์ œ1-1. ์›นํŽ˜์ด์ง€

    <!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="result"></div>
        <input type="text" id="msg" />
        <input type="button" value="get result" id="getResult" />
        <script>
            $('#getResult').click( function() {
                $('#result').html('');
                $.ajax({
                    url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
                    dataType:'json',
                    type:'POST',
                    data:{'msg':$('#msg').val()},
                    success:function(result){
                        if(result['result']==true){
                          $('#result').html(result['msg']);
                        }
                    }
                });
            })
        </script>
    </body>
</html>

    ๐Ÿ“ ์˜ˆ์ œ 1-2. ์„œ๋ฒ„ ์ชฝ ๋กœ์ง

    <?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>
    ๋ฐ˜์‘ํ˜•

    '๐Ÿค Web > ๐Ÿ“Œ JQuery' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    JQuery ์ •๋ณตํ•˜๊ธฐ 3 (event, element, form)  (0) 2022.07.06
    JQuery ์ •๋ณตํ•˜๊ธฐ 2 (wrapper, ์„ ํƒ์ž, chain)  (0) 2022.07.06
    JQuery ์ •๋ณตํ•˜๊ธฐ 1 (Library, JQuery, javascript์™€ ๋น„๊ต)  (0) 2022.07.06

    ๊ด€๋ จ๊ธ€

    ๋Œ“๊ธ€

    ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ธŒ๋žœ๋“œ ๊ทธ๋ฃน | ๐Ÿค ๊ฐœ๋ฐœํ•˜๋Š” ์ฐธ์ƒˆ ๐ŸŒž

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”