jQuery 수업

선택자

선택자란?

jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다.

선택자 탐색기

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            body{
                font-size:12px;
            }
            .selected,.selected_parent {
                background-color: red !important;
                color:white;
                border:2px solid red !important;
            }
            input.btn {
                width:130px;
            }
            ul, .live{
                float:left;
                width:150px;
                padding-left:20px;
                margin:0;
            }
            textarea{
                float:left;
                width: 400px;
                height:150px;
                font-size:11px;
                margin-left:20px;
            }
            .clear{
                clear: both;
            }
            .sample{
                margin-bottom: 20px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <fieldset>
            <legend> 기본 </legend>
            <div class="sample">
                <ul id="tutorials">
                    <li class="tutorial" id="HTML"> HTML </li>
                    <li class="tutorial" id="CSS"> CSS </li>
                    <li class="tutorial" id="javascript"> javascript </li>
                    <li class="tutorial" id="jquery"> jQuery </li>
                    <li class="tutorial" id="PHP"> PHP </li>
                    <li class="tutorial" id="MYSQL"> MYSQL </li>
                </ul>
<textarea>
<ul id="tutorials">
    <li class="tutorial" id="HTML"> HTML </li>
    <li class="tutorial" id="CSS"> CSS </li>
    <li class="tutorial" id="javascript"> javascript </li>
    <li class="tutorial" id="jquery"> jQuery </li>
    <li jclass="tutorial" id="PHP"> PHP </li>
    <li class="tutorial" id="MYSQL"> MYSQL </li>
</ul>
</textarea>
            <div class="clear"></div>
                </div>
            <input class="btn" type="button" id="#jquerybtn" value="#jquery" /> - id 선택자 <br />
            <input class="btn" type="button" id=".tutorial" value=".tutorial" /> - class 선택자 <br />
            <input class="btn" type="button" value="li" /> - 엘리먼트 선택자 <br />
            <input class="btn" type="button" value="#jquery, #MYSQL" /> - 다중 선택자 <br />
        </fieldset>
       
       
        <fieldset>
            <legend> filter </legend>
            <div class="sample">
                <ul id="list">
                    <li> HTML </li>
                    <li> CSS </li>
                    <li> javascript </li>
                    <li> PHP </li>
                    <li> MYSQL </li>
                </ul>
<textarea>
<ul id="list">
    <li> HTML </li>
    <li> CSS </li>
    <li> javascript </li>
    <li> PHP </li>
    <li> MYSQL </li>
</ul>    
</textarea>
                <div class="clear"></div>
            </div>
            <input class="btn" type="button" value="#list li:eq(2)" /> - 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자 <br />
            <input class="btn" type="button" value="#list li:gt(1)" /> - 인자 보다 인덱스가 큰 엘리먼트를 찾아내는 선택자 <br />
            <input class="btn" type="button" value="#list li:lt(2)" /> - 인자 보다 인덱스가 작은 엘리먼트를 찾아내는 선택자 <br />
            <input class="btn" type="button" value="#list li:even" /> - 첫번째, 세번째... 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />
            <input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자 <br />
            <input class="btn" type="button" value="#list li:first" /> - 첫번재 인덱스 엘리먼트에 대한 선택자 <br />
            <input class="btn" type="button" value="#list li:last" /> - 마지막 인덱스 엘리먼트에 대한 선택자 <br />
        </fieldset>
       
       
        <fieldset>
            <legend> 속성 </legend>
            <div class="sample">
                <ul id="attribute">
                    <li target="ABCD">ABCD</li>
                    <li target="BCDE">BCDE</li>
                    <li target="CDEF">CDEF</li>
                    <li target="DEFG">DEFG</li>
                    <li target="EFGH">EFGH</li>
                    <li id="FGHI" target="FGHI">FGHI</li>
                </ul>
<textarea>
<ul id="attribute">
    <li target="ABCD">ABCD</li>
    <li target="BCDE">BCDE</li>
    <li target="CDEF">CDEF</li>
    <li target="DEFG">DEFG</li>
    <li target="EFGH">EFGH</li>
    <li id="FGHI" target="FGHI">FGHI</li>
</ul>    
</textarea>
                <div class="clear"></div>
            </div>
            <input class="btn" type="button" value="[target*=&quot;BC&quot;]" /> - 속성의 값에 주어진 문자열이 포함되는 엘리먼트를 찾아내는 선택자 <br />
            <input class="btn" type="button" value="[target=&quot;DEFG&quot;]" /> - 속성의 값과 주어진 문자열이 일치하는 엘리먼트를 찾아내는 선택자 <br />
            <input class="btn" type="button" value="[target!=&quot;DEFG&quot;]" /> - 속성의 값과 주어진 문자열이 일치하지 않는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target^=&quot;B&quot;]" /> - 속성의 값으로 주어진 문자열이 처음 등장하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target$=&quot;H&quot;]" /> - 속성의 값으로 주어진 문자열이 마지막으로 등장하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target]" /> - 속성이 존재하는 엘리먼트를 찾아내는 선택자 <br />
