Fork me on GitHub

jQuery基础

发表于 | 更新于 | 分类于 | 阅读次数：


  • jQuery 是一个 JavaScript 库。
  • jQuery 极大地简化了 JavaScript 编程。
  • jQuery 很容易学习。

1.Intro & Selectors

1.1 把 jQuery 添加到您的网页

  • 如需使用 jQuery，需要下载 jQuery 库，然后把它包含在希望使用的网页中。jQuery 库是一个 JavaScript 文件，可以在html文件中引用它。
    1
    <script src="../jquery-3.4.1.min.js"></script>
    下载地址

1.2 jQuery 选择器

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中：
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

Intro & Selectors~点击查看完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    $('h1').hide();
    $('#heading1').hide();
    $('h1.heading2').hide();                              // 隐藏类是“heading2”的h1标签内容
    $('span').css('color', 'green');                         // 所有地span中地内容发生改变
    $('p span').css('color', 'red');                         // p标记里面的span标记中的内容发生改变 有先后顺序
    $('ul#list li:first').css('color', 'red');
    $('ul#list li:last').css('color', 'green');
    $('ul#list li:even').css('background-color', 'silver');  // 选奇数行
    $('ul#list li:odd').css('background-color', 'yellow');   // 选偶数行
    $('ul#list li:nth-child(3n)').css('list-style', 'none'); //nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。3n就是每第三个
    $(':button').hide();
    $('[href]').css('color', 'red');
    $('a[href="http://lee1224.com"]').css('color', 'gray');
    //$('*').hide();                                         // 隐藏全部
</script>

执行前的网页：

执行后：

2.Events


Event~点击查看完整代码
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Events</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 17px;
            font-family: Arial;
            background: #f4f4f4;
            line-height: 1.5em;
        }

        header {
            background: #333333;
            color: #fff;
            padding: 20px;
            text-align: center;
            border-bottom: 4px #000 solid;
            margin-bottom: 10px;
        }

        #container {
            width: 90%;
            margin: auto;
            padding: 10px;
        }
    </style>
</head>

<body>
<header>
    <h1>jQuery Crash Course | Events</h1>
</header>
<div id="container">
    <h1>Mouse Events</h1>
    <button id="btn1" class="btnClass">Button 1</button>
    <button id="btn2">Button 2</button>
    <button id="buttoncgbk">Buttoncgbk</button>
    <p class="para1">
        Wikipedia is hosted by the Wikimedia Foundation, a non-profit
        organization that also hosts a range of other projects.
        Wikipedia apps are now available: Download for iOS on the App Store
        Download for Android on Google Play
        View full list of available Wikipedia apps
    </p>
    <!--    <h1 id="coords"></h1>-->
    <form id="form">
        <label>Name</label>
        <br>
        <input type="text" id="name" name="name">
        <br>
        <label>Email</label>
        <br>
        <input type="email" id="email" name="email">
        <br>
        <label>Gender</label>
        <select id="gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select><br>
        <input type="submit" value="Submit">
    </form>
</div>
<script>
    $(document).ready(function () {  // 等页面加载完成再执行，否则找不到元素。这样就可以把代码放在任何位置

        $('#btn1').click(function () {
            alert('Button Clicked!');
        });

        $('#btn1').on('click', function () { // 效果和上面一样
            alert('Button Clicked!');
        });


        $("#buttoncgbk").toggle(function () {                    //点击按钮切换不同背景
                $("body").css("background-color", "green");
            },
            function () {
                $("body").css("background-color", "red");
            },
            function () {
                $("body").css("background-color", "yellow");
            }
        );

        $('#btn1').on('click', function () {
            $('.para1').toggle();
        });
        $('#btn2').on('click', function () {
            $('.para1').show();
        });

        $('#btn1').dblclick(function () {  // 双击事件
            $('.para1').toggle();
        });

        $('#btn2').hover(function () {  // hover不是事件事mouseenter和mousleave的shorthand
            $('.para1').toggle();
        });
        $('#btn1').on('mousemove', function () {  // 鼠标动一下就触发一次
            $('.para1').toggle();
        });

        $('#btn1').on('mousedown', function () {  // 鼠标动一下就触发一次
            $('.para1').toggle();
        });
        $('#btn1').on('mouseup', function () {  // 鼠标动一下就触发一次
            $('.para1').toggle();
        });

        $('#btn1').click(function (e) {
            // console.log(e); // 在浏览器打开console可以查看相关信息
            // alert(e.currentTarget.id);
            // alert(e.currentTarget.innerHTML);
            // alert(e.currentTarget.outerHTML);
            alert(e.currentTarget.className);
        });

        $(document).on('mousemove', function (e) {
            // console.log('Cooeds Y:'+e.clientY+'X:'+e.clientX); // 在console显示当前鼠标位置
            $('#coords').html('Cooeds Y:' + e.clientY + 'X:' + e.clientX);
        });

        $('input').focus(function () {
            $(this).css('background', 'silver');
        });
        $('input').blur(function () {            // 与focus相反
            $(this).css('background', 'white');
        });
        $('input').keyup(function (e) {          // 键盘按下起来的时候事件
            console.log(e.target.value);
        });

        $('select#gender').change(function (e) {
            alert(e.target.value);
        });
        $('#form').submit(function (e) {
            e.preventDefault();                 // 取消事件的默认动作。
            var name = $('input#name').val();
            console.log(name);
        });

    });
