jQuery

2. 선택자

몽이코딩 2024. 8. 7. 12:08
반응형

선택자란?

  • jQuery는 자바스크립트에서 파생되어 객체선택 방식을 사용해야 하는데 그 방식을 선택자라고 합니다
  • 셀렉터라고도 불리며 객체선택이 쉬워진 것이 특징입니다.
  • 소개된 선택자 외에도 다양한 선택자가 있습니다. (https://www.w3schools.com/jquery/jquery_ref_selectors.asp)

 

요소(Element) 관련 선택자

선택자의 종류 예시 설명
* $('*') 모든 문서객체를 선택
element $('h1') 특정 태그를 모두 선택
#id $('#text') 작성된 아이디값을 갖는 문서객체를 선택
.class $('.text') 작성된 클래스값을 갖는 문서객체를 선택
[attribute='value'] $('input[type=text]') 해당 요소의 태그속성명과 속성값이 갖은 문서객체를 선택
A > B $('div > ul') 앞에 작성된 요소의 자손인 요소를 선택
A B $('div ul') 앞에 작성된 요소의 후손인 요소를 선택
A + B $('h1 + h2') 앞에 작성된 요소의 바로 뒤에 있는 동위선택자를 선택
A ~ B $('h1 ~ h2') 앞에 작성된 요소의 뒤에 있는 모든 동위선택자를 선택
:not() $('h1:not(.text)') 앞에 작성된 요소 중 괄호 안의 클래스명이 아닌 것만 선택
:nth-child(n) $('div:nth-child(n)') 해당 요소 중 n번째 작성된 요소를 선택
:first-child $('div:first-child') 해당 요소 중 첫번째로 작성된 요소를 선택
:last-child $('div:last-child') 해당 요소 중 마지막으로 작성된 요소를 선택
:nth-child(odd) $('div:nth-child(odd)') 해당 요소 중 홀수번째 작성된 요소를 선택
:nth-child(even) $('div:nth-child(even)') 해당 요소 중 짝수번째로 작성된 요소를 선택
:eq(n) $('li:eq(n)') 배열된 요소 중 n번째 요소를 선택
:first $('li:first') 배열된 요소 중 첫번째 요소를 선택
:last $('li:last') 배열된 요소 중 마지막 요소를 선택
:odd $('li:odd') 배열된 요소 중 배열번호가 홀수인 요소를 선택
:even $('li:even') 배열된 요소 중 배열번호가 짝수인 요소를 선택
:gt(n) $('li:gt(n)') 배열된 요소 중 배열번호가 n번보다 큰 요소를 선택
:lt(n) $('li:lt(n)') 배열된 요소 중 배열번호가 n번보다 작은 요소를 선택

 

 

Input 관련 선택자

선택자의 종류 예시 설명
:input $(*:input') 모든 input 요소를 선택
:text $('input:text') input태그 중 type값이 text인 요소를 선택
:password $('input:password') input태그 중 type값이 password인 요소를 선택
:radio $('input:radio') input태그 중 type값이 radio인 요소를 선택
:checkbox $('input:checkbox') input태그 중 type값이 checkbox인 요소를 선택
:submit $('input:submit') input태그 중 type값이 submit인 요소를 선택
:reset $('input:reset') input태그 중 type값이 reset인 요소를 선택
:button $('input:button') input태그 중 type값이 button인 요소를 선택
:file $('input:file') input태그 중 type값이 file인 요소를 선택
:enabled $('input:enabled') input태그 중 사용가능한 요소를 선택
:disabled $('input:disalbed') input태그 중 사용불가능한 요소를 선택
:selected $('option:selected') option태그 중 선택된 요소를 선택
:checked $('input:checked') input태그 중 체크된 요소를 선택

 

 

 

예시

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
    <h3>제목태그</h3>
        <p id="text01">아이디태그</p>
        <ul>
            <li class="odd">클래스태그</li>
            <li class="even">클래스태그</li>
            <li class="odd">클래스태그</li>
            <li class="even">클래스태그</li>
        </ul>
        
        <p name="name1">속성태그</p>
        <p name="name2">속성태그</p>
        
        <ul class="list">
            <li class="listA">리스트태그</li>
            <li>리스트태그</li>
            <li>리스트태그</li>
            <li>리스트태그</li>
            <li>리스트태그</li>
        </ul>
        
        <span>
            <div>레드</div>
            <div>오렌지</div>
            <div>옐로우</div>
            <div>그린</div>
            <div>블루</div>
            <div>네이비</div>
            <div>퍼플</div>
        </span>
        
        <br><br>
        <form action="#">
    	    <input type="text">
            <input type="password">
        </form>
</body>
</html>
//javascript
$(document).ready(function(){
    //1. 전체 선택자
    $('*').css('font-size',20);

    //2. 태그 선택자
    $('h3').css('text-decoration','underline');

    //3. 아이디 선택자
    $('#text01').css('color','red');

    //4. 클래스 선택자
    $('.odd').css('color','pink');
    $('.even').css('color','lightblue');

    //5. 속성 선택자
    $('p[name=name1]').css('color','blue');
    $('p[name=name2]').css('color','green');

    //6. 자손 선택자
    $('.list > li').css('font-weight','bold'); 

    //7. 후손 선택자
    $('body .listA').css('font-style','italic');

    //8. 동위 선택자1
    $('.listA + li').css('color','red');

    //9. 동위 선택자2
    $('.listA ~ li').css('text-decoration','underline');

    //10. 부정 선택자
    $('.list > li:not(.listA)').css('list-style','none');

    //11. 구조 선택자1 - nth-child(n)
    $('div:nth-child(1)').css('background','red');
    $('div:nth-child(2)').css('background','orange');
    $('div:nth-child(3)').css('background','yellow');
    $('div:nth-child(4)').css('background','green');
    $('div:nth-child(5)').css('background','blue');
    $('div:nth-child(6)').css('background','navy');
    $('div:nth-child(7)').css('background','purple');

    //12. 구조 선택자2 - first-child, last-child
    $('div:first-child').css('border-radius','10px 0 0 10px');
    $('div:last-child').css('border-radius','0 10px 10px 0');

    //13. 구조 선택자3 - nth-child(odd), nth-child(even)
    $('div:nth-child(odd)').css('color','black');
    $('div:nth-child(even)').css('color','white');

    //14. 배열 선택자
    $('div:gt(3)').css('text-decoration','underline');
    $('div:lt(3)').css('font-style','italic');
    
    //15. input 선택자
    $('input:text').css('border','1px solid red');
    $('input:password').css('border','1px solid blue');
});

 

 

반응형