jquery - 속성 선택자

 

jQuery속성 선택자

속성을 선택하는 선택자를 알아보도록 하겠습니다.

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'로 끝나는 요소를 선택합니다.

JQuery를 사용한 예제 입니다.

속성 선택자를 정해주도록 합니다.

$(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","2px solid 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")
});

html입니다.

jquery를 사용하여 html에 값을 부여해 주었고 css로 모든 선택자에 margin을 5px를 주었습니다.

<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">내용 3_1</li>
    <li class="list-1">내용 3_2</li>
    <li class="list-bg">내용 3_3</li>
  </ul>

결과