jQuery 수업

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. 의기천추
    결국 CSS도 잘 알아야 한다는.. 강의였네요..
    답글
  2. labis98
    20210920 좋은 강의 감사합니다.
    답글
  3. psmqdt
    버전 바꾸고, live를 click으로 하는 방식은 현재는 않되고 JK 분의 방식인 url 창에 붙였다 카피하고, live를 on으로 바꾸니 되는군요. 대단합니다!
    답글
  4. 없으면안돼요
    li 버튼 클릭시 기본 그룹의 li 태그만 선택되게 변경해보았습니다

    $('li.tutorial').addClass('selected');

    css 에 class명(selected)과 body의 클래스명(tutorial selected) 중에 같은 class명이 있으면
    적용되는 거였네요
    지금까지 전체가 같아야하는줄 알았어요
    답글 수정 삭제
  5. 꽁
    $('input').on('click', function() { //쿼리 셀렉터로 인풋요소들 클릭시 함수실행

    $this = $(this); //??

    $('*').removeClass('selected'); // 모든 요소들에 대해 selected 클레스 제거

    switch($this.attr('value')) { //??

    case '#jquery': //아이디가 제이쿼리일시

    $('#jquery').addClass('selected'); // 아이디가 제이쿼리인 요소에 selected 클래스추가

    break;

    이렇게 해석되는것이 맞는지요?
    저 this 를 계속 찾아봤는데
    $ 붙여서 변수선언시 jquery들의 메소드를 실행할수 있는 변수 이다

    여기서 어떻게 해석을 해나가야할지 이해를 잘하지 못하겠읍니다 this에 this 오브젝트를 담는다는 말이 무슨말일까요?
    답글 수정 삭제
  6. 허공
    감사합니다!
    답글
  7. HH
    Young-Ki Kim 말씀처럼 .live 대신 .on 사용하니 잘 됩니다~
    감사합니다!
    답글 수정 삭제
  8. Young-Ki Kim
    .live 대신에 .on을 사용하면 잘 됩니다.
    =========================
    $('input').on('click', function() {
    답글
  9. ㄱㅅ
    정말 감사합니다~
    말씀하신대로 url 창에 붙여넣었다가 카피한 뒤 .live를 .on으로 바꿔주니 잘 작동하네요! :)
    대화보기
      답글 수정 삭제
    • JK
      잘 안되는 분들은
      //$('input').live('click', function() {
      $('.btn').click(function(event) {
      처럼 수정해서 한번 해보시기 바랍니다.
      이 예제들은 그냥 안되네요 아쉽네요 하고 넘어가기는 너무 아까운 예제입니다.
      몇개 추가 해보기도 하고 변경 하기도 하면서 테스트 해보기 좋은 예제였습니다.
      감사합니다.
      답글 수정 삭제
    • 삼고잉
      음 이부분은 딱히 CSS 선택자위주로 짜여진느낌을 받기가 힘들었네요
      답글
    • 피자
      ㄳㄳ
      대화보기
        답글
      • 추격자
        고잉 어빠 ~ 밤봉~
        답글 수정 삭제
      • ㅇㅇ
        odd = 홀수
        even = 짝수 입니다.
        인덱스가 0 부터 시작하기 때문에 첫번째 = 0번 인덱스 여서 홀수번 짝수번이 달라진겁니다.
        답글 수정 삭제
      • 11st
        사랑합니다.
        답글 수정 삭제
      • 고스트프리
        감사합니다.
        답글 수정 삭제
      • sheis
        잘 봤어요^^
        답글
      • crable
        감사합니다.
        답글 수정 삭제
      • kss
        1번은 disabled="disiabled"
        -> <- 여기 속성값이 disabled이 존재해서 성립하는거고

        2번같은 경우는 enabled가 들어가있는데 생략이 된게 아닐까요?
        [input type="text" value="enabled"]
        원래는 이런소스인데
        [input type="text" enabled="enabled" value="enabled"]
        이렇게 바꿔도 같은결과가 나오네요.
        대화보기
          답글 수정 삭제
        • pury
          wrapper 안에 엘리먼트 오브젝트나 CSS 셀렉터를 선택하기로 되있는데
          엘리먼트 오브젝트의 구체적인 경우는 뭐가 있을까요?

          $("input") input 은 css 태그선택자도 될수 있고 <input> 엘리먼트 오브젝트도 될 수 있는거 아닌가요?
          답글 수정 삭제
        • ckocko
          다른건 댓글에서 알려주셔서 잘 했습니다 사소한게 궁금해서 그러는데요 마지막 폼에서
          1.[input type="text" disabled="disabled" value="disabled"]
          2.[input type="text" value="enabled"]
          인데요

          설명에는
          1.disabled 속성의 값이 disabled인 엘리먼트를 찾아내는 선택자
          2.disabled 속성의 값이 enabled인 엘리먼트를 찾아내는 선택자
          라고 돼있어서요 2번은 disabled가 없는데 저기 disabled라는 설명이 잘못적힌건가요?? 혹시 그럼 설명에 disabled 대신 value라고 적혀야 맞는건가요?ㅠㅠ
          답글
        • 이웃집토토로
          코드 안먹는 분들
          URL창에 붙여넣기 했다가 해보세요
          소스코드를 복사하는 과정에서 어떤 경우에는
          공백문자가 포함되는 것 같습니다.

          live 메소드는 on으로 바꾸셔야 합니다.
          답글
        • 완료!
          완료! 감사합니다.
          답글 수정 삭제
        • tachyon
          감사합니다!
          답글
        • 메이슨
          감사합니다. 꾸벅~!
          답글 수정 삭제
        • 온달장군
          강좌 잘보고 갑니다. 감사합니다.
          답글
        • 색종
          jQuery 1.7버전부터는 live() 함수가 on() 으로 대체되었습니다. 161번 행에 on으로 바꿔주시면 잘 작동됩니다
          답글
        • JustStudy
          고맙습니다
          답글
        • 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/
                        대화보기
                          답글
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기