<input class="btn" type="button" value="[target][id]" /> - 속성들이 존재하는 엘리먼트를 찾아내는 선택자
        </fieldset>
        <fieldset>
            <legend>Form</legend>
                <div class="live">
                    <div>
                        <input type="text" disabled="disabled" value="disabled" />
                        <input type="text" value="enabled"/>
                    </div>
                    <div><input type="checkbox" checked="checked" /></div>
                    <div><input type="checkbox" /></div>
                </div>
<textarea class="sample">
<div>
    <input type="text" disabled="disabled" value="disabled" />
    <input type="text" value="enabled"/>
</div>
<div><input type="checkbox" checked="checked" /></div>
<div><input type="checkbox" /></div>
</textarea>
            <div class="clear"></div>
            <input class="btn" type="button" value="[type=&quot;text&quot;]" /> - 폼 엘리먼트를 선택할 때는 속성 셀렉터를 사용한다. <br />
            <input class="btn" type="button" value="[type=&quot;text&quot;]:disabled" /> - disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자<br />
            <input class="btn" type="button" value="[type=&quot;text&quot;]:enabled" /> - disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자<br />
            <input class="btn" type="button" value="input:checked" /> - 체크박스 중 체크가 된 엘리먼트를 찾아내는 선택자 <br />
        </fieldset>
        <script>
            $('input').live('click', function() {
                $this = $(this);
                $('*').removeClass('selected');
                switch($this.attr('value')) {
                    case '#jquery':
                        $('#jquery').addClass('selected');
                        break;
                    case '.tutorial':
                        $('.tutorial').addClass('selected');
                        break;
                    case 'li':
                        $('li').addClass('selected');
                        break;
                    case '#jquery, #MYSQL':
                        $('#jquery, #MYSQL').addClass('selected');    
                        break;
                    case '#list li:eq(2)':
                        $('#list li:eq(2)').addClass('selected');
                        break;
                    case '#list li:gt(1)':
                        $('#list li:gt(1)').addClass('selected');
                        break;
                    case '#list li:lt(2)':
                        $('#list li:lt(2)').addClass('selected');
                        break;
                    case '#list li:even':
                        $('#list li:even').addClass('selected');
                        break;
                    case '#list li:odd':
                        $('#list li:odd').addClass('selected');
                        break;
                    case '#list li:first':
                        $('#list li:first').addClass('selected');
                        break;
                    case '#list li:last':
                        $('#list li:last').addClass('selected');
                        break;
                    case '[target*="BC"]':
                        $('li[target*="BC"]').addClass('selected');
                        break;
                    case '[target="DEFG"]':
                        $('li[target="DEFG"]').addClass('selected');
                        break;
                    case '[target!="DEFG"]':
                        $('li[target!="DEFG"]').addClass('selected');
                        break;
                    case '[target^="B"]':
                        $('li[target^="B"]').addClass('selected');
                        break;
                    case '[target$="H"]':
                        $('li[target$="H"]').addClass('selected');
                        break;
                    case '[target]':
                        $('li[target]').addClass('selected');
                        break;
                    case '[target][id]':
                        $('li[target][id]').addClass('selected');
                        break;
                    case '[type="text"]':
                        $('[type="text"]').addClass('selected');                    
                        break;
                    case '[type="text"]:disabled':
                        $('[type="text"]:disabled').addClass('selected');
                        break;
                    case '[type="text"]:enabled':
                        $('[type="text"]:enabled').addClass('selected');
                        break;
                    case 'input:checked':
                        $('input:checked').parent().addClass('selected');;
                        break;
                   
                }
            })
        </script>
    </body>
</html> 

 

댓글

