Javascript & JQuery & CSS

이번 시간에는 태그의 속성값을 이용하여 일치하는 값을 찾아내는 방법 입니다.
 

$("div > a[href='http://www.entersoft.kr']").css("background", "#CCC");

위의 예제를 보면 a[href=' 부분이 속성값을 찾는 부분이다.

div 태그 안에 a태그를 찾아서 href 속성이 http://www.entersoft.kr 를 찾아 background 속성을 변경하는 예제 이다.

예제를 보자.

위의 결과를 보면 background 가 바뀐지 알 수가 있다.

그렇다면 a 태그중에 target 이 있는것만 선택하고 싶을 경우는 어떻게 해야 할까?
 

$("div > a[target]").css("background","#CCC");

위와 같이 해 주면 된다.

아래는 Selector 연산자에 대한 간단한 설명이다.
 

        $("div[id='d2'] ").css("background-color", "red");		// ID가 d2인것을 선택.
	$("div[id!='d2'] ").css("background-color", "red");		//ID가 d2 가 아닌것을 선택.
	$("div[id|='d2'] ").css("background-color", "red");		// '-'하이픈을 이준으로 좌측이 d2 인 값을 선택.
	$("div[id*='d2'] ").css("background-color", "red");		// 'd2'로 시작되는 객체를 선택.
	$("div[id~='d2'] ").css("background-color", "red");		// whitespace(공백) 마다 하나의 단어로 인식된다. 이때 일치는 id=d2 인것을 선택.
	$("div[id$='d2'] ").css("background-color", "red");		// 마지막이 'd2'로 끝나는 객체를 선택.
	$("div[id^='d2'] ").css("background-color", "red");		// 'd2'로 시작되는 객체를 선택.