티스토리 뷰

jQuery

[jQuery] 기본 선택자

기본 선택자

기본 선택자는 CSS와 동일하게 선택자를 선택하는 방법입니다. 가장 기본적으로 요소를 선택하는 방법입니다. 이 방법은 CSS와 동일합니다.


기본 선택자(Basic Selectors)

기본 선택자
종류 예시 설명
태그 선택자 $("p") 기본 태그를 선택합니다.
클래스 선택자 $(".class") 클래스 태그를 선택합니다.
아이디 선택자 $("#id") 아이디 태그를 선택합니다.
그룹 선택자 $("p, .class, #id") 여러가지 태그를 선택합니다.
전체 선택자 $("*") 전체 태그를 선택합니다.

Sample1

기본 선택자 예제입니다.

결과

기본 선택자

  • 태그 선택자 : 기본 태그를 선택합니다.
  • 클래스 선택자 : 클래스 태그를 선택합니다.
  • 아이디 선택자 : 아이디 태그를 선택합니다.
  • 그룹 선택자 : 여러가지 태그를 선택합니다.
  • 전체 선택자 : 전체 태그를 선택합니다.
jquery
$(".list li").addClass("rLine");
$(".list .class").addClass("rLine");
$("#id").addClass("rLine");
$(".class, #id").addClass("rLine");
$(".list ul *").addClass("rLine");
html
<h3>기본 선택자</h3>
<div class="list">
    <ul>
        <li class="class">태그 선택자 : 기본 태그를 선택합니다.</li>
        <li id="id">클래스 선택자 : 클래스 태그를 선택합니다.</li>
        <li>아이디 선택자 : 아이디 태그를 선택합니다.</li>
        <li>그룹 선택자 : 여러가지 태그를 선택합니다.</li>
        <li>전체 선택자 : 전체 태그를 선택합니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>기본 선택자</h3>
    <div class="list">
        <ul>
            <li class="class">태그 선택자 : 기본 태그를 선택합니다.</li>
            <li id="id">클래스 선택자 : 클래스 태그를 선택합니다.</li>
            <li>아이디 선택자 : 아이디 태그를 선택합니다.</li>
            <li>그룹 선택자 : 여러가지 태그를 선택합니다.</li>
            <li>전체 선택자 : 전체 태그를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>li 태그를</em>를 선택합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>클래스 선택자</em>를 선택합니다.</a>
        <a href="#" class="btn3">클릭하면 <em>아이디 선택자</em>를 선택합니다.</a>
        <a href="#" class="btn4">클릭하면 <em>아이디와 클래스 선택자</em>를 선택합니다.</a>
        <a href="#" class="btn5">클릭하면 <em>전체 선택자</em>를 선택합니다.</a>
    </div>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice .off1").on("click", function(e){
            e.preventDefault();
            $(".list li").removeClass("rLine");
        });
        $(".choice .btn1").on("click", function(e){
            e.preventDefault();
            $(".list li").addClass("rLine");
        });
        $(".choice .btn2").on("click", function(e){
            e.preventDefault();
            $(".list .class").addClass("rLine");
        });
        $(".choice .btn3").on("click", function(e){
            e.preventDefault();
            $("#id").addClass("rLine");
        });
        $(".choice .btn4").on("click", function(e){
            e.preventDefault();
            $(".class, #id").addClass("rLine");
        });
        $(".choice .btn5").on("click", function(e){
            e.preventDefault();
            $(".list ul *").addClass("rLine");
        });
    </script>
</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