02.jQuery - 선택기 ( 02.Selector.htm )

Godffs 2009. 11. 5. 11:09

기본 CSS 선택기

표현식	설명
E1	E1(태그명)인 모든 요소와 일치
E1.class	E1(태그명) 요소의 클래스가 class와 동일한 요소와 일치
E1.#id	E1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치
E1 E2	E1요소의 자식인 모든 E2(태그명) 요소와 일치
E1 > E2	E1요소와 바로 아래 자식인 E2 요소와 일치
E1 + E2	E1요소의 바로 다음에 나오는 형제요소 E2와 일치
E1[attr]	Title 어트리뷰트를 값이 val을 갖는 E1 요소와 일치
E1[attr=val]	attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치
E1[attr^=val]	attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치
E1[attr$=val]	attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치
E1[attr*=val]	attr 어트리뷰트의 값이 val값을 포함하는 E1 요소와 일치

[ 출처 : Taeyo ]

02.Selector.htm

<head>

.bg{ background-color:Yellow; }

.horizontal{ float:left; list-style:nono; margin:10px; }

</style>

$(document).ready(function() {

//[1] li > u 에 대해서 배경색을 Yellow로 설정 (li의 자식인 u의 배경색을 Yellow로 설정)

$('li > u').addClass('bg'); //li 자식 요소 중 u 태그인 것만 선별

//[2] id 속성이 myFavorites인 것인 작식 요소중 li에 CSS 클래스 적용

$('myFavorites > li').addClass("horzontal");

//[3] class 속성이 asp인 개체에 접근

$('asp').click(function() {

alert('ASP.NET'); }); //(.클래스)

//[4] id 속성에 대해서 직접 접근

$('#jQery').click(function() {

alert('안녕 jQuery!'); }); //아이디 접근으로 # 반드시 붙여주자 (#클래스)

})

</script>

</head>

<body>

<li id="jQery">jQery</li>

<li>Silver<u>Light</u></li>

</ul>

</body>

</html>

결과화면

[그림2-1]