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. CrashOverride
    이미 시간이 많이 지나버려서 큰 의미가 없을 것 같습니다만.
    document.ready 아래에서 #navigation li 를 대상으로 사용하신 .on() 메서드의 경우
    https://api.jquery.com/on/
    여기를 살펴보시면 제이쿼리 1.7 버전부터 추가된 기능이라
    붙여두신 제이쿼리 1.6.2 버전에서는 존재하지 않는 메서드이기 때문에 동작하지 않는 것으로 보이네요.
    올려주신 코드는 제이쿼리 버전만 1.7 이상으로 수정해놓고 돌려보니 잘 동작합니다.
    대화보기
    • 미니
      저 아래 댓글보고 다 해봣는데 왜안되는걸까요,,?ㅜㅜㅜㅜ고수님들 답변부탁드려요,,,,,,,,
      <%@ page language="java" contentType="text/html; charset=EUC-KR"
      pageEncoding="utf-8"%>
      <!DOCTYPE html>
      <html>

      <head>
      <meta charset="utf-8">
      <title>Insert title here</title>

      <!-- jQuery 로딩 -->
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

      <script type="text/javascript">

      console.log("1");

      <!-- id가 navigation인 li요소를 가져옴-->
      <!--각각의 요소가 클릭되었을때 실행되는 함수-->

      $(document).ready(function(){
      $('#navigation li').on("click",function(){
      $('#navigation li').removeClass('selected');//해당 요소들이 가지고 있는 클래스명에 selected명을 제거해준다. (for문 안돌림)
      $(this).addClass('selected');//사용자가 클릭한 요소에 'selected'를 클래스명으로 전달된다.($표시를 통해 젴이쿼리 함수를 사용가능)
      })
      })


      <%--
      $('#navigation li').click(function(){
      $('#navigation li').removeClass('selected');<!--해당 요소들이 가지고 있는 클래스명에 selected명을 제거해준다. (for문 안돌림) -->
      $(this).addClass('selected');<!--사용자가 클릭한 요소에 'selected'를 클래스명으로 전달된다.($표시를 통해 젴이쿼리 함수를 사용가능) -->
      })
      --%>
      <!--30줄이 3줄로,,-->



      </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>

      <title>자바스크립트로 이루어진 코드</title>
      </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 CDN 썼다가 왜 안되지?
      1, live()는 사라졌고.. on()으로 대체됨..
      2, 그래도 왜 안되지? 했다가 밑의 간지님 댓글보고..
      DOM 요소 load 이전에 function을 셋팅 해주니 당연히 안됨..
      3, 결국 live()와 on()의 차이는 있음.. 구글에서 확실한 차이를 알아봐야 함..
    • 헤밍웨이
      220811 감사합니다!
    • labis98
      20210918 좋은 강의 감사합니다.
    • 이경호
      좋은 팁 감사합니다 ㅜㅜ!!!
      대화보기
      • 간지
        $(document).ready(function(){
        $('#navigation li').on("click", function() {
        $('#navigation li').removeClass('selected');
        $(this).addClass('selected');
        })
        })

        DOM들을 불러오기 전이라 on을 쓰게되면 ready를 써줘야할것 같네요 script가 위쪽에있기때문에
      • 행인
        $('#navigation li').removeClass('selected');
        $(this).addClass('selected');
        이 두 줄보다,
        $(this).addClass("selected").siblings("li").removeClass("selected");
        한 줄이 더 좋겠지요.

        그리고 가급적이면 이벤트는 on(), off()로 처리하는 게 좋습니다.
        $('#navigation li').click(function() ... 보다
        $('#navigation li').on("click", function ... 로 하는 게 타이핑 조금 더 하더라도 좋은 습관입니다.
        왜냐하면 나중에 필요에 의해서 click 말고도 keydown 등의 이벤트를 같이 적용해야 할 때,
        $('#navigation li').on("click keydown", function ... 이렇게 이벤트명만 쉽게 추가할 수 있기 때문이죠.
        대화보기
        • 허공
          감사합니다!
        • 이달
          완료
        • 삼고잉
          순수 자바스크립트에서 이벤트핸들러사용시 번거로움을 제이쿼리로 줄이다! 이거네요 ㅎㅎ
        • 점심호랑이
          자막 수정을 해야할 것같네요
        • 개발자가 되고싶은 고등학생
          jQuery 1.7에 와서, .live() 함수는 사용이 중지되고, .on() 함수로 대체되었습니다. (이벤트연결 기능)
          중요한 사항이니 꼭 참고하세요!!
        • 고스트프리
          정주행중^^
        • sheis
          잘 봤어요^^
        • 좋아요
        • crable
          감사합니다.
        • 450ml
          좋은 내용의 강좌 공유 감사합니다.
        • 김소희
          쉽게 알려주셔서 큰 도움이 됐어요!!
          너무 감사합니다!!
          대화보기
          • 안현웅
            간단하게는 위에서부터 순차적으로 실행되는데

            Head에 장문의 Script를 선언하게되면 웹페이지 그리는 중에

            멈추고 스크립트를 다 해석한뒤에 화면을 그리게되어 화면이 늦게 그려질 수가 있어서

            대부분 script는 </body> 이전에 선언하는게 좋습니다~

            자세히 공부해보고 싶으시면 웹 랜더링(파싱)이나 Javascript, HTML, css의 역할 등 보시면 될 것같아요~

            Naver D2에 랜더링에 대한 좋은글 이 있네요! 중간에 질문하신거에 대한 내용도 있구요!

            http://d2.naver.com......361

            도움되셨길 바랄게요~
            대화보기
            • 김소희
              스크립트가 head 에 들어가는거랑 body 안에 들어가는거랑 어떻게 다른거예요!?
              기초적인거지만 배운지 얼마 안돼서 헷갈리네요ㅜㅜ!!!
              답변 꼭 부탁드려요!!!
            • 김소희
              존경합니다@_@!
              대화보기
              • 오원구
                고맙습니다.
              • 박진수
                $('#navigation li').click(function(){
                $('#navigation li').removeClass('selected');
                $(this).addClass('selected');
                })
                이젠 이게 낫지않나엽..
              • 완료!
                완료! 감사합니다.
              • tachyon
                감사합니다!
              • 스한국vs스페인
                Jquery가 javascript 기능 모두 사용할수 있나요?
              • 온달장군
                강좌 잘보고 갑니다. 감사합니다.
              • JustStudy
                고맚습니다
              • 참빛바다
                live를 on으로 바꾸고 script 부분을 body 최하단에 넣으면 코드를 최소한 수정하면서 정상 작동합니다.
              • 김성욱
                감사 또 감사합니다

                이고잉님 전부터 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
                          크롬과 사파리에서는 보안상의 문제로 해당 기능을 지원하지 않고 있어서 그렇습니다. 컨텐츠 개편 때는 다른 방법으로 실습하실 수 있도록 할 예정입니다.
                          대화보기
                          • 바다로
                            수업 잘 듣고있습니다.
                            그런데 예제코드가 파이어폭스에서는 정상 동작하는데크롬이나 사파리에서는 정상 동작하지 않는것 같아요.
                            왜 그럴까요?
                          버전 관리
                          egoing@gmail.com
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기