jQuery/jQuery_basic.html at master · Biniamguchi/jQuery · GitHub

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <title> jQuery demo </title>
    <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type ="text/javascript">
    $(document).ready(function(){
        alert('You are now working on jQuery!');

        // console.log('You are now working on jQuery!');

        $('a').click(function(){
        alert('You are now leaving the page!');
        })
        // //effects methods they toggle the visibility property of items.
        // $('p').hide();
        $('#hide').click(function(){
            $('p').hide();
        })
        $('#show').click(function(){
            $('p').show();
        })
        // // manipulation methods add/change either text or html to your document.
        $('h3').hover(function(){
            $('h2').text('Go see the space Needle!');

        });

        $('.append').click(function(){
                $('.result').append('<h4>.Append adds HTML!</h4>');
        });
        // //css method
        $('button').click(function(){
            $('button').css('background-color','yellow');

        });

        });
</script>
</head>
<body>
    <div class='result'> </div>
    <p> This is a paragraph</p>
    <p> This is also a paragraph</p>
    <button id='hide'> This will hide all paragraphs!</button>
    <button id='show'> Click to show all the paragraphs</button>
    <a id='mylink' href= "http://www.google.com"> Go to google!</a>
    <h3> Mountain View, California</h3>
    <h2> Seattle, Washington</h2>
    <button class='append'> Click to see .append work!</button>
    <div class='result'> </div>
</body>
</html>