The Write Less, Do More, Javascript Library위의 문구는 jQuery 사이트의 타이틀입니다. 코딩은 적고 더욱 많은 걸 할 수 있다는.... jQuery에 대한 제대로 된 정의가 아닐까 싶습니다.
* 참고 : http://www.jquery.com/, http://visualjquery.com
- 제가 정의한 jQuery는 "DOM 접근과 컨트롤이 용이한 DIY 툴"입니다.
DOM 접근 방법
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu").css("cursor", "pointer");
$(".menu").click(function () {
var index = $(".menu").index(this);
$(".menu").css("font-weight", "normal");
$(".menu:eq("+ index +")").css("font-weight", "bold");
alert("Menu" + (parseInt(index)+1) + " 클릭되었습니다.");
});
$("#header").hide("slow").fadeIn(1000,function () {
alert("Menu를 클릭하세요.");
});
});
</script>
</head>
<body>
<div id="body">
<ul id="header">
<li class="menu">Menu1</li>
<li class="menu">Menu2</li>
<li class="menu">Menu3</li>
</ul>
</div>
</body>
</html>
$(document).ready(function() {});
- 페이지 로딩이 완료되면(준비되면) function을 실행
$(".menu").css("cursor", "pointer");
- 클래스명이 menu인 모든 Element의 css에 cursor: pointer; 를 준다.
$(".menu").click(function () {}
- 클래스명이 menu인 모든 Element를 클릭했을 때 function을 실행
var index = $(".menu").index(ele);
- 클래스명이 menu인 모든 Element중 ele 객체에 해당하는 인덱스 번호를 index에 담는다.
$(".menu:eq(0)").css("font-weight", "bold");
- 클래스명이 menu인 모든 Element중 첫번째 객체의 css에 font-weight: bold; 를 준다.
$("#header").hide("slow").fadeIn(1000,function () {
});
- 아이디가 header인 Element를 천천히 사라지게 하고, 1초 후 나타남 -> 완전히 나타난 후 function이 실행
jQuery는 위의 예처럼, DOM에 접근하기 위한 다양한 Selector를 제공합니다.
자세한 내용은 위에 링크 걸려있는 jQuery공식사이트나 visualjquery.com에서 확인하세요.
