jQuery - 속성 선택자

jQuery 속성 선택자

제이쿼리는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.

---

속성 선택자

선택자 종류	설명
요소[속성]	$("span[class]")	span 요소 중 class 속성을 가지고 있는 요소를 선택합니다.
요소[속성='값']	$("span[class='abc']")	span 요소 중 class가 'abc'인 요소를 선택합니다.
요소[속성!='값']	$("span[class!='abc']")	span 요소 중 class가 'abc'가 아닌 요소를 선택합니다.
요소[속성~='값']	$("span[class~='abc']")	span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc'앞뒤로 연결된 문자가 없어야 합나디. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다.
요소[속성*='값']	$("span[class*='abc']")	span 요소 중 class가 'abc'를 포함하는 요소를 모두 선택합니다. 'bg abc', 'bg_abc' 모두를 선택합니다.
요소[속성|='값']	$("span[class|='abc']")	span 요소 중 class가 'abc'나 'abc-'로 시작하는 요소를 선택합니다.
요소[속성^='값']	$("span[class^='abc']")	span 요소 중 class가 'abc'로 시작하는 요소를 선택합니다.
요소[속성$='값']	$("span[class$='abc']")	span 요소 중 class가 'abc'로 끝나는 요소를 선택합니다.

예제

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $(".list1 > li[class='list_1']").css("border", "2px solid red");
        $(".list1 > li[class!='list_1']").css("border", "2px solid orange");
        $(".list2 > li[class~='list']").css("background", "yellow");
        $(".list2 > li[class*='list']").css("border", "2px solid green");
        $(".list3 > li[class|='list']").css("border", "2px solid blue");
        $(".list4 > li[class^='list']").css("border", "2px solid navy");
        $(".list4 > li[class$='bg']").css("background", "purple");
    })
</script>

HTML

<ul class="list1">
    <li class="list_1">내용1_1</li>
    <li class="list_2">내용1_2</li>
    <li class="list_3">내용1_3</li>
</ul>
<ul class="list2">
    <li class="list bg">내용2_1</li>
    <li class="list_1">내용2_2</li>
    <li class="list_2">내용2_3</li>
</ul>
<ul class="list3">
    <li class="list">내용3_1</li>
    <li class="list-1">내용3_2</li>
    <li class="list-bg">내용3_3</li>
</ul>
<ul class="list4">
    <li class="list">내용4_1</li>
    <li class="list-1">내용4_2</li>
    <li class="list-bg">내용4_3</li>
</ul>

결과