QUIZGUM

Coding Class

Quizgum : click event

jQuery Click Event

Let's learn today what happens when we click on an element.

situation 1

Let's make hello world disappear when you click on the phrase hello world. ^^

use click()

Use the click() function to trigger any event when clicking. How to use is simple.

Write the element you want to press as a selector and use click (function() {.

if,

<div class="content">Hello world!!</div>

When I wrote the above. In that case, if you use jQuery to express hello world !!!
First, select the content class.

$('.content')

You make the choice as above
Then we place a dot after the selector and write down the click function click(); This is shown below.

$('.content').click();

What event should we have clicked on? You need function() {} to create an event.
This should be put in the click variable click() because it should cause something to happen when you click on it. Then it looks like this?

$('.content').click(function(){});

So where do you write the object that needs to happen? It's in the {} of function() {}.
It may be difficult for me to say it, but if you type the above frequently, it will memorize easily. (Be patient ...)
Since we want to implement the feature that makes hello world itself disappear when we click on hello world, we declare a class content that encloses hello world in {}.
그러면 모양이 이렇게 되죠? 보기 쉽게 하기 위하여 {}사이에 엔터를 쳐서 줄을 바꾸겠습니다. 

$('.content').click(function(){
    $('.content');
});

As above, $('.content') is declared between {}.
You should use a function that disappears right here. It's right around !! hide(); Paste this hide function next to the class content. Draw a dot and write hide(); As follows 

$('.content').click(function(){
    $('.content').hide();
});

Let's implement this source.

source is

$(function(){
    $('.content').click(function(){
        $('.content').hide();
    });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</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>

Then let's do one more. The next step is to create two buttons, the show button and the hide button, to make the hello world visible or invisible.

Hello world!!!

The source used to implement the above functionality is too simple.
I used show() for the first time.
function is showing what
I just used another source of the same format and replaced hide() with show(). I just implemented it this way. ^^ 

$(function(){
    $('.btn_show').click(function(){
        $('.btn_word').show();
    });

    $('.btn_hide').click(function(){
        $('.btn_word').hide();
    });
});

Source 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</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>