jQuery 수업

javascript VS jQuery

자바스크립트와 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>

댓글

댓글 본문
작성자
비밀번호
  1. 완료!
    완료! 감사합니다.
  2. tachyon
    감사합니다!
  3. 스한국vs스페인
    Jquery가 javascript 기능 모두 사용할수 있나요?
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. JustStudy
    고맚습니다
  6. 참빛바다
    live를 on으로 바꾸고 script 부분을 body 최하단에 넣으면 코드를 최소한 수정하면서 정상 작동합니다.
  7. 김성욱
    감사 또 감사합니다

    이고잉님 전부터 sns생활코딩에서 알게 됫는데
    정말 존경합니다

    덕분에 사내 작은강좌 jquery 무시히 끝낼수있었습니다

    진행 흐름을 어떻게 스타트를 해야할지 고민고민하다가

    이고잉님 영상강좌 베이스 흐름대로 설명하니
    직원들이 알기쉽고 잼있다는 반응이 나왓습니다

    사내 디자이너 분들 대상 jquery강좌였는데 정말 반응 좋아서
    감동이였습니다

    존경합니다 이고잉님 ㅠㅠ
    대화보기
    • egoing
      예 물론이죠 ^^
      대화보기
      • 김성욱
        안녕하세요
        매번 좋은 강좌 많은 참고 되어 너무 감사합니다.

        다름이 아니라 현재 현직에서 웹 개발을 하고 있어요
        회사에서 Jquery 작은 강좌 부탁을 받았는데,, 진행을 어떤식으로 흘러 가야할지 고민회서
        생활코딩 강좌를 보니 길이 보이더군요.

        강좌 자료로 좀 인용해도될까요?
        물론 출저 확실히 기제하겠습니다.
      • 이가은
        헤매고 있었는데 감사합니다 ㅎㅎ
        대화보기
        • 왕초보
          안녕하세요
          질문있습니다.

          자바스크립트 코드에서,
          addEvent(window, 'load', function(eventObj) 함수 안에서

          addEvent(child, 'click', clickHandler);를 다시 호출하여,

          clickHandler에 정의된 거의 동일한 코드인

          var nav = document.getElementById('navigation');
          for(var i = 0; i < nav.childNodes.length; i++) {
          var child = nav.childNodes[i];
          if(child.nodeType==3)
          continue;
          를 다시 사용하는이유가 뭔가요???

          저렇게 for 문 안에 동일한 내용의 for문을 또돌리면 재귀함수로 동작하지 않나요??

          코드를 저렇게 이중으로 쓰는 이유가 궁금합니다. 고수분들 알려주세요~
        • 골뱅이미디어스크린앤드
          jQuery만 배웠을 땐 괄호랑 막..복잡하게 느껴졌었는데
          여기서 Javascript강의를 보고나서 보니까는 jQuery가 참 쉬운거였던거였네여 ㅋㅋ
          감사합니다^^
        • 우주
          $(document).on('click','#navigation li', function(event)이 되고
          $('#navigation li').on("click", function(event)이 안되는 것은
          사용법 이 달라진거 보다는
          스크립트 위치 때문인 듯합니다.

          스크립트 위치를 수정하거나
          설명하신대로
          $(document).on('click','#navigation li', function(event)
          이런식으로 쓰면 되겠네요.
          아님 load이벤트를 또 주던가 하는식으로 하면 될꺼같습니다.
        • 최 봉재
          $(document).on('click','#navigation li', function(event) {
          event.preventDefault();
          $('#navigation li').removeClass('selected');
          console.log("gggg");
          $(this).addClass('selected');//현재 클릭한 엘리먼트
          console.log("addClass");
          });

          .live -> .on 으로 바꾸어도 안되어서 해맸는데 해결했습니다. 사용법이 조금 다른듯해요

          크롬에서도 문제없이 실행 잘됩니다.
          대화보기
          • T-BONE Steak
            예제에서 로드한 jQuery 1.6.1 버전에서는 .live() 메소드가 실행 되지만,

            지금 시점에서 사용하는 jQuery 1.11.0 버전에서는 .on( ) 메소드가 실행되네요. ,live( ) 는 안됩니다.

            공부하시는 분들 참고 하세요~
          • tenbird
            jquery 파워풀하네요!
          • 감사합니다^^
            live() 메쏘드는 jQuery version 1.9. 에서 삭제된것 같습니다. 1.11.1 버전으로 해보니 uncaught type^^ 뜨네요
            jQuery 1.7 버전으로 해보니 live() 메쏘드 잘되는 것 같아요 감사합니다. ^^
          • 아이반
            이런 휼륭한 싸이트를 만들어 주셔서 감사 합니다.
          • 조니섹쉬
            jquery 메서드공부좀해야겠습니다
          • GNyon
            어우...제이쿼리 되게 간편하네요
            언제 addEvent Handler 모두 코딩하나 했었는데 이렇게 간편한 방법이 있다니...놀랍습니다
          • HwangTY
            복잡하지만 좋네요
          • 헝그리
            늦은감이 있지만 또 새로운 분들을 위해...
            짧게 설명하면 this는 자기 자신을 가리킵니다.

            $('#navigation li').live('click', function() {
            $('#navigation li').removeClass('selected');
            $(this).addClass('selected');

            이 코드에서
            $('#navigation li').removeClass('selected');
            $(this).addClass('selected');

            ('#navigation li') 이 부분과 (this) 부분을 서로 동일하게 하거나 반대로 바꿔서 다양한 방법으로 실행해보면 this가 어떤 역할을 하는지 알 수 있습니다.
          • 숙성중
            this는 객체지향에서 주로 다룹니다.this는 객제자신을 의미합니다.this.변수명 을 사용하면 객체변수(클래스변수)를 뜻하며주로 객체변수와 매게변수명이 동일할시 구분짓기위해 사용됩니다class MyClass{ int a=10; public MyClass(int a) { this.a = a; }}이런식으로 쓰이죠..그리고 this.메소드명 을 하면 그 객체의 메소드를 사용할수도 있습니다..
          • 바다로
            아. 그렇군요. 답변 감사합니다.
            대화보기
            • egoing
              크롬과 사파리에서는 보안상의 문제로 해당 기능을 지원하지 않고 있어서 그렇습니다. 컨텐츠 개편 때는 다른 방법으로 실습하실 수 있도록 할 예정입니다.
              대화보기
              • 바다로
                수업 잘 듣고있습니다.
                그런데 예제코드가 파이어폭스에서는 정상 동작하는데크롬이나 사파리에서는 정상 동작하지 않는것 같아요.
                왜 그럴까요?
              • manorgass
                http://thinkberry.co.kr/728 여기에 아주 자세하게 나와있으니 참고하세요.덕분에 저도 배웠습니다. 고맙습니다.
                대화보기
                • Guest
                  첨부된 사진과 같은 html 파일을 실행 해보시면 아실 수 있습니다.
                  저가 이해하고있는 this는 간단히 말해 동일한 이름을 가진 변수가 있을 때 구분해주기 위한 오브젝트로, this.num은 전역 변수를 가르키며, num은 지역변수를 가르킵니다.
                  즉, 같은 이름의 변수가 존재할 때 변수 이름 앞에 this.이 붙는다면 해당 노드뿐 아니라 다른 노드에도 영향을 주는 변수를 지칭하는 것입니다.
                  참고자료 없이 제 생각을 적었습니다. 틀린 부분이 있다면 코멘트 부탁드립니다.
                  대화보기
                  • jamesleeplan
                    자바스크립트에서 this의 의미를 좀 정리해 주셨으면 합니다.
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기