728x90
jQuery : 속성 선택자?
속성 선택자란 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따진 후 해당 요소를 선택해주는 함수에요!
속성 선택자 종류
| 종류 | 설명 | ||
|---|---|---|---|
| 요소[속성] | $("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'로 끝나는 요소를 선택합니다. | |
예시용 HTML 코드
<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">내용4_1</li>
<li class="list-1">내용4_2</li>
<li class="list-bg">내용4_3</li>
</ul>
</body>
예시용 코드펜
728x90
반응형
'jQuery' 카테고리의 다른 글
| 제이쿼리 style 관련 메서드에 대하여.... 🦑 (13) | 2022.09.03 |
|---|---|
| attrClass? prop? 이 두가지 메서드에 대하여 알아보자! (9) | 2022.09.03 |
| 4가지! 클래스 메서드? (9) | 2022.09.03 |
| 필터 선택자에 대해 알아보자! 무야호~~~~! (7) | 2022.08.31 |
| 기본/탐색&기타탐색 선택자는 대체 뭘까? (8) | 2022.08.31 |
댓글