not set

jQuery 메서드의 기본 형태 본문

javascript/jQuery

jQuery 메서드의 기본 형태

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

jQuery  ('h1').css('color','red');
------ ----  -----------------
jQuery, 선택자, 메서드



jQuery에서 가장 기본적인 형태이며, 선택자는 jQuery에서 가장 중요한 역할을 한다.
CSS의 선택자와 비슷한 형태를 가짐. 

- 전체 선택자 



* 를 전체 선택자라고 부르며

<!doctype html>

<html>

 <head>

  <title>jquery test</title>

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

  <script>

$(document).ready(function () {

$('*').css('color','red');

});

  </script>

 </head>

 <body>

  <h1>red color test</h1>

 </body>

</html>


위의 소스를 실행후에 요소 검사를 해보면 



html, head, title, body 테그 까지 모두 스타일이 적용된 것을 알 수 있다.

  <script>

$(document).ready(function () {

$('h1,p').css('color','red');

});

  </script>


위와 같이 태그 2개로도 활용 될 수도 있다.

아이디 선택자로도 사용 될 수 있다.

<!doctype html>

<html>

 <head>

  <title>jquery test</title>

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

  <script>

$(document).ready(function () {

$('#target').css('color','orange');

});

  </script>

 </head>

 <body>

  <h1>Header-0</h1>

  <h1 id="target">Header-1</h1>

  <h1>Header-2</h1>

 </body>

</html>


위의 소스를 실행해 보면 target 에 해당 되는 부분의 태그에 스타일을 적용할 수 있다.

<!doctype html>

<html>

 <head>

  <title>jquery test</title>

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

  <script>

$(document).ready(function () {

$('h1#target').css('color','orange');

});

  </script>

 </head>

 <body>

  <h1>Header-0</h1>

  <h1 id="target">Header-1</h1>

  <h1>Header-2</h1>

 </body>

</html>


또 위와 같이 h1 태그 중 id 속성이 target 인 문서 객체를 선택 해서 스타일을 적용 할수도 있다.

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

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

jQuery 자식선택자, 후손 선택자  (0) 2012.01.17
jQuery 클래스 선택자  (0) 2012.01.17
jQuery 의 ready()  (0) 2012.01.17
jQuery 다운로드, CDN 방식  (0) 2012.01.17
jQuery 란?  (0) 2012.01.17
'javascript/jQuery' Related Articles more