</script>
</body>
</html>

点击查看更多事件内容

3.DOM Manipulation

DOM Manipulation~点击查看完整代码
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EventDOM Manipulations</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 17px;
            font-family: Arial;
            background: #f4f4f4;
            line-height: 1.5em;
        }

        header {
            background: #333333;
            color: #fff;
            padding: 20px;
            text-align: center;
            border-bottom: 4px #000 solid;
            margin-bottom: 10px;
        }

        #container {
            width: 90%;
            margin: auto;
            padding: 10px;
        }

        .myClass {
            color: white;
            background: black;
        }
    </style>
</head>

<body>
<header>
    <h1>jQuery Crash Course | DOM Manipulaion</h1>
</header>
<div id="container">
    <button id="btn1">Button 1</button>
    <p class="para1">This is a paragraph.</p>
    <p class="para2">This is another paragraph.</p>
    <div id="myDiv"></div>
    <input type="text" id="newItem">
    <ul id="list">
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
    </ul>
    <a href="https://www.lee1224.com">一只老菜鸡</a>
    <ul id="users">

    </ul>
</div>
<script>
    $(document).ready(function () {
        $('p.para1').css('color', 'red');
        $('p.para1').css({color: 'red', background: '#ccc'});
        $('p.para2').addClass('myClass');
        $('p.para2').removeClass('myClass');
        $('#btn1').click(function () {
            $('p.para2').toggleClass('myClass');   // 切换样式
        });
        $('#myDiv').text('Hello Wold');         // 直接显示文本
        $('#myDiv').html('<h3>Hello World</h3>');
        alert($('#myDiv').text());


        $('ul').append('<li>Append List Item</li>');     // 在最后添加(内部)
        $('ul').prepend('<li>Prepend List Item</li>');  // 在第一个前添加（内部）
        function prepend1() {
            $('.para1').prependTo('.para2');
        };
        setTimeout(prepend1, 3000);
        $('.para1').appendTo('.para2');
        $('ul').before('<h4>Hello</h4>');                // 前面添加(外部)
        $('ul').after('<h4>World</h4>');                 // 在后面添加（外部）
        $('ul').empty();                                 // 把所有的innerHTML清除 标签还在
        $('ul').detach();                                // 把标签也清除
        $('a').attr('target', '_blank');                 // 在新页面打开链接
        alert($('a').attr('href'));
        $('a').removeAttr('target');

        $('p').wrap('<h1>');                              // 使用h1标签分别包裹起来
        $('p').wrapAll('<h2>')                            // 把所有内容包裹在一个h2标签中


        $('#newItem').keyup(function (e) {
            var code = e.which;
            if (code == 13) {                               // while属性范围值为13是即为按下enter键
                e.preventDefault();
                $('ul').append('<li>' + e.target.value + '</li>');
            }
        });

        var myArr = ['Brad', 'Kelley', 'Nate', 'Jose'];
        $.each(myArr, function (i, Val) {
            $('#users').append('<li>' + Val + '</li>');
        });

        var newArr = $('ul#list li').toArray();
        $.each(newArr, function (i, Val) {
            console.log(Val.innerHTML);
        });
    });
</script>
</body>
</html>
点击查看更多DOM内容

4.Effects and Animation

Effects and Animation~点击查看完整代码
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Effects and Animation</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 17px;
            font-family: Arial;
            background: #f4f4f4;
            line-height: 1.5em;
        }

        header {
            background: #333333;
            color: #fff;
            padding: 20px;
            text-align: center;
            border-bottom: 4px #000 solid;
            margin-bottom: 10px;
        }

        #container {
            width: 90%;
            margin: auto;
            padding: 10px;
        }

        #box {
            background: #333;
            color: #fff;
            width: 500px;
            height: 90px;
            padding: 40px;
            text-align: center;
        }

        #box2 {
            background: red;
            width: 50px;
            height: 50px;
            position: relative;
        }

    </style>
</head>

<body>
<header>
    <h1>jQuery Crash Course | Effects and Animation</h1>
