Frontend/📌 JQuery

JQuery 정복하기 1 (Library, JQuery, javascript와 비교)

haeunkim.on 2022. 7. 6. 14:05

작년에 자바스크립트 할때 잠깐 공부하고 연습 조금 했던 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>
 
반응형