목차
click() 예제 - p요소 클릭 시, 경고창 띄우기 click() 정의 click() 구문 click() 예제 - p요소 클릭 시 요소 숨기기 click() 예제 - 여러 선택 요소에 click 이벤트 걸기 click 이벤트 - '보이기/숨기기' 토글
click() 예제 - p요소 클릭 시, 경고창 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("홈페이지 제작관리 강의");
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
click() 정의
click 이벤트는 마우스 왼쪽 버튼으로 선택 요소를 클릭하면 발생.
※ click() 메서드는 아래 2가지 역할 수행 가능.
① click 이벤트 촉발.
② click 이벤트 발생 시 실행할 함수 부착.
cf. click 이벤트 방식 효과 차이.
click()
: 현재요소에만 적용.
※ 미래요소 (=새로 생성되는 요소)엔 적용 X.
on("click")
: 현재요소 뿐만 아니라, 미래요소소에도 적용 O.
click() 구문
click 이벤트 촉발.
$(selector ).click()
click 이벤트에 함수 부착.
$(selector ).click(function )
[매개변수]
function
선택. click 이벤트 발생 시 실행할 함수 지정.
click() 예제 - p요소 클릭 시 요소 숨기기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<p>클릭하면 사라져랴! 얏!!</p>
<p>홈짱닷컴 Homzzang.com</p>
<p>HTML CSS JS SQL PHP</p>
결과보기
click() 예제 - 여러 선택 요소에 click 이벤트 걸기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="hz1">홈짱닷컴</div>
<div class="hz2">Homzzang.com</div>
<script>
$(document).ready(function(){
$('.hz1, .hz2 ').click(function() {
var $this = $(this);
if ($this.hasClass ('hz1 ')) {
$this.css("color","red");
} else {
$this.css("color","blue");
}
});
});
</script>
결과보기
PS.
click 이벤트 - '보이기/숨기기' 토글
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function homzzang() {
if($("#hz").css("display") == "none"){
$("#hz").show();
} else {
$("#hz").hide();
}
}
</script>
<style>
img {border:1px solid transparent}
img:hover { cursor:pointer; border:1px solid tomato;}
#hz {display:none;}
</style>
<img src="https://i.imgur.com/PQNhCln.gif" onclick="homzzang()" >
<div id="hz" >홈짱닷컴 Homzzang.com 놀러올거지?</div>
결과보기
