jQuery
클릭시 이벤트 발생
클릭 했을때 무언가 실행하기
우리가 어떠한 요소에 클릭을 했을때 어떠한 현상이 일어나게끔 하는것을 오늘 배워 보도록 합시다. (너무진도가 빠른건가 -_-^;)
상황1
hello world라는 문구를 클릭했을때 hello world가 사라지게끔 해봅시다.^^
click() 이용하기
click시에 어떠한 이벤트가 발생하기 위해서는 click()함수를 사용합니다. 사용방법은 간단합니다.
자신이 누르고 싶은 요소를 선택자로 작성하고.click(function(){를 써주면됩니다. 이해가 되시나요?
만약,
<div class="content">Hello world!!</div>
를 작성하였다고 합니다. 그럴 경우 위의 hello world!!!를 클릭 한다는 것을 제이쿼리로 표현을 해본다면
먼저 content 클래스를 선택합니다.
$('.content')
위와 같이 선택을 하게 되죠?
그리고 선택자 뒤에 점을 찍고 클릭 함수를 적어줍니다. click();
이렇게 하면 아래의 모양이 됩니다.
$('.content').click();
그러면 클릭을 했으면 어떠한 일이 일어나야 겠죠? 일이 일어나게 할려면 function(){} 가 필요합니다.
이것은 클릭을 할때 어떠한 일이 생기게끔 해야 하므로 클릭변수 click()안에 넣어 주게 됩니다. 그러면 모양이 이렇게 되죠?
$('.content').click(function(){});
그러면 일이 일어나야 하는 대상체는 어디에다가 쓸까요? 바로 function(){}의 {}안에 넣게 됩니다.
제가 하는 말이 어려울 수 있지만 위의 형태를 자주 타이핑 하면 저절로 쉽게 외워집니다. (인내심을......)
우리는 hello world를 클릭시에 hello world 자기 자신이 사라지게끔 하는 기능을 구현하려고 하기때문에 {}안에 hello world를 감싸는 클래스
content를 선언해줍니다.
그러면 모양이 이렇게 되죠? 보기 쉽게 하기 위하여 {}사이에 엔터를 쳐서 줄을 바꾸겠습니다.
$('.content').click(function(){
$('.content');
});
위와같이 {}사이에 $('.content')를 선언했습니다. 그런데 어쩌라고??
바로 여기에서 사라지는 함수를 사용해야 합니다. 그것은 바로 두둥!! hide();입니다. 이 하이드 함수를 클래스 content 옆에 붙여줍니다. 점을찍고 hide();를 적어줍니다. 아래와 같이
$('.content').click(function(){
$('.content').hide();
});
위와 같습니다. 그러면 한번 이 소스를 구현해 봅시다.
그래서 결론 소스는
$(function(){
$('.content').click(function(){
$('.content').hide();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.content').click(function(){
$('.content').hide();
});
});
</script>
</head>
<body>
<div class="content">hello world</div>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
그럼 하나 더 해봅니다. 다음은 show버튼과 hide버튼 2개의 버튼을 생성해서 hello world가 보이게도 또는 안보이게도 하는것인데요.. 해봅시다.
위의 기능을 구현하기 위해서 사용된 소스는 너무 너무 간단합니다. 처음보는 show()라는 것을 사용했는데요.보여주는 함수 입니다. 똑같은 형식의 소스를 하나더 써주고 hide()를 show()로 바꿔줬을뿐입니다. 일단 이렇게 간단하게 구현을 해보았습니다. ^^
$(function(){
$('.btn_show').click(function(){
$('.btn_word').show();
});
$('.btn_hide').click(function(){
$('.btn_word').hide();
});
});
전체 소스 보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.btn_show').click(function(){
$('.btn_word').show();
});
$('.btn_hide').click(function(){
$('.btn_word').hide();
});
});
</script>
</head>
<body>
<button class="btn_show" style="padding:3px">show</button>
<button class="btn_hide" style="padding:3px">hide</button>
<div class="btn_word">Hello world!!!</div>
</body>
</html>
결과는 바로 아래에서 확인할 수 있습니다.
