제스타일이 원래 top-down 방식인지라... example 로 부터 문법이나 함수의 사용법을 배우는 식 입니다...
이방식이 좋다는게 아닙니다.. 저도 이런 방식이 문제 있다고 생각 하지만...
워낙 재미가 있어야 몬가를 하는 성격이라서... 결과를 보고 재미 있어야 그걸 분석 합니다...
아래 예제도 재미 있거든요.......
<!DOCTYPE html>
<!--
http://api.jquery.com/addClass/
-->
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<style>
.red { color:red; }
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="scripts/jquery.1.3.2.min.js"></script>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
<script>var title = $("em").attr("title");
$("div").text(title);
</script>
<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>
<script>
$("img").attr({ // img tag 모두의 속성에 대한 action ... 처리
src: "./images/hat.gif", // 속성은 json 에서 많이 보았던 hash 처리 방식 이군요...
title: "jQuery",
alt: "jQuery Logo"
});
$("div B").text($("img").attr("alt")); // 이런 방식도 재미 있네요... 그동안 alt 는 별로 사용성이 없는 속성이었는데,
</script>
<style>button { margin:10px; }
</style>
<button>0th Button</button>
<button>1st Button</button>
<button>2nd Button</button>
<script>
// 아래의 selector 방식이 참 재미 있군요... gt 는 파라미터로 zero-based index 를 가지는 모양 입니다.
// 즉 0,1,2,... elements 중 1,2,... 들 이군요.
// jQuery 에서는 array 의 part를 가져오는 연산자로 gt 이외의 재미 있는 것들이 많은것 같군요...
// http://api.jquery.com/gt-selector/ 여기를 참조...
// 참고 : :nth-child(n) 값은 1-based
//The index-related selectors (
:eq(), :lt(), :gt(), :even, :odd) filter the set of elements
//
$("button:gt(0)").attr("disabled","disabled");
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>
</body>
</html>