开发者社区> 余二五> 正文

JQuery实例

简介:
+关注继续查看

前面学习了原生的DOM,现在看看如何使用JQuery。JQuery建议使用1.12的版本,这样对旧版本的IE兼容性比较好。


例1.添加,删除class

知识要点:

1. 通过<script src='jquery-1.12.4.js></script>调用jquery

2. 相对于Dom的document.getElementbyID('i1'), JQuery直接使用$('#i1');

类似的,查找类可以用$('.c1'),查找p标签 $('p'),查找form的元素 $(':text') ,还可以组合使用。具体的选择器可以参考https://www.w3schools.com/jquery/jquery_ref_selectors.asp

3. addclass(‘hide’)直接给找到的标签添加一个样式class,removeClass('hide')删除一个class,无需使用classlist了

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" value="hide" onclick="hides();"/>
    <div id="i1">
        <div class="item"></div>
        <div class="item">
            <div class="c1">123</div>
            <a>百度</a>
        </div>
        <div class="item"></div>
    </div>
    <div id="i2"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        flag=true;
        function hides() {
            if (flag==true){
                 $('#i1').addClass('hide');
                 console.log(flag)
                 flag=false;
            }else{
                 $('#i1').removeClass('hide');
                     console.log(flag)
                 flag=true;
            }
        }
    </script>
</body>
</html>

点击hide按钮切换隐藏效果


wKioL1iBkNfxsfPdAAAvIfwpYIw978.jpg


例2. 全选和反选

这个例子在前面的Dom里面出现过,现在看看JQuery如何实现


知识点:

1. 选择器可以组合使用 比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素

2. 对于checkbox的属性,通过prop()来实现,如果是自定义的其他的属性,通过attr()实现

3. each()可以实现循环,循环里面如果输出this,可以看见他是一个dom的格式,如果把他转换成jquery对象的格式(数组格式),可以通过$(this)实现,如果想把jquery转为dom的格式,那么直接取第一个数组的值就行了,例子里面实现了3种方式,dom,jquery以及三元运算符的格式

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll();" />
    <input type="button" value="反选" onclick="reverseAll();" />
    <input type="button" value="取消"  onclick="cancleAll();"/>
    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this,代指当前循环的每一个元素
                // Dom
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
                */
              // 三元运算var v = 条件? 真值:假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>




例3 隐藏菜单

知识点:

1. click的事件可以直接选择到标签之后执行,这个比在html里面使用onclick事件要好很多。

2. Jquery支持链式的编程,因此如下所示可以一行实现很多功能


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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>
 
        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
 
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
 
        })
    </script>
</body>
</html>



例4.  复制,删除文本框

clone()克隆标签

find()查找标签

attr()添加一个事件

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this);"> + </a>
            <input type="text" />
        </p>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function Add(ths){
            var p = $(ths).parent().clone();
            p.find('a').text(' - ');
            p.find('a').attr('onclick', 'Remove(this);');
            $(ths).parent().parent().append(p);
        }
        function Remove(ths){
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

效果:点击+自动复制一行,点击-删除自己所在


wKiom1iBmSChF11VAAAz9XaAPak887.jpg


例5. 绑定事件-例2的升级版

例2里面我们需要给每个标签都手动的添加onclick事件,如果可以统一绑定事件,会省事很多。有两种方式,如下所示;


$(function){

    ....

 }里面执行的...会在文档树加载之后自动执行,不会等待所有的图片内容的加载


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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" >菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
//方法一
//        $(function(){
//            // 当文档树加载完毕后,自动执行
//            $('.item .title').click(function(){
//                // this,$(this)
//                $(this).next().removeClass('hide');
//                $(this).parent().siblings().find('.body').addClass('hide');
//            });
//        });
         
         
//方法二        
        $('.item .title').bind('focus', function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.body').addClass('hide');
        })
         
    </script>
</body>
</html>



例6  事件的延迟绑定

比如通过javascript创建的新标签,如何让他自动绑定事件?可以通过delegate实现

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="Add();" />
    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /*
            $('li').click(function () {
                alert($(this).text());
            });
            */
            $("ul").delegate("li","click",function(){
                alert($(this).text());
            });
        });
        function Add(){
            var tag = document.createElement('li');
            tag.innerText = '666';
            $('ul').append(tag);
        }
    </script>
</body>
</html>

wKiom1iBnjai7SkjAABq2g43m9Y056.jpg




例7 模态对话框 (高级版)

之前用DOM实现过模态对话框,现在用JQuery实现同样的功能。

知识要点:


1.模态对话框的HTML和CSS布局,3层,最上层居中,中间一个阴影层,最下面是主界面,上面两层默认隐藏,通过z-index区分上下顺序

2. 可以通过attr()方法来获取和设置自定义的属性;如果是checkbox或者radio,那么通过prop()方法来获取和设定属性

3.通过属性来定位元素,比如 $("[editable='false']")则可以获取editable属性为false的那个标签元素

4. 文本编辑,对于InnerText的值是通过text()实现,对于input的表单内容则是通过val()实现

5. 添加class,删除class通过addClass()和removeClass()实现

