[jQuery] 기본 구문 만들기

Narcoker·2023년 5월 25일

jQuery

목록 보기

2/3

기본 구문

$('[css선택자]').[이벤트함수](function(){
  	...
});

활용 예제

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제이커리 기본 구문</title>
</head>
<body>
    <a class="show-btn" href="#none">보이기</a>
    <a class="hide-btn" href="#none">감추기</a>
    <p>태그 선택자 a를 클릭했습니다.</p>

    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>

custom.js

// 페이지가 실행됐을 때 바로 작동
$('p').css({'display': 'none'});

// .show-btn 이 클릭됐을 때 실행될 구문
$('.show-btn').click(function(){
    $('p').css({'display': 'block'})
});

// .hide-btn 이 클릭됐을 때 실행될 구문
$('.hide-btn').click(function(){
    $('p').css({'display': 'none'})
});