"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()
-==example02.php==
+==예시1: input button==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
-<!DOCTYPE html>
+<script src="//code.jquery.com/jquery.min.js"></script>
-<html lang="ko">
-<head>
+<input type='button' id="button1" value='버튼1'/>
-<meta charset="utf-8" />
-<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+<script>
-<script type="text/javascript">
+$("#button1").click(function() {
-$(document).ready(function(){
+	alert("버튼1을 누르셨습니다.");
-$("p").click(function(){
-$(this).hide();
-});
 });
 </script>
-</head>
+</syntaxhighlight>
-<body>
+<jsfiddle>y779gh34</jsfiddle>
-<p>클릭하면 사라집니다 1</p>
-<p>클릭하면 사라집니다 2</p>
-</body>
-</html>
-</source>
-==해설==
+==예시2: button==
-브라우저에서 문서를 모두 읽어들인 후에(ready), 모든 p 태그의 클릭 이벤트(click)에 숨김기능(hide)을 넣었다.
+<syntaxhighlight lang='html5'>
+<script src="//code.jquery.com/jquery.min.js"></script>
-==숙제==
+<button id="button1">버튼1</button>
-*"클릭하면 사라집니다." 위에 마우스를 올리면 마우스 커서가 손모양이 되도록 해보자.
-==참고자료==
+<script>
-*http://www.w3schools.com/jquery/default.asp
+$("#button1").click(function() {
+	alert("버튼1을 누르셨습니다.");
+});
+</script>
+</syntaxhighlight>
+<jsfiddle>900hzc02</jsfiddle>
 ==같이 보기==
-*[[jQuery (3)]]
+*[[jQuery 폼 내부 어느 버튼인지 확인]]
+*[[jQuery CSS 속성 변경]]
+*[[jQuery 이벤트]]
+*[[jQuery preventDefault 함수]]
+*[[jQuery bind 함수]]
 *[[jQuery 모바일 시작하기]]
+*[[JavaScript 클릭 이벤트]]
+==참고==
+*http://www.w3schools.com/jquery/default.asp
 [[분류: jQuery]]