6. delegate 延迟绑定的实现,一般用于未来的新的标签,比如通过脚本创建的标签

7. 动态的创建标签,可以直接插入html字符串或者通过CreateElement()实现

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
 
        .item{
            position: relative;
            width: 100px;
            margin-top: 20px;
            margin-left: 30px;
 
        }
        .label{
            width: 40px;
            color: chocolate;
        }
        .content{
            width:100px;
            position: absolute;
            right:-80px;
 
        }
        .buttons{
            margin-top: 20px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
 
    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit" >编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td editable="true">
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
 
        </tr>
    </table>
 
    <div class="modal hide">
        <div >
            <div class="item">
                <label class="label">主机名</label>
                <input class="content" name="hostname" type="text"  />
            </div>
            <div class="item">
                <label class="label">端口</label>
                <input class="content" name="port" type="text" />
            </div>
            <div class="item">
                <label class="label">IP地址</label>
                <input class="content" name="ip" type="text" />
            </div>
 
        </div>
 
        <div class="buttons">
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="添加" onclick="addModal();" />
            <input type="button" value="修改" onclick="updateModal();" />
        </div>
    </div>
 
    <div class="shadow hide"></div>
 
    <script src="jquery-1.12.4.js"></script>
    <script>
 
        $("#tb").delegate('.del',"click",function () {
            $(this).parent().parent().remove();
        })
 
        function  addModal() {
 
            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = $(".modal input[name='hostname']").val();
            var att1=document.createAttribute('target');
            att1.value='hostname';
            td1.setAttributeNode(att1);
 
            var td2 = document.createElement('td');
            td2.innerHTML = $(".modal input[name='port']").val();
              var att2=document.createAttribute('target');
              att2.value='port';
            td2.setAttributeNode(att2);
              
            var td3 = document.createElement('td');
            td3.innerHTML = $(".modal input[name='ip']").val();;
              var att3=document.createAttribute('target');
              att3.value='ip';
            td3.setAttributeNode(att3);
             
            var td4 = document.createElement('td');
            td4.innerHTML = " <a class='edit'>编辑</a> | <a class='del'>删除</a>"
 
            $(tr).append(td1);
            $(tr).append(td2);
            $(tr).append(td3);
            $(tr).append(td4);
             
 
            $('#tb').append(tr);
 
            $(".modal,.shadow").addClass('hide');
 
        }
 
        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }
        function updateModal(){
            var host=$(".modal input[name='hostname']").val()
            var port=$(".modal input[name='port']").val()
            var ip=$(".modal input[name='ip']").val()
            var tds=$("[editable='false']").prevAll()
            console.log(tds)
            tds.each(
                function () {
                    console.log($(this).attr('target'))
                    if($(this).attr('target')=='ip'){
                        $(this).text(ip);
                        console.log('update ip')
                    }
                    else if($(this).attr('target')=='port'){
 
                        $(this).text(port);
                    console.log('update port')
                    }
                    else if($(this).attr('target')=='hostname'){
 
                        $(this).text(host)
                        console.log('update host')
                    }
 
                }
            )
 
 
                 $(".modal,.shadow").addClass('hide');
 
 
            $("[editable='false']").attr('editable','true')
        }
 
 
 
        $("#tb").delegate(".edit","click",function() {
            $(".modal,.shadow").removeClass('hide');
            // this
            $(this).parent().attr('editable', 'false')
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            })
        })
 
 
    </script>
</body>
</html>

wKiom1k3i4OQuYs5AACP8qBkSCw191.jpg


例8 TAB效果


知识点:

1.AddClass和RemoveClass的使用

2.小技巧,通过自定义的属性值进行匹配,定位标签的时候因为格式为[attr=‘value’]的格式,因此做了一个字符串的拼接

3.注释掉的代码是另外一种方法,可以通过索引来进行匹配

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            var target = $(this).attr('a');
           # $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
            $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');
        });
    </script>
</body>
</html>


wKiom1k3k2bBN0gsAAA49erXQgM859.jpg


例9 点赞


知识点:

1. Jquery里面通过css()来改变一个标签的style

2. 思路和Dom一样的,动态创建一个span标签,通过定时器改变大小和位置,当透明度低于一定程度,结束定时器

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this);
        });
        function AddFavor(self) {
            // DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;
            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('right',right + "px");
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);
            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;
                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            }, 40);
        }
    </script>
</body>
</html>


例10 鼠标移动窗口

下面这个例子可以通过鼠标拖曳窗口


知识点:


1. offset()显示的是当前标签在整个html里面的坐标,还有一个position()显示的是在absolute在relative标签里面的位置


2. event=e || windows.event 是为了兼容旧版的IE来获取当前的事件, _event.clientX和_event.clientY这里获取的是鼠标的坐标


3. 绑定事件有几种方式,比如直接通过标签执行  $(''#title).mousover(function(){}); 或者通过on绑定,off接触绑定,例如$(''#title).on('mousemove',function(){}), $(''#title).off('mousemove'); 或者可以通bind和unbind绑定和接触绑定,比如例5;最后还可以通过delegate()来延迟绑定,比如例6 


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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>