not set

jQuery 클래스 선택자 본문

javascript/jQuery

jQuery 클래스 선택자

다크곰 2012. 1. 17. 16:23


<!doctype html>

<html>

 <head>

  <title>jquery test</title>

  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>

  <script>

$(document).ready(function () {

$('.item').css('color','orange');

$('h1.item').css('background','red');

});

  </script>

 </head>

 <body>

  <h1 class="item">Header-0</h1>

  <h1 class="item select">Header-1</h1>

  <h1 class="item">Header-2</h1>

 </body>

</html>


위의 ready 메서드안의 스타일을 해석 해 보면

item 이라는 아이의 color를 orange로 
h1.item 이라는 아이의 백그라운드 속성을 red로 바꾸라는 얘기 이다.

<!doctype html>

<html>

 <head>

  <title>jquery test</title>

  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>

  <script>

$(document).ready(function () {

$('.item.select').css('color','blue');

});

  </script>

 </head>

 <body>

  <h1 class="item">Header-0</h1>

  <h1 class="item select">Header-1</h1>

  <h1 class="item">Header-2</h1>

 </body>

</html>


item 과 select를 모두 가지고 있는 문서 객체에 스타일을 적용하라.

매우 쉽죠~잉

본문 출처 : 모던 웹을 위한 Javascript 입문 및 jQuery입문
저작자표시

'javascript > jQuery' 카테고리의 다른 글

jQuery 속성 선택자  (0) 2012.01.17
jQuery 자식선택자, 후손 선택자  (0) 2012.01.17
jQuery 메서드의 기본 형태  (0) 2012.01.17
jQuery 의 ready()  (0) 2012.01.17
jQuery 다운로드, CDN 방식  (0) 2012.01.17
'javascript/jQuery' Related Articles more