jQuery 강좌 | Methods > .click()

.click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 합니다.

문법

.click( handler )

예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다.

$( 'button' ).click( function() {
  // function
} );

예제

http://book.cmsfactory.net/jQuery/V01/Methods/click-01.html

문단을 클릭했을 때 문단을 둘러싸는 박스를 만드는 예제입니다. 박스가 만들어진 후 다시 클릭하면 박스가 사라집니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery Methods | .click()</title>
    <style>
      p {
        cursor: pointer;
      }
      .jbBox {
        border: 1px solid #bcbcbc;
        padding: 20px;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'p' ).click( function() {
          $( this ).toggleClass( 'jbBox' );
        } );
      } );
    </script>
  </head>
  <body>
    <p>Lorem ipsum dolor.</p>
  </body>
</html>

Category

Created on 2014-06-09 14:57 | Updated on 2015-07-17 01:04