728x90
속성 선택자
속성 선택자는 선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자입니다.
01. 속성 선택자 종류
| 선택자 종류 | 설명 | |
|---|---|---|
| 요소[속성] | $("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'로 끝나는 요소를 선택합니다. |
02. 속성 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").css("border", "4px solid red");
$("#gnb").css("border", "4px solid orange");
$(".logo").css("border", "4px solid yellow");
$("#gnb > ul > li").css("border", "4px solid green");
$("#gnb ul").css("border", "4px solid blue");
$("#visual + #content").css("border", "4px solid navy");
$("#visual ~ #footer").css("border", "4px solid purple");
$("div.util").css("border", "4px solid pink");
$(".left, .right, #banner").css("border", "4px solid gray");
});
</script>
728x90
반응형
'jQuery' 카테고리의 다른 글
| [jQuery]클래스 관련 메서드 (1) | 2022.09.02 |
|---|---|
| [jQuery]탐색 선택자 (3) | 2022.08.30 |
| [jQuery]필터 선택자 (2) | 2022.08.30 |
| [jQuery]기본 선택자 (2) | 2022.08.30 |
| [jQuery]소개 (5) | 2022.08.29 |
댓글