[jQuery] DOM 속성 탐색 - 속성선택자

- $(selector[attr])

$(document).ready(function() {
		$("div > a[target]").css("background", "#ff99ff");
});

div 밑에 있는 a 태그 중 target 속성을 가지는 element 선택

 

-  $(selector[attr="value"])

$(document).ready(function() {
		$("div > a[href='http://www.naver.com']").css("background", "#00cc33");
});

div 밑에 있는 a 태그 중 href 값이 http://www.naver.com 인 element

 

-  $(selector[attr!="value"])

$(document).ready(function() {
		$("div > a[href!='http://www.naver.com']").css("background", "#00cc33");
});

 

-  $(selector[attr~="value"]) : 공백과 value를 포함하는 요소

$(document).ready(function() {
		$("input[name~='man']").css("background", "#cc66ff");
});

공백과 man을 포함하는 요소 select. 예로 들어 superman 선택안되고 super man 은 선택됨

 

-  $(selector[attr^="value"]) : value로 시작하는 요소

$(document).ready(function() {
		$("div[id^='subject']").css("background", "#cc66ff");
});

-  $(selector[attr$="value"]) : value로 끝나는 요소

$(document).ready(function() {
		$("div[id^='subject']").css("background", "#cc66ff");
});

 

-  $(selector[attr*="value"]) : value를 포함하는 요소

$(document).ready(function() {
		$("div[id*='man']").css("background", "#cc66ff");
});

superman, iron man, super man 다 선택됨