jQuery 이벤트 발생시켜보기

Posted by ITPangPang
2016. 10. 3. 21:35 웹(Web)/jQuery


jQuery 이벤트

발생시켜보기



ㆍ 이번에는 jQuery를 이용해서 이벤트를

    발생시켜보겠습니다.


ㆍ 아주 간단하게 버튼을 배치하고 클릭했을때

    Text 색깔을 바꿔보도록 하겟습니다.




일단 HTML에서 Text와 버튼 배치


간단하게 Text 하나와

버튼 3개를 배치시켜보도록

하겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
</head>
<body>
    <h1>안녕하시와요</h1>
    <button>빨간색</button>
    <button>노란색</button>
    <button>파란색</button>
</body>
</html>
cs


이렇게 작성한 후에

결과를 한번 보면!


이렇게 Text 하나와

버튼 3개가 출력 된 것을

확인 할 수 있습니다.


ID 추가 및 jQuery 준비


이벤트를 발생시키기

위해서 각각 일단 ID를 부여합니다


그리고 그 ID값을

제어하기 위해서

jQuery도 준비해보겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function()
         {
         }
     </script>
</head>
<body>
    <h1 id="text_test">안녕하시와요</h1>
    <button id="btn_red">빨간색</button>
    <button id="btn_yellow">노란색</button>
    <button id="btn_blue">파란색</button>
</body>
</html>
cs


여기까지는

이전글과 똑같고


이제 이벤트를

발생시켜보도록

하겠습니다


이벤트 추가


뭐 이벤트 추가라고

해봤자 버튼클릭입니다


.click()

요놈이 전부입니다


클릭시 .css를 추가해서

색깔을 변경시켜주면 되겠죠


코드작성하는 방법도

위와 마찬가지로 간단합니다


코드를 확인해보겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function()
         {
             $("#btn_red").click(function()
             {
                 $("#text_test").css("color","red");    
             })
 
             $("#btn_yellow").click(function()
             {
                 $("#text_test").css("color","yellow");    
             })
 
             $("#btn_blue").click(function()
             {
                 $("#text_test").css("color","blue");    
             })
         });
     </script>
</head>
<body>
    <h1 id="text_test">안녕하시와요</h1>
    <button id="btn_red">빨간색</button>
    <button id="btn_yellow">노란색</button>
    <button id="btn_blue">파란색</button>
</body>
</html>
cs


보면 바로 이해할 수 있는

코드입니다.


ID Selector를 이용해서

ID에 해당하는 엘리먼트를

찾고 거기에 .click()

클릭이벤트를 붙여줍니다


그 다음에 클릭했을때

또 다시 ID Selector로 텍스트를

찾아내서 .css() 효과를 적용시키는

코드입니다


결과를 gif로

만들고 싶은데

편집 프로그램을 삭제 했더니..


동영상으로 대체하겠습니다.

뭐 별건 아니니까 

직접 돌려보시면 될 것 같습니다


저작자표시 비영리 변경금지

'웹(Web) > jQuery' 카테고리의 다른 글

jQuery - Selector  (0) 2016.10.02
jQuery Hello World(Hello ITPANGPANG) 찍기  (0) 2016.10.02
Trackback: Comment:

티스토리툴바