JQuery ์ •๋ณตํ•˜๊ธฐ 1 (Library, JQuery, javascript์™€ ๋น„๊ต)

    ์ž‘๋…„์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ• ๋•Œ ์ž ๊น ๊ณต๋ถ€ํ•˜๊ณ  ์—ฐ์Šต ์กฐ๊ธˆ ํ–ˆ๋˜ JQuery๋ฅผ ๋‹ค์‹œ ํŒŒ๋ณด๋ ค ํ•œ๋‹ค.
    https://www.samsungsds.com/kr/insights/jQuery.html

    ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ž€?(library)

    ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๋“ค์„ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๊ฐ€๊ณตํ•ด์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํšจ์œจ์„ ๋†’์—ฌ์ฃผ๋Š” ์ฝ”๋“œ๋“ค


    jQuery๋ž€?

    ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฐ•๋ ฅํ•œ ๋ฐฉ๋ฒ•๊ณผ ์„ ํƒ๋œ ์—˜๋ฆฌ๋จผํŠธ๋“ค์„ ํšจ์œจ์ ์œผ๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์ˆ˜๋‹จ์„ ์ œ๊ณตํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ


    Hello world - ์ฒซ๋ฒˆ์งธ jQuery

    ๐ŸŒž ์‚ฌ์šฉ๋ฐฉ๋ฒ•

    1. ์ง์ ‘ ์„œ๋น„์Šค ํ•˜๋Š” ๊ฒฝ์šฐ
      https://jquery.com/download/ ์—์„œ jquery ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๋‹ค์šด๋กœ๋“œ ํ•œ๋‹ค.
      ์œ„์˜ ํŒŒ์ผ์„ ์„œ๋ฒ„์— ์—…๋กœ๋“œ ํ•œ ํ›„ ์›นํŽ˜์ด์ง€ ์•ˆ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฝ์ž…ํ•œ๋‹ค.

    1. ๊ตฌ๊ธ€์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ
      https://developers.google.com/speed/libraries#jquery
    <html>
     <body>
         <div class="welcome"></div>
         <div class="welcome"></div>
         <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script type="text/javascript">
                 $('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
         </script>
     </body>
 </html>



    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ jQuery ๋น„๊ต

    ํƒญ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ํฌ์ปค์Šค๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์˜ˆ์ œ

    ๐Ÿ‘€ JavaScript

    <html>
    <head>
        <script type="text/javascript">
            function addEvent(target, eventType,eventHandler, useCapture) {
                if (target.addEventListener) { // W3C DOM
                    target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
                } else if (target.attachEvent) {  // IE DOM
                    var r = target.attachEvent("on"+eventType, eventHandler);
                }
            }
 
     
            function clickHandler(event) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    child.className = '';
                }
                event.target.className = 'selected';
            }
  
            addEvent(window, 'load', function(eventObj) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    addEvent(child, 'click', clickHandler);
                }
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>

    ๐Ÿ•ต๐Ÿป‍โ™€๏ธ jQuery

    <html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $('#navigation li').live('click', function() {
                $('#navigation li').removeClass('selected');
                $(this).addClass('selected');
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>
     
    ๋ฐ˜์‘ํ˜•

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

    JQuery ์ •๋ณตํ•˜๊ธฐ 4 (ํƒ์ƒ‰, animation, ajax)  (0) 2022.07.06
    JQuery ์ •๋ณตํ•˜๊ธฐ 3 (event, element, form)  (0) 2022.07.06
    JQuery ์ •๋ณตํ•˜๊ธฐ 2 (wrapper, ์„ ํƒ์ž, chain)  (0) 2022.07.06

    ๋Œ“๊ธ€

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