"JQuery 클릭 이벤트"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요[ | ]

jQuery 클릭 이벤트
jQuery .click()

2 예시1: input button[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>

<input type='button' id="button1" value='버튼1'/>

<script>
$("#button1").click(function() {
	alert("버튼1을 누르셨습니다.");
});
</script>

3 예시2: button[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>

<button id="button1">버튼1</button>

<script>
$("#button1").click(function() {
	alert("버튼1을 누르셨습니다.");
});
</script>

4 같이 보기[ | ]

5 참고[ | ]

http://www.w3schools.com/jquery/default.asp

@@ 1번째 줄: / 1번째 줄: @@
 {{소문자}}
+==개요==
 ;jQuery 클릭 이벤트
+;jQuery .click()
-==예시==
+==예시1: input button==
-*브라우저에서 문서를 모두 읽어들인 후에(ready), 모든 p 태그의 클릭 이벤트(click)에 숨김기능(hide)을 넣었다.
+<syntaxhighlight lang='html5'>
-<source lang='html5'>
+<script src="//code.jquery.com/jquery.min.js"></script>
-<!DOCTYPE html>
-<html lang="ko">
+<input type='button' id="button1" value='버튼1'/>
-<head>
-<meta charset="utf-8" />
+<script>
-<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+$("#button1").click(function() {
-<script type="text/javascript">
+	alert("버튼1을 누르셨습니다.");
-$(document).ready(function(){
+});
-  $("p").click(function(){
+</script>
-    $(this).hide();
+</syntaxhighlight>
-  });
+<jsfiddle>y779gh34</jsfiddle>
+==예시2: button==
+<syntaxhighlight lang='html5'>
+<script src="//code.jquery.com/jquery.min.js"></script>
+<button id="button1">버튼1</button>
+<script>
+$("#button1").click(function() {
+	alert("버튼1을 누르셨습니다.");
 });
 </script>
-</head>
+</syntaxhighlight>
-<body>
+<jsfiddle>900hzc02</jsfiddle>
-<p>클릭하면 사라집니다 1</p>
-<p>클릭하면 사라집니다 2</p>
-</body>
-</html>
-</source>
 ==같이 보기==
@@ 32번째 줄: / 39번째 줄: @@
 *[[jQuery bind 함수]]
 *[[jQuery 모바일 시작하기]]
+*[[JavaScript 클릭 이벤트]]
-==참고 자료==
+==참고==
 *http://www.w3schools.com/jquery/default.asp
 [[분류: jQuery]]