Front_end/learn_jquery.html at master · Watch-Dogs-HIT/Front_end · 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
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script>
        // demo
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
<script>
    // jQuery 函数格式
    // $(function(){
    //     // 开始写 jQuery 代码...
    // });

    // jQuery 选择器
    $("p")
    $("#test")
    $(".test")
    // more http://www.runoob.com/jquery/jquery-selectors.html


    // jQuery 事件 click dblclick mouseenter mouseleave mousedown mouseup hover() focus blur
    $("p").click(function(){
        $(this).hide();
    });

    // jQuery 效果- 隐藏和显示
    $("#hide").click(function(){
        $("p").hide(); // 隐藏
    });
    $("#show").click(function(){
        $("p").show(); // 显示
    });
    $("button").click(function(){
        $("p").toggle(); // 隐藏/显示 切换
    });

    // jQuery 方法链接
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
</script>


</body>
</html>