jQuery - 속성 선택자

웹 공부일지

jQuery - 속성 선택자 본문

jQuery

jQuery - 속성 선택자

개발자로 거듭나기 2022. 8. 30. 20:07

jQuery 속성 선택자

jQuery의 속성 선택자를 소개해드릴게요. 속성 선택자는 css의 속성 선택자와 흡사합니다.

jQuery 속성 선택자

선택자 종류	설명
요소 [속성]	$('span[class]')	span 요소중 클래스 속성이 있는 요소 선택.
요소 [속성 = "값"]	$('span[class = "abc"]')	span 요소중 클래스 속성이 abc인 요소 선택.
요소 [속성 != "값"]	$('span[class != "abc"]')	span 요소중 클래스 속성이 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'로 끝나는 요소를 선택합니다.

코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>속성 선택자</title>
    <style>
        li {
            margin: 5px;
        }
    </style>
    <script src="jquery-3.3.1.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>
</head>
<body>
    <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-1">내용4_1</li>
        <li class="list">내용4_2</li>
        <li class="list bg">내용4_3</li>
    </ul>
</body>
</html>

결과

'jQuery' 카테고리의 다른 글

jQuery - 속성 메서드 (7)	2022.09.03
jQuery - 클래스 메서드 (6)	2022.09.03
jQuery - 기본 선택자 (6)	2022.08.30
jQuery - 필터 선택자 (8)	2022.08.30
jQuery - 탐색선택자 (6)	2022.08.30