[Event] JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드) ※ 마우스클릭 시 실행.

목차

1. click() 예제 - p요소 클릭 시, 경고창 띄우기
2. click() 정의
3. click() 구문
4. click() 예제 - p요소 클릭 시 요소 숨기기
5. click() 예제 - 여러 선택 요소에 click 이벤트 걸기
6. 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>

 

결과보기

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>

 

결과보기