</header>

<div id="container">
    <button id="btnFadeOut">Fade Out</button>
    <button id="btnFadeIn">Fade In</button>
    <button id="btnFadeTog">Fade Toggle</button>

    <hr>

    <button id="btnSlideUp">Fade Up</button>
    <button id="btnSlideDown">Slide Down</button>
    <button id="btnSlideTog">Slide Toggle</button>
    <button id="btnStop">Stop</button>
    <hr>
    <div id="box"><h1>Hello World</h1></div>

    <hr>

    <button id="btnMoveLeft">Move Left</button>
    <button id="btnMoveRight">Move Right</button>
    <button id="btnMoveAround">Slide Around</button>
    <div id="box2"></div>
</div>

<script>
    $(document).ready(function () {
        $('#btnFadeOut').click(function () {
            $('#box').fadeOut(3000, function () {
                $('#btnFadeOut').text("It's Gone")
            });
        });
        $('#btnFadeIn').click(function () {
            $('#box').fadeIn(3000, function () {
                $('#btnFadeOut').text('Fade Out');
            });
        });
        $('#btnFadeTog').click(function () {
            $('#box').fadeToggle(3000);
        });

        $('#btnSlideUp').click(function () {
            $('#box').slideUp(2000);
        });
        $('#btnSlideDown').click(function () {
            $('#box').slideDown(2000);
        });
        $('#btnSlideTog').click(function () {
            $('#box').slideToggle(2000);
        });
        $('#btnStop').click(function () {
            $('#box').stop();
        });
        $('#btnMoveRight').click(function () {
            $('#box2').animate({     // CSS属性值是逐渐改变的，这样就可以创建动画效果
                left: 200,
                height: '150px',
                width: '150px',
                opacity: '0.5'      // 不透明度
            })
        });
        $('#btnMoveLeft').click(function () {
            $('#box2').animate({
                left: 0,
                height: '100px',
                width: '100px',
                opacity: '1'
            });
        });

        $('#btnMoveAround').click(function () {
            var box = $('#box2');
            box.animate({
                left: 100
            });
            box.animate({
                top: 100
            });
            box.animate({
                left: 0,
                top: 100
            });
            box.animate({
                left: 0,
                top: 0
            });
        });
    });
</script>
</body>
</html>
点击查看更多Animation内容

5.Ajax

Ajax~点击查看完整代码
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 17px;
            font-family: Arial;
            background: #f4f4f4;
            line-height: 1.5em;
        }

        header {
            background: #333333;
            color: #fff;
            padding: 20px;
            text-align: center;
            border-bottom: 4px #000 solid;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        #container {
            width: 90%;
            margin: auto;
            padding: 10px;
        }

    </style>
</head>

<body>
<header id="header">
    <h1>jQuery Crash Course | Ajax</h1>
</header>
<div id="container">
    <div id="result"></div>
    <ul id="users"></ul>
    <h3>Add Post</h3>
    <form id="postFrom" action="https://jsonplaceholder.typicode.com/posts">
        <input type="text" id="title" placeholder="Title"><br>
        <textarea laceholder="Body" id="body"></textarea><br>
        <input type="submit" value="Submit">
    </form>
</div>
<script>
    $(document).ready(function () {
        /*$('#result').load('test.html',function (
            responseTxt, statusTxt, xhr) {
            if (statusTxt=='success'){
                alert('It went fine');
            }else if (statusTxt=='error'){
                alert('Error:'+xhr.statusText);
            }
        });

        $.get('test.html', function (data) {
            $('#result').html(data);
        });

        $.getJSON('users.json', function (data) {
            $.each(data, function (i,user) {          // i 表示下标 user 表示每个对象
                $('ul#users').append('<li>'+user.firstName+'</li>');
            })
        });

        $.ajax({
            method:'GET',
            url:'https://jsonplaceholder.typicode.com/posts',
            dataType:'json'
        }).done(function (data) {
            console.log(data);
            $.map(data, function (post, i) {
                $('#result').append('<h3>'+post.title+'</h3><p>'+post.body+'</p>');
            });
        })*/

        $('#postFrom').submit(function (e) {
            e.preventDefault();

            var title = $('#title').val();
            var body = $('#body').val();
            var url = $(this).attr('action');   // attr() 方法设置或返回被选元素的属性值。

            $.post(url, {title:title, body:body}).done(function (data) {   // 结合示例：https://www.runoob.com/try/try.php?filename=tryjquery_ajax_post2
                console.log('Post Saved');
                console.log(data);
            })
        });

    });
</script>
</body>
</html>
点击查看更多Ajax内容

视频教程地址

本文结束啦 感谢您阅读
路漫漫其修远兮 吾将上下而求索