본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 속성 선택자

속성 선택자

태그의 속성을 사용하여 선택하는 방법입니다.


속성 선택자(Hierarchy)

속성 선택자
종류 예시 설명
[name|="value"] $("li a[href|='web']") 속성 중에 'web'과 같은 속성 값을 선택합니다.
[name*="value"] $("li a[href*='web']") 속성 중에 'web'가 포함되어 있는 태그를 선택합니다.
[name~="value"] $("li a[href~='web']") 속성 중에 'web'으로 시작하는 태그를 선택합니다.
[name$="value"] $("li a[href$='web']") 속성 중에 'web'으로 나는 태그를 선택합니다.
[name="value"] $("li a[href='web']") 속성 중에 'web'와 일치하는 속성 값을 선택합니다.
[name!="value"] $("li a[href!='web']") 속성 중에 'web'와 일치하지 않는 태그를 선택합니다.
[name^="value"] $("li a[href^='web']") 속성 중에 'web'로 시작하는 태그를 선택합니다.
[name] $("li a[href]") 속성 중에 일치하는 속성을 선택합니다.
[name="value"][name="value"] $("li a[href][class]") 속성 중에 'href' 속성과 'class' 속성이 모두 있는 태그를 선택합니다.

Sample1

속성 선택자 예제입니다.

jquery
$("li a[href|='webs']").addClass("rLine");
$("li a[href*='webs']").addClass("rLine");
$("li a[href~='webs']").addClass("rLine");
$("li a[href$='webs']").addClass("rLine");
$("li a[href='webs']").addClass("rLine");
$("li a[href!='webs']").addClass("rLine");
$("li a[href^='webs']").addClass("rLine");
$("li a[href]").addClass("rLine");
$("li a[class][id]").addClass("rLine");
html
<h3>계층 선택자</h3>
<div>
    <ul class="list">
        <li>기본 선택자</li>
        <li>계층 선택자</li>
        <li>속성 선택자
            <ul>
                <li><a href="#webs">#webs</a></li>
                <li><a href="#webstorybory">#webstorybory</a></li>
                <li><a href="webs">webs</a></li>
                <li><a href="webs-troyboy">webs-troyboy</a></li>
                <li><a href="webstroyboy">webstroyboy</a></li>
                <li><a href="https://webstoryboy.co.kr/">https://webstoryboy.co.kr/</a></li>
                <li><a href="#" class="webs" id="webs">class="webs", id="webs"</a></li>
            </ul>
        </li>
        <li>기본 필터 선택자</li>
        <li>내용 필터 선택자</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>
        <ul class="list">
            <li>기본 선택자</li>
            <li>계층 선택자</li>
            <li>속성 선택자
                <ul>
                    <li><a href="#webs">#webs</a></li>
                    <li><a href="#webstorybory">#webstorybory</a></li>
                    <li><a href="webs">webs</a></li>
                    <li><a href="webs-troyboy">webs-troyboy</a></li>
                    <li><a href="webstroyboy">webstroyboy</a></li>
                    <li><a href="https://webstoryboy.co.kr/">https://webstoryboy.co.kr/</a></li>
                    <li><a href="#" class="webs" id="webs">class="webs", id="webs"</a></li>
                </ul>
            </li>
            <li>기본 필터 선택자</li>
            <li>내용 필터 선택자</li>
            <li>보임 필터 선택자</li>
            <li>자식요소 필터 선택자</li>
            <li>폼 필터 선택자</li>
        </ul>
    </div>
    
    <div class="choice">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>li a[href|='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>li a[href*='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn3">클릭하면 <em>li a[href~='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn4">클릭하면 <em>li a[href$='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn5">클릭하면 <em>li a[href='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn6">클릭하면 <em>li a[href!='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn7">클릭하면 <em>li a[href^='webs']</em>를 선택합니다.</a>
        <a href="#" class="btn8">클릭하면 <em>li a[href]</em>를 선택합니다.</a>
        <a href="#" class="btn9">클릭하면 <em>li a[class][id]</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 a").removeClass("rLine");
        });
        $(".choice .btn1").on("click", function(e){
            e.preventDefault();
            $("li a[href|='webs']").addClass("rLine");
        });
        $(".choice .btn2").on("click", function(e){
            e.preventDefault();
            $("li a[href*='webs']").addClass("rLine");
        });
        $(".choice .btn3").on("click", function(e){
            e.preventDefault();
            $("li a[href~='webs']").addClass("rLine");
        });
        $(".choice .btn4").on("click", function(e){
            e.preventDefault();
            $("li a[href$='webs']").addClass("rLine");
        });
        $(".choice .btn5").on("click", function(e){
            e.preventDefault();
            $("li a[href='webs']").addClass("rLine");
        });
        $(".choice .btn6").on("click", function(e){
            e.preventDefault();
            $("li a[href!='webs']").addClass("rLine");
        });
        $(".choice .btn7").on("click", function(e){
            e.preventDefault();
            $("li a[href^='webs']").addClass("rLine");
        });
        $(".choice .btn8").on("click", function(e){
            e.preventDefault();
            $("li a[href]").addClass("rLine");
        });
        $(".choice .btn9").on("click", function(e){
            e.preventDefault();
            $("li a[class][id]").addClass("rLine");
        });
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기