원문: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
<html>
<head>
<style type="text/css">
.red {
background-color:red;
}
.blue {
background-color:blue;
}
.green {
background-color:green;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/**
orderedlist 라는 아이디를 가진 엘리먼트에 red 클래스 적용
*/
$("#orderedlist").addClass("red");
/**
orderedDiv 라는 아이디를 가진 엘리먼트에 포함된 객체들 중에, li 요소들에 blue 클래스 적용
*/
$("#orderedlist > li").addClass("blue");
/**
orderedDiv 라는 아이디를 가진 엘리먼트 내의 li 요소 중에 가장 마지막 엘리먼트에 이벤트 정의
hover 이벤트는, mouseover, mouseout 의 효과를 주며,
두개의 함수를 정의해서, In, Out 의 효과를 각각 정의할 수 있다.
*/
$("#orderedDiv li:last").hover(function() {
$(this).addClass("green");
}, function(){
$(this).removeClass("green");
});
/**
$("#orderedlist").find("li") 는 $("#orderedlist li") 와 거의 유사하다.
*/
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
/**
reset 아이디를 가진 엘리먼트를 클릭했을 때, 폼의 요소를 모두 되돌린다.
*/
$("#reset").click(function() {
$("form")[0].reset();
});
/**
:not(selector)
Filters out all elements matching the given selector
주어진 셀렉터에 매칭되는 엘리먼트를 제외한다.
:has(selector)
Matches elements which contain at least one element that matches the specified selector.
주어진 셀렉터에 적어도 하나라도 매칭되는 엘리먼트들을 포함한다.
*/
$("li").not(":has(ul)").css("border", "1px solid black");
// == $("li:not(:has(ul))").css("border", "1px solid black");
/**
a 라는 태크 네임을 가지고, name 속성이 utsmanNet인 엘리먼트에 background-color 속성을 지정한다.
*/
$("a[name=utsmanNet]").css("background", "#eee" );
/**
$("a[href*=utsman]") a 태그 중에서 href 속성 값이 utsman 을 포함하는 엘리먼트를 리턴한다.
(이 놈의 jQuery Selector 는 무지하게 막강하구나!)
*/
$("a[href*=utsman]").click(function(e) {
alert('welcome![' + this.href + ']');
});
/**
end( )
Revert the most recent 'destructive' operation,
changing the set of matched elements to its previous state (right before the destructive operation).
엘리먼트 매칭 셋을 변경하기 위해서, 이전까지의 엘리먼트 매칭 상태를 파괴한다.
next( expr )
Get a set of elements containing the unique next siblings of each of the given set of elements.
주어진 엘리먼트(들)의 next siblings set을 리턴한다.
*/
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
}).css('cursor', 'pointer')
.hover(function() { $(this).addClass("green"); }, function(){ $(this).removeClass("green"); });
/**
hover (in, out)
*/
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});
</script>
</head>
<body>
<div id="orderedDiv">
<ul id="orderedlist">
<li>1</li>
<li>2
<ul>
<li>2-1<ul><li>2-1-1<ul><li>2-1-1-1</li></ul></li></ul></li>
<li>2-2</li>
</ul>
</li>
<li>3</li>
</ul>
</div>
<form>
<input type="text" value=""/>
<input type="text" value=""/>
<input type="text" value=""/>
<textarea></textarea>
</form>
<input id="reset" type="button" value="reset"/>
<a name="utsmanNet" href="http://utsman.net">utsman.net</a>
</body>
</html>
<head>
<style type="text/css">
.red {
background-color:red;
}
.blue {
background-color:blue;
}
.green {
background-color:green;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/**
orderedlist 라는 아이디를 가진 엘리먼트에 red 클래스 적용
*/
$("#orderedlist").addClass("red");
/**
orderedDiv 라는 아이디를 가진 엘리먼트에 포함된 객체들 중에, li 요소들에 blue 클래스 적용
*/
$("#orderedlist > li").addClass("blue");
/**
orderedDiv 라는 아이디를 가진 엘리먼트 내의 li 요소 중에 가장 마지막 엘리먼트에 이벤트 정의
hover 이벤트는, mouseover, mouseout 의 효과를 주며,
두개의 함수를 정의해서, In, Out 의 효과를 각각 정의할 수 있다.
*/
$("#orderedDiv li:last").hover(function() {
$(this).addClass("green");
}, function(){
$(this).removeClass("green");
});
/**
$("#orderedlist").find("li") 는 $("#orderedlist li") 와 거의 유사하다.
*/
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
/**
reset 아이디를 가진 엘리먼트를 클릭했을 때, 폼의 요소를 모두 되돌린다.
*/
$("#reset").click(function() {
$("form")[0].reset();
});
/**
:not(selector)
Filters out all elements matching the given selector
주어진 셀렉터에 매칭되는 엘리먼트를 제외한다.
:has(selector)
Matches elements which contain at least one element that matches the specified selector.
주어진 셀렉터에 적어도 하나라도 매칭되는 엘리먼트들을 포함한다.
*/
$("li").not(":has(ul)").css("border", "1px solid black");
// == $("li:not(:has(ul))").css("border", "1px solid black");
/**
a 라는 태크 네임을 가지고, name 속성이 utsmanNet인 엘리먼트에 background-color 속성을 지정한다.
*/
$("a[name=utsmanNet]").css("background", "#eee" );
/**
$("a[href*=utsman]") a 태그 중에서 href 속성 값이 utsman 을 포함하는 엘리먼트를 리턴한다.
(이 놈의 jQuery Selector 는 무지하게 막강하구나!)
*/
$("a[href*=utsman]").click(function(e) {
alert('welcome![' + this.href + ']');
});
/**
end( )
Revert the most recent 'destructive' operation,
changing the set of matched elements to its previous state (right before the destructive operation).
엘리먼트 매칭 셋을 변경하기 위해서, 이전까지의 엘리먼트 매칭 상태를 파괴한다.
next( expr )
Get a set of elements containing the unique next siblings of each of the given set of elements.
주어진 엘리먼트(들)의 next siblings set을 리턴한다.
*/
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
}).css('cursor', 'pointer')
.hover(function() { $(this).addClass("green"); }, function(){ $(this).removeClass("green"); });
/**
hover (in, out)
*/
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});
</script>
</head>
<body>
<div id="orderedDiv">
<ul id="orderedlist">
<li>1</li>
<li>2
<ul>
<li>2-1<ul><li>2-1-1<ul><li>2-1-1-1</li></ul></li></ul></li>
<li>2-2</li>
</ul>
</li>
<li>3</li>
</ul>
</div>
<form>
<input type="text" value=""/>
<input type="text" value=""/>
<input type="text" value=""/>
<textarea></textarea>
</form>
<input id="reset" type="button" value="reset"/>
<a name="utsmanNet" href="http://utsman.net">utsman.net</a>
</body>
</html>
