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를 사용해보았습니다.

♠ 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","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");
})