jQuery 메서드의 기본 형태
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입문