jQuery: The Basics
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
- script 파일은 <head> 태그 사이에 위치 시킵니다.
- $(document).ready(function(){ // Your code here }); 는 자바스크립트 window.onload의 문제를 우회하기 위해서 이용합니다.
- window.onload = function() { alert("welcome"); } 는 웹페이지의 구조(DOM)가 로드된 직후에 호출되지 않고, 페이지 내의 모든 컨텐츠(이미지, 광고배너, 스크립트파일등)가 로드되어야만 호출이 되는 문제를 가지고 있음.
- event.preventDefault() 는 이벤트의 기본적인 행동을 방해합니다. 위의 샘플의 경우 페이지 이동을 하지 않습니다.
- 위의 예의 경우는 링크 클릭시 alert 창만 띄우고 페이지가 이동하지 않습니다.
'jquery 시작' 카테고리의 다른 글
| jQuery : 탐색(Traversing) 메서드 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
|---|---|
| jQuery : 조작(Manipulation) 메서드 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
| jQuery 셀렉터 : 필터 사용하기 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
| jQuery, 기본 셀렉터 - 출처 : TAEYO (taeyo.net) (0) | 2009.06.30 |
| jQuery 다운로드 (0) | 2009.06.29 |