댓글 본문
작성자
비밀번호
  1. 이웃집토토로
    코드 안먹는 분들
    URL창에 붙여넣기 했다가 해보세요
    소스코드를 복사하는 과정에서 어떤 경우에는
    공백문자가 포함되는 것 같습니다.

    live 메소드는 on으로 바꾸셔야 합니다.
  2. 완료!
    완료! 감사합니다.
  3. tachyon
    감사합니다!
  4. 메이슨
    감사합니다. 꾸벅~!
  5. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  6. 색종
    jQuery 1.7버전부터는 live() 함수가 on() 으로 대체되었습니다. 161번 행에 on으로 바꿔주시면 잘 작동됩니다
  7. JustStudy
    고맙습니다
  8. Gyeong Hun Bae
    $(document).on('click','.input', function()
    이걸로 바꿔봤는데 작동이 안되네요..!? 뭐가 잘못된걸까요 ㅠ
    대화보기
    • Su-Jeong Yoo
      odd가 홀수
      even이 짝수
    • SK Kim
      버튼을 누르면 ul li의 점 마커가 사라지길래 궁금해서 CSS내용을 확인하니 내용무...
      폰트 색이 white여서 생기는 현상이었네요.
    • 유기농브래드
      최신버젼에서는
      .live 를 .on 으로 변경하면 제대로 수행되네요.
      항상 강의제공에 감사하며 보고 있습니다.
    • elgpsld
      우와~ 실행되네요 ~
      좋아요~ 너무좋아용 ~ ㅋㅋㅋㅋ
    • Goldcar
      그 부분은 javascript 강의를 참고 부탁 드립니다.
      https://opentutorials.org......620
      'Script 파일의 위치' 부분을 보시면 됩니다.

      결론은 </body> 직전에 사용을 권장합니다.
      대화보기
      • 화이트폭시
        이고잉님 ㅠㅠ 질문하나만 해도될까요.
        제이쿼리 script선언을 하고 </body>전에 :last-child 선택자를 이용해서 작업을하는데,
        </head>에 전에 작업하는것과 </body>전에 작업한 결과가 다른이유는 뭘까요?ㅠ
      • 이가은
        감사합니다 일단 연습용으로는 1.6버전으로 하고 나중에 적용할땐
        $('input').live('click', function() {
        });
        같은 코드를
        $('input').click( function() {
        });
        으로 바꿔서 적용해야겠네요 ..ㅜㅜ
        대화보기
        • asdf
          jQuery버전을 바꿔도 Error이 뜨는군요. 어쩔 수 없이 일단 동영상 강의만 봐야겠네요..
        • heyboy77
          제이쿼리 버전에 따라서 바뀐 부분이 있는듯 합니다.

          <script src="http://code.jquery.com/jquery-latest.js"></script>
          이부분을
          <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
          로 바꿔서 해보세요.

          이렇게 하면 예전버젼의 제이쿼리로 사용할수 있습니다.
          대화보기
          • 키다리
            소스 그대로 복사해서 테스트좀 해볼혀고하는데 왜 안될까요 ?


            뭔 문제인지를 모르겠습니다.
          • 엔즈
            오오오오오~ C++ 개발 8년차에서 웹개발로 다시 시작하려는데

            생활코딩을 발견해서 하나하나 강의듣고 따라하면서 걸음마하고 있어요~

            정말 도움 많이 받고 있습니다.. ^_______________^ 다시한번 무한한 감사를~~~
            대화보기
            • egoing
              아래 수업을 한번 봐주세요. 그럼 크롬에서 어떤 오류가 발생하고 있는지 파악하시는데 도움이 될꺼예요. ^^

              http://opentutorials.org......872
              대화보기
              • 엔즈
                IE에선 정상동작하고 Chrome에선 안되네요 흠...

                아울러 이고잉님과 생활코딩 관계자 여러분께 무한한 감사를~ 복받으실거에요 ^^
              • 히야
                와신기하다..

                저는 별다른 수정없이했는데 잘되는데..
              • styner007
                제껀 이벤트가 정상적으로 적용이 안되내요 ,, ㅠㅠ 해보고 싶은데 ,,ㅠㅠ
              • 포스만빵
                헝그리님이 알려주신데로 수정해보니 이벤트가 정상적으로 적용되는군요.. ㅋㅋ
              • HwangTY
                저도 소스 가져와서 html로 저장하여 실행하면..
                동영상 화면과 좀 다르게 구성되어있고..
                아무 이벤트엑션이 일어나지 않네요
              • 포스만빵
                소스 가져다 했봤는데 아무액션도 일어나지 않네요..쩝..

                헝그리님이 알려주신것처럼 수정하니 실행 잘 되네요.. ^^
              • 헝그리
                저도 밑에분과 같이

                $('input').live('click', function() {
                });

                위 코드가 실행이 안되서 아래 코드로하니 됩니다.

                $('input').click( function() {
                });
              • 별모모
                [ jQuery 이벤트 ] 이벤트 핸들러에서 설명이 나오는군요. click은 이벤트 헬퍼이고, 이벤트 핸들러는 bind를 사용한다고 합니다. 예제소스(선택자 검색기)에서 'live'를 'click'로 해도 작동하지만, bind로 해도 작동됩니다.

                $('input').bind('click', function() {
                });

                이벤트 설명에서..
                . bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1)
                . trigger로 이벤트 핸들러를 강제로 실행 (예제2)
                . click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
                . live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음
                대화보기
                • 서리
                  api 문서를 보니 이런 문구가 있더군요...
                  As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()
                  -----------------------------------------중략-----------------------------------
                  1. $(selector).live(events, data, handler); // jQuery 1.3+
                  2. $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
                  3. $(document).on(events, selector, data, handler); // jQuery 1.7+
                  --------------------------------------------------------------------------------
                  즉, jQuery 1.7 버전 이후에는 .live()라는 메소드는 사용을 안하고 대신 .on()이라는 메소드를 사용하는 것 같습니다.
                  http://api.jquery.com/live/
                  대화보기
                  • 잘보고갑니다
                  • Starmomo
                    동영상을 다시 보았습니다. ^^ Even(0, 2, 4)은 짝수, Odd(1, 3)는 홀수가 맞군요. 단지, 수업에서는 첫번째(0), 세번째(2)라고 하여 순간 혼동이 있었습니다. 고맙습니다.
                    대화보기
                    • 정보문
                      저는 이렇게 머리 속에 가지고 있답니다. even 4 글자 짝수, odd 3글자 홀수 그렌데 컴퓨터의 세계에서는 0은 홀수가 됩니다.
                    • 몰래온 손님
                      Even은 짝수 Odd는 홀수가 맞습니다..
                      다만 선택의 개념에선 시작이 1이 아니라 0이기 때문에odd가 짝수가 되는것이지요
                      대화보기
                      • 산이야
                        $('input').live('click', function() {
                        });
                        가 작동되질 않네요...ㅜㅜ
                        $('input').click( function() {
                        });으로 바꿔서 정상적으로 작동됩니다.
                      • koyulka
                        소스가 좀 이상한가봐요. 실행이 안되고, 화면도 깨지네요. 화이트스페이스가 shift+tab으로 앞으로 당겨지지가 않네요. 무슨 이상한 문자들이 포함되어 있나봐요각 라인에서 앞쪽 공백을 일일이 다 지우고 실행하니까 제대로 보이네요.
                      • 순전한눈
                        live() 함수가 1.7에서 deprecate됐고, 1.9에서 remove 됐네요.
                        on() 함수를 쓰시거나 jQuery 구 버전을 사용하셔야 합니다.
                      • 지나가던사람
                        0 2 4 짝수1 3 홀수
                        대화보기
                        • oneslife
                          소스를 구글로 바꾸니까 동작하네요.. https://ajax.googleapis.com/aj...
                        • 손준익
                          아.... aptana 로 저장해서 해봤더니 안되고... sublimetext 이용해서 저장했더니 되네요;; = ㅂ= 이건 무슨 조화지;;
                        • 손준익
                          동영상 설명처럼 안되요 - _ㅠ 흑...
                        • Junil Choi
                          인덱스 값이 2이면 세번째 엘리먼트이니... Even이 짝수인덱스 즉 배열상에 첫번째 세번째 맞네요. 기수와 서수의 차이라 오타 때문에 혼란이 올수 있겠네요. 결론적으로는 코딩을 해보면 알겠지만 even 이던지 odd 던지 인덱스에 들어가는 숫자자체를 고려하는 겁니다.
                        • manorgass
                          소소한 오타 발견입니다.class 앞에 j가 붙어있네요. <li id="PHP" jclass="tutorial"> PHP </li>
                        • 허접아니에요
                          odd가 홀수 even이 짝수잖아
                        • ggoggoing
                          궁금했던 내용들 이에요 잘들었습니다~
                        • Starmomo
                          [ 동영상에 혼동되는 Even, Odd ] Even, odd의 사전적 의미는 Even이 짝수, Odd가 홀수이지만, 프로그램은 인덱스를 0부터 시작하기 때문에 0(첫번째), 1(2번째), 2(3번째), 3(4번째), 4(5번째)가 되어 '홀수' 번째가 Even(짝수)이고, '짝수' 번째가 Odd(홀수)가 됩니다.
                          Description: Selects even elements, zero-indexed. See also odd.In particular, note that the 0-based indexing means that, counter-intuitively, :even selects the first element, third element, and so on within the matched set.
                          대화보기
                          • Aprkim
                            동영상 설명에서 Even(짝수)과 Odd(홀수)가 바뀐 것 같아요 :) 11분 무렵이요.
                          • Wimalike
                            좋은 강의 너무 잘 듣고 있어요. 감사합니다.
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기