이 섹션에서는 jQuery를 사용하여 "Hello World" 경고 상자를 표시하는 프로그램을 작성 안내합니다. 이 응용 프로그램은 "Hello World"라는 메시지를 표시하기 위해 javascript alert() 메서드를 사용합니다.
이 예제에서는 jQuery를 사용하여 JavaScript를 작성하는 방법을 배우게됩니다.버튼을 사용자가 클릭 "Click Me"하면 경고 메시지가 사용자에게 표시됩니다
다음 메소드는 버튼 첨부된 Click 이벤트에 사용됩니다 :
$("#cl").click(function(){....})
jQuery의 위의 코드는 단추 클릭 이벤트를 처리하고 중괄호 {}에 정의된 JavaScript를 실행합니다.중괄호에서는 JavaScript alert () 메소드를 정의했습니다.
<html>
<head>
<title>jQuery Hello World Alert box</title>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>
설명 :
jQuery 사용을 위해, 여러분은 jquery를 <script> 태그 안에 넣어줍니다.
$(document).ready(function(){
// Your code here
});
HTML 페이지는 클릭 이벤트가 이 요소에서 실행됩니다 "CL"라는 버튼을 포함하고, 그것은 메시지 "Hello World"를 보여주는 경고 상자를 표시합니다.
$("#cl").click(function(){
alert("HELLO WORLD!");
});
OUTPUT
버튼을 클릭하면 :
'jQuery' 카테고리의 다른 글
| jQuery with other libraries (0) | 2013.04.29 |
|---|---|
| How jQuery Works? (0) | 2013.04.29 |
| jQuery Hello World example (0) | 2013.04.29 |
| Downloading and Installing jQuery (0) | 2013.04.29 |
| what is jQuery? (0) | 2013.04.29 |