코드랩 레퍼런스

.click() 본문

JQUERY

.click()

webstoryboy 2018. 1. 28. 14:42

Definition

  • .click() 메서드는 선택한 요소를 클릭했을 때 이벤트가 발생합니다.

Syntax

$("selector").click()

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.click()

Sample1 이벤트 메서드 예제입니다.

이벤트(Event)

  • .click() : 클릭해보세요!
  • .dblclick() : 더블 클릭해보세요!
  • .hover() : 마우스 오버해보세요!
  • .mousedown() : 마우스 버튼을 놀러보세요!
  • .mouseenter() : 마우스를 여기에 올려보세요!
  • .mouseleave() : 마우스를 벗어나보세요!
  • .mousemove() : 마우스를 움직여보세요!
  • .mouseout() : 마우스를 벗어나보세요!
  • .mouseover() : 마우스를 올려보세요!
  • .mouseup() : 마우스를 눌렀다가 떼어보세요!
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>제이쿼리(jQuery)</title>
		<style>
			* {padding: 0; margin: 0;}
			.effect {overflow: hidden;}
			.effect li {
				float: left; width: 31.3333%; 
				margin:1%; list-style: none; 
				position: relative; cursor: pointer; 
			}
			.effect li img {
				width: 100%; display: block;
			}
			.effect li em {
				opacity: 1; 
				position: absolute; bottom: 0; left: 0; 
				width: 100%; padding: 20px; 
				box-sizing: border-box; 
				background-color:#000;
    			background: rgba(0,0,0,0.7); 
    			color: #fff;
    			transition: all 0.3s ease; 
    			z-index: 10;
    		}
		</style>
	</head>
	<body>
		<h3 class="h3">이벤트(Event)</h3>
		<div class="effect">
			<ul>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg01.png"><em>.click() : 클릭해보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg02.png"><em>.dblclick() : 더블 클릭해보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg03.png"><em>.hover() : 마우스 오버해보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg04.png"><em>.mousedown() : 마우스 버튼을 놀러보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg05.png"><em>.mouseenter() : 마우스를 여기에 올려보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg06.png"><em>.mouseleave() : 마우스를 벗어나보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg07.png"><em>.mousemove() : 마우스를 움직여보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg08.png"><em>.mouseout() : 마우스를 벗어나보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg09.png"><em>.mouseover() : 마우스를 올려보세요!</em></li>
				<li><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg10.png"><em>.mouseup() : 마우스를 눌렀다가 떼어보세요!</em></li>
			</ul>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script>
 			$(".effect li:eq(0)").click(function(){
 				$(this).find("em").text("클릭하였습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg11.png");
 			});
 			$(".effect li:eq(1)").dblclick(function(){
 				$(this).find("em").text("더블클릭하였습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg10.png");
 			});
 			$(".effect li:eq(2)").hover(function(){
 				$(this).find("em").text("마우스 오버했습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg09.png");
 			},function(){
 				$(this).find("em").text("마우스 오버해보세요!");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg03.png");
 			});
 			$(".effect li:eq(3)").mousedown(function(){
 				$(this).find("em").text("마우스 버튼을 눌렀습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg08.png");
 			});
 			$(".effect li:eq(4)").mouseenter(function(){
 				$(this).find("em").text("마우스 버튼을 올렸습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg07.png");
 			});
 			$(".effect li:eq(5)").mouseleave(function(){
 				$(this).find("em").text("마우스가 벗어났습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg11.png");
 			});
 			$(".effect li:eq(6)").mousemove(function(){
 				$(this).find("em").text("마우스를 움직였습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg05.png");
 			});
 			$(".effect li:eq(7)").mouseout(function(){
 				$(this).find("em").text("마우스가 벗어났습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg04.png");
 			});
 			$(".effect li:eq(8)").mouseover(function(){
 				$(this).find("em").text("마우스를 올렸습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg03.png");
 			});
 			$(".effect li:eq(9)").mouseup(function(){
 				$(this).find("em").text("마우스를 올렸다가 떼었습니다.");
 				$(this).find("img").attr("src","https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg02.png");
 			});
		</script> 
	</body>
</html>       

Share

Ad

Comments