본문 바로가기
[자기계발]/유튜브로 코딩배우기

[생활코딩] jQuery 선택자(selector)란?

슈총총 2021. 6. 8.
반응형

저번 편에서는 jQuery wrapper에 대해 알아보았다. 이번 편에서는 선택자 selector를 알아보겠다. 말그대로 선택하는 기능이라고 알고 있으면 된다.

선택자란?(selector)

jQuery wrapper에는 2가지 타입의 인자가 전달이 될 수 있다.

  1. element object
  2. css스타일의 선택자

2번이 더 많이쓰이는데 1번 보다 효과적으로 element를 선택할 수 있기 때문이다. 

웹 app을 열고 상자를 클릭하면서 설명을 읽어보면 바로 이해가 될 것이다.

선택자 탐색기(웹 어플리케이션)

기본

  • . => class selector / # => id selector
  • .tutorial는 tutorial이라고 하는 class를 찾아내는 것
  • li라는 element의 태그 명을 가지고 있는 element 모두 선택하는 것

filter

  • 필터링하는 기능으로, 기본 selector를 이용해서 원하는 element들을 찾을 수 있다.
  • even의 경우  1, 3, 5, 7... even의 뜻은 짝수이지만 인덱스가 0부터 시작해서 1,3,5 이렇게 홀수 인덱스값을 선택한다.
  • odd의 경우 0, 2, 4, 6... odd의 뜻은 홀수이지만 인덱스가 0부터 시작해서 0,2,4 이렇게 짝수 인덱스값을 선택한다.

속성

  • HTML element들은 속성을 가질 수 있다. a링크 같은 경우는 href와 같은 속성을 가질 수 있다.
  • jQuery 에서는 어떤 속성 이름이나, 속성 값을 통해서 필요로 하는 element를 찾을 수 있는 방법을 제공한다.
  • 그것이 속성 선택자(selector)이다. 
  • 대괄호 [ ] 로 시작해야 한다. 앞 쪽엣는 속성 이름 / 뒤에는 속성 값을 적는다.
  • 속성 값은 문자열 ' ' or " " 로 묶여 있어야 한다.
  • 속성 이름과 속성 값 사이에는 = 가 들어간다.
  • = 앞에 는 어떤 기호가 들어갈 수 있다. (*, 공백, !, ^, $, [ ])
<!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" /> - 첫번째, 세번째... 홀 수의 인덱스 값을 가진 엘리먼트에 대한 선택자. 1, 3, 5, 7... even의 뜻은 짝수 이지만 인덱스가 0부터 시작해서 1,3,5 이렇게 홀수 인덱스값을 선택한다.<br />
            <input class="btn" type="button" value="#list li:odd" /> - 두번째, 네번째.... 짝 수의 인덱스 값을 가진 엘리먼트에 대한 선택자. 0, 2, 4, 6... odd의 뜻은 홀수 이지만 인덱스가 0부터 시작해서 0,2,4 이렇게 짝수 인덱스값을 선택한다.<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').on('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>

jQuery 자료 찾기

 

Basic | jQuery API Documentation

Selects all elements with the given class. Selects all elements with the given tag name. Selects a single element with the given id attribute. Selects the combined results of all the specified selectors.

api.jquery.com

  • jQuery slectors를 전부 확인할 수 있다.
  • element에 대한 예제, 설명도 확인 가능

이전글 보고오기

반응형
저작자표시 비영리 변경금지

'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글

[생활코딩] jQuery event 정리  (0) 2021.06.12
[생활코딩] jQuery chain 이란?  (0) 2021.06.09
[생활코딩] jQuery 레퍼(wrapper)란?  (0) 2021.06.07
[생활코딩] jQuery란? 자바스크립트 라이브러리 jQuery 문법 알아보자.  (0) 2021.06.05
[생활코딩] JavaScript 문법 - UI /API/문서 보는법. 나만의 쉬운정리  (1) 2021.05.28

'[자기계발]/유튜브로 코딩배우기' 관련글

티스토리툴바