<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
J("*").css("color", "Red"); // 태그 전체 선택자
J("h1").css("color", "Yellow"); // 태그 선택자
J("h1,p").css("background", "Red"); // 태그 다중 선택자
J("#target").css("color", "Blue"); // id 선택자 ('#' 로 지정)
J("h1#target").css("background", "Pink"); // 태그 + id 선택자(id = #)
J("h1.item").css("color", "Green"); // 태그 + class 선택자(class = .)
});
</script>
<title>Untitled Page</title>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet.</p>
<h1>Lorem ipsum</h1>
<p>consectetur adipiscing elit.</p>
<h1 id="target">Header-0</h1>
<h1 class="item">Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
J("*").css("color", "Red"); // 태그 전체 선택자
J("h1").css("color", "Yellow"); // 태그 선택자
J("h1,p").css("background", "Red"); // 태그 다중 선택자
J("#target").css("color", "Blue"); // id 선택자 ('#' 로 지정)
J("h1#target").css("background", "Pink"); // 태그 + id 선택자(id = #)
J("h1.item").css("color", "Green"); // 태그 + class 선택자(class = .)
});
</script>
<title>Untitled Page</title>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet.</p>
<h1>Lorem ipsum</h1>
<p>consectetur adipiscing elit.</p>
<h1 id="target">Header-0</h1>
<h1 class="item">Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
'공부 > JQuery' 카테고리의 다른 글
| JQuery_[배열1(스크립트배열), 배열2(선택자)] (0) | 2013.01.07 |
|---|---|
| JQuery_[필터 선택자] (0) | 2013.01.07 |
| JQuery_[속성 선택자] (0) | 2013.01.07 |
| JQuery_[JQuery 자식, 후손 선택자] (0) | 2013.01.07 |
| JQuery_[JQuery 이란?] (0) | 2013.01.07 |