大小孩

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

本节内容

  1. jQuery

一、jQuery

jQuery是对DOM的封装
  1 jQuery
  2     
  3     中文在线文档:http://jquery.cuishifeng.cn/
  4     
  5     模块(Python) <--> 类库(其他语言中)
  6     jQuery:集合DOM/BOM/JavaScript的类库
  7     
  8     版本:
  9         1.x  1.12   推荐(可以兼容旧版本浏览器)
 10         2.x
 11         3.x
 12     
 13     转换:
 14         jQuery对象[0]   ->   Dom对象
 15         Dom对象         ->   $(Dom对象) = jQuery对象
 16     
 17     
 18     一、查找元素
 19         a、DOM
 20             10左右
 21         b、jQuery:
 22             选择器,直接找到某个或者某类标签(跟CSS类似)
 23             1. id
 24                 $('#id')        //id为id的标签
 25                 
 26             2. class
 27                 <div class='c1'></div>
 28                 $(".c1")        //所有class为c1的标签
 29                 
 30             3. 标签
 31                 <div id='i10' class='c1'>
 32                     <a>f</a>
 33                     <a>f</a>
 34                 </div>
 35                 <div class='c1'>
 36                     <a>f</a>
 37                 </div>
 38                 <div class='c1'>
 39                     <div class='c2'> </div>
 40                 </div>
 41                 
 42                 $('a')        //所有的a标签
 43                 
 44             4. 组合(一次查询多个,用逗号分隔)
 45                 <div id='i10' class='c1'>
 46                     <a>f</a>
 47                     <a>f</a>
 48                 </div>
 49                 <div class='c1'>
 50                     <a>f</a>
 51                 </div>
 52                 <div class='c1'>
 53                     <div class='c2'> </div>
 54                 </div>
 55                 
 56                 $('a')
 57                 $('.c2')
 58                 
 59                 $('a,.c2,#i10')
 60                 
 61             5. 层级(层层过滤)
 62                 $('#i10 a') 子子孙孙
 63                 $('#i10>a') 只找儿子
 64                 
 65             6. 基本
 66                 :first
 67                 :last
 68                 :eq()
 69                 
 70             7. 属性
 71                 $('[alex]')       具有alex属性的所有标签
 72                 $('[alex="123"]') alex属性等于123的标签
 73                 
 74                 --------------------
 75                 代码:
 76                 <input type='text'/>
 77                 <input type='text'/>
 78                 <input type='file'/>
 79                 <input type='password'/>
 80                 
 81                 通过属性选择器查找:
 82                 $("input[type='text']")
 83                 通过表单选择器查找:
 84                 $(':text')
 85             
 86             8. 实例:    
 87                 多选,反选,全选
 88                 - 选择权
 89                 - 
 90                     $('#tb:checkbox').prop('checked');        获取值
 91                     $('#tb:checkbox').prop('checked', true);  设置值
 92                 - 
 93                     jQuery方法内置循环,批量操作简单的这样做即可: $('#tb:checkbox').xxxx
 94                     
 95                 -   $('#tb:checkbox').each(function(k){
 96                         // k当前索引
 97                         // this代指DOM对象,$(this)代指jQuery对象,都是指当前循环的元素 
 98                         
 99                     })
100                 
101                 -   三元运算:var v = 条件? 条件为真时值:条件为假时值
102                     var v = $(this).prop('checked')?false:true;
103                 
104                 
105             9. 筛选器
106                 
107                 通过选择器定位到标签后,需要通过筛选器定位其关联标签                        --------------
108                 <div>
109                     <a>asdf</a>
110                     <a>asdf</a>
111                     <a id='i1'>asdf</a>
112                     <a>asdf</a>
113                     <a id='ii1'>asdf</a>
114                     <a>asdf</a>
115                 </div>
116                 ---------------
117                 $('#i1').next()
118                 $('#i1').nextAll()
119                 $('#i1').nextUntil('#ii1')
120                 
121                 $('#i1').prev()
122                 $('#i1').prevAll()
123                 $('#i1').prevUntil('#ii1')                
124                 
125                 $('#i1').parent()
126                 $('#i1').parents()
127                 $('#i1').parentsUntil()
128                 
129                 $('#i1').children()
130                 $('#i1').siblings()
131                 $('#i1').find()
132                 $('li:eq(1)')
133                 $('li').eq(1)
134                 first()
135                 last()
136                 hasClass(class)
137 
138     二、操作
139     
140         a、文本操作:
141             $(..).text()           # 不加内容获取文本
142             $(..).text(“<a>1</a>”) # 加内容设置文本
143             
144             $(..).html()            # 不加内容获取内容
145             $(..).html("<a>1</a>")
146             
147             $(..).val()            #获取值,相当于DOM的value
148             $(..).val(..)
149             
150         b、样式操作:
151             addClass()        #给对象增加类
152             removeClass()        #给对象减少类
153             toggleClass()        #开关,点击切换增加、减少类
154                 
155         c、属性操作:
156             # 专门用于做自定义属性
157             $(..).attr('n')        #获取属性n的值
158             $(..).attr('n','v')        #设置属性n的值
159             $(..).removeAttr('n')    #移除属性n
160             
161             //示例
162             <input type='checkbox' id='i1'  />
163             
164             
165             # 专门用于chekbox,radio等选中操作(.attr在jQury的1.x和2.x中不好用)
166             $(..).prop('checked')
167             $(..).prop('checked', true)
168             
169             PS: 
170                 $(..).index() 获取索引位置
171                     
172         d、文档处理:
173             append        向匹配元素内部追加内容在最后(孩子标签)
174             prepend        向匹配元素内部追加内容在最前(孩子标签)
175             after        向匹配元素后追加(兄弟标签)
176             before
177             
178             remove        删除标签及内容
179             empty        仅清空标签内容
180             
181             clone        克隆
182             
183         e、css处理
184             
185             $('t1').css('样式名称', '样式值')    //更细的处理对象的样式
186             点赞:
187                  - $('t1').append()
188                  - $('t1').remove()
189                  - 定时器setInterval
190                  - 透明度 opacity 1 -> 0
191                  - 位置变化position
192                  - 字体大小,位置
193                  
194         f、位置:
195             $(window).scrollTop()  获取windows窗口滚动了多少
196             $(window).scrollTop(0) 设置
197             scrollLeft([val])
198             
199             $('i1').offset()              指定标签在html中的坐标    
200             $('i1').offset().left         指定标签在html中左边的坐标
201             $('i1').offset().top          指定标签在html中顶部的坐标
202             
203             position()                       指定标签相对父标签(relative)标签的坐标
204             ---------------
205             <div style='relative'>
206                 <div>
207                     <div id='i1' style='position:absolute;height:80px;border:1px'></div>
208                 </div>
209             </div>
210             ---------------
211             
212             $('i1').height()           # 获取标签的高度(纯高度)
213             $('i1').innerHeight()      # 获取标签的高度(纯高度+内边距)
214             $('i1').outerHeight()      # 获取标签的高度(纯高度+内边距+边框)
215             $('i1').outerHeight(true)  # 获取标签的高度(纯高度+内边距+边框+外边距
216             
217             # 纯高度,边框,外边距,内边距
218             
219     三、事件
220         1、绑定方式
221             DOM: 三种绑定方式
222             jQuery:
223                 $('.c1').click()
224                 $('.c1').....
225                 ---------
226                 $('.c1').bind('click',function(){
227                     
228                 })
229                 
230                 $('.c1').unbind('click',function(){
231                     
232                 })
233                 
234                 *******************
235                 //委托,只有事件发生时才绑定
236                 //函数解释之后添加的标签,也可以被绑定
237                 $('.c').delegate('a', 'click', function(){
238                 
239                 })
240                 $('.c').undelegate('a', 'click', function(){
241                 
242                 })
243                 
244                 *******************
245                 $('.c1').on('click', function(){
246                 
247                 })
248                 $('.c1').off('click', function(){
249                 
250                 })
251                 
252         2、阻止事件发生
253             return false
254             
255         3、函数外边加$(),当页面框架加载完毕后,函数自动执行(提前绑定事件时机)
256             $(function(){
257                 
258                 $(...)
259                 
260             })
261                 
262     四、jQuery扩展:
263         1、jquery扩展,两种方式调用方式不一样
264             - $.extend        $.方法
265             - $.fn.extend     $(..).方法
266         2、引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
267             (function(){
268                 var status = 1;
269                 // 封装变量
270             })(jQuery)
271             
272                 
273     
274 ===》实例:
275 
276 作业:
277     一:
278             $('i1').height()           # 获取标签的高度(纯高度)
279             $('i1').innerHeight()      # 获取标签的高度(纯高度+内边距)
280             $('i1').outerHeight()      # 获取标签的高度(纯高度+内边距+边框)
281             $('i1').outerHeight(true)  # 获取标签的高度(纯高度+内边距+边框+外边距
282             
283             # 纯高度,边框,外边距,内边距
284             
285     二、所有示例敲一遍
286     
287     三、编辑框
288             
jQuery笔记

1、引入jQuery

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="csswenjian" />
 7     <style>
 8 
 9     </style>
10 
11 </head>
12 <body>
13     <input type="text" />
14     <input type="text" disabled />
15     <input type="text" />
16 
17     <div id='i10' class='c1'>
18         <div>
19             <a>asd</a>
20         </div>
21         <a alex='123'>f2</a>
22         <a alex='456'>f2</a>
23         <a>f3</a>
24         <a>f4</a>
25     </div>
26 
27     <div class='c1'>
28         <a>f</a>
29     </div>
30     <div class='c1'>
31         <div class='c2'> </div>
32     </div>
33 
34     <!--引入jQuery,1.x版本兼容的旧版本浏览器更多-->
35     <script src="jquery-1.12.4.js"></script>
36     <script>
37         //调用jQuery(jQuery. 或 $.)
38         //找到标签 -> $("#i1")
39         $("#i1")
40     </script>
41 </body>
42 </html>
View Code

2、示例之多选、取消、反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--示例多选、取消、反选 - 选择器、三元运算-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <input type="button" value="全选" onclick="checkAll();" />
10     <input type="button" value="反选" onclick="reverseAll();" />
11     <input type="button" value="取消"  onclick="cancleAll();"/>
12 
13     <table border="1">
14         <thead>
15             <tr>
16                 <th>选项</th>
17                 <th>IP</th>
18                 <th>PORT</th>
19             </tr>
20         </thead>
21         <tbody id="tb">
22 
23             <tr>
24                 <td><input type="checkbox" /></td>
25                 <td>1.1.1.1</td>
26                 <td>80</td>
27             </tr>
28             <tr>
29                 <td><input type="checkbox" /></td>
30                 <td>1.1.1.1</td>
31                 <td>80</td>
32             </tr>
33             <tr>
34                 <td><input type="checkbox" /></td>
35                 <td>1.1.1.1</td>
36                 <td>80</td>
37             </tr>
38         </tbody>
39     </table>
40 
41     <script src="jquery-1.12.4.js"></script>
42     <script>
43         //查到的结果->jQury会自动循环,DOM需要手动循环
44         function checkAll() {
45             $('#tb :checkbox').prop('checked',true);
46         }
47         function cancleAll() {
48             $('#tb :checkbox').prop('checked',false);
49         }
50         function reverseAll() {
51             //.each是jQuery中的循环
52             $(':checkbox').each(function(k){
53                 // k是索引值,this代指当前循环的每一个元素(DOM对象)
54                 /*
55                 if(this.checked){
56                     this.checked = false;
57                 }else{
58                     this.checked = true;
59                 }
60                 */
61 
62                 //*****************************************
63                 // $(this)代指当前循环的每一个元素(jQuery对象)
64                 /*
65                 if($(this).prop('checked')){
66                     $(this).prop('checked', false);
67                 }else{
68                     $(this).prop('checked', true);
69                 }
70                 */
71 
72                 //*****************************************
73                 // 三元运算:var v = 条件? 条件为真时值:条件为假时值
74                 var v = $(this).prop('checked')?false:true;
75                 $(this).prop('checked',v);
76             })
77         }
78     </script>
79 </body>
80 </html>
选择器、三元运算

3、示例之左侧菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--左侧菜单示例 - 选项器、筛选器-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .header{
 9             background-color: black;
10             color: wheat;
11         }
12         .content{
13             min-height: 50px;
14         }
15         .hide{
16             display: none;
17         }
18     </style>
19 </head>
20 <body>
21     <div style=" height:400px;width: 200px;border: 1px solid #dddddd">
22         <div class="item">
23             <div class="header">标题一</div>
24             <div id="i1" class="content hide">内容</div>
25         </div>
26         <div class="item">
27             <div class="header">标题二</div>
28             <div class="content hide">内容</div>
29         </div>
30 
31         <div class="item">
32             <div class="header">标题三</div>
33             <div class="content hide">内容</div>
34         </div>
35     </div>
36     <script src="jquery-1.12.4.js"></script>
37     <script>
38         $('.header').click(function(){
39             // 当前点击的标签 $(this)
40             // 获取某个标签的下一个标签
41             // 获取某个标签的父标签
42             // 获取所有的兄弟标签
43             // 添加样式和移除样式
44                 // $('.i1').addClass('hide')
45                 // $('#i1').removeClass('hide')
46 
47             //通过层级选择器筛选过于麻烦
48             // $("label + input");
49             // var v = $("this + div"); 这样写this就无效了
50             // console.log(v);
51 
52             // 筛选器:结构-> 选择器.筛选方法()
53             /*
54             $(this).next()      当前对象下一个
55             $(this).prev()      上一个
56             $(this).parent()    父
57             $(this).children()  孩子
58             $('#i1').siblings() 兄弟
59             $('#i1').find('#i1') 子子孙孙中查找
60             //
61             $('#i1').addClass('hide')
62             $('#i1').removeClass('hide')
63             */
64 
65             // 链式编程
66             // $(...).click(function(){
67             //     this..
68             // })
69 
70             //$(this).next().removeClass('hide');
71             //$(this).parent().siblings().find('.content').addClass('hide')
72 
73             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
74 
75         })
76     </script>
77 </body>
78 </html>
选择器、筛选器

4、示例之模态编程框

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <!--示例:模态编程框 - 循环、属性操作-->
  4 <!--添加、编辑、删除、取消、确定-->
  5 <head>
  6     <meta charset="UTF-8">
  7     <title>Title</title>
  8     <style>
  9         .hide{
 10             display: none;
 11         }
 12         .modal{
 13             position: fixed;
 14             top: 50%;
 15             left: 50%;
 16             width: 500px;
 17             height: 400px;
 18             margin-left: -250px;
 19             margin-top: -250px;
 20             background-color: #eeeeee;
 21             z-index: 10;
 22         }
 23         .shadow{
 24             position: fixed;
 25             top: 0;
 26             left: 0;
 27             right: 0;
 28             bottom: 0;
 29             opacity: 0.6;
 30             background-color: black;
 31             z-index: 9;
 32         }
 33     </style>
 34 </head>
 35 <body>
 36     <a onclick="addElement();">添加</a>
 37 
 38     <table border="1" id="tb">
 39         <tr>
 40             <td target="hostname">1.1.1.11</td>
 41             <td target="port">80</td>
 42             <td target="ip">80</td>
 43             <td>
 44                 <a class="edit">编辑</a> | <a class="del">删除</a>
 45             </td>
 46         </tr>
 47         <tr>
 48             <td target="hostname">1.1.1.12</td>
 49             <td target="port">80</td>
 50             <td target="ip">80</td>
 51             <td>
 52                 <a class="edit">编辑</a> | <a class="del">删除</a>
 53             </td>
 54         </tr>
 55         <tr>
 56             <td target="hostname">1.1.1.13</td>
 57             <td target="port">80</td>
 58             <td target="ip">80</td>
 59             <td>
 60                 <a class="edit">编辑</a> | <a class="del">删除</a>
 61             </td>
 62         </tr>
 63         <tr>
 64             <td target="hostname">1.1.1.14</td>
 65             <td target="port">80</td>
 66             <td target="ip">80</td>
 67             <td>
 68                 <a class="edit">编辑</a> | <a class="del">删除</a>
 69             </td>
 70 
 71         </tr>
 72     </table>
 73 
 74     <div class="modal hide">
 75         <div>
 76             <input name="hostname" type="text"  />
 77             <input name="port" type="text" />
 78             <input name="ip" type="text" />
 79         </div>
 80 
 81         <div>
 82             <input type="button" value="取消" onclick="cancelModal();" />
 83             <input type="button" value="确定" onclick="confirmModal();" />
 84         </div>
 85     </div>
 86 
 87     <div class="shadow hide"></div>
 88 
 89     <script src="jquery-1.12.4.js"></script>
 90     <script>
 91         //删除
 92         $('.del').click(function () {
 93             $(this).parent().parent().remove();
 94         });
 95 
 96         //确定
 97         function  confirmModal() {
 98             var tr = document.createElement('tr');
 99             var td1 = document.createElement('td');
100             td1.innerHTML = "11.11.11.11";
101             var td2 = document.createElement('td');
102             td2.innerHTML = "8001";
103 
104             $(tr).append(td1);
105             $(tr).append(td2);
106 
107             $('#tb').append(tr);
108 
109             $(".modal,.shadow").addClass('hide');
110 
111             //$('.modal input[type="text"]').each(function () {
112                     // var temp = "<td>..."
113                     //
114             //})
115         }
116 
117         //添加
118         function  addElement() {
119             $(".modal,.shadow").removeClass('hide');
120         }
121 
122         //取消
123         function cancelModal() {
124             $(".modal,.shadow").addClass('hide');
125             $('.modal input[type="text"]').val("");
126         }
127 
128         //编辑,弹出修改模态框
129         //类edit绑定鼠标点击事件(点击编辑弹出编辑框)
130         // 1.循环获取tds中内容
131         // 2.获取 <td>内容</td> 获取中间的内容
132         // 3.赋值给input标签中的value
133         $('.edit').click(function(){
134             //弹出模态框
135             $(".modal,.shadow").removeClass('hide');
136             // this,获取所有标签
137             var tds = $(this).parent().prevAll();
138             //循环标签.each,获取值赋给input
139             tds.each(function () {
140                 // 获取td的target属性值
141                 var n = $(this).attr('target');
142                 // 获取td中的内容,拼接成选择器字符串,用来选择input框
143                 var text = $(this).text();
144                 var a1 = '.modal input[name="';
145                 var a2 = '"]';
146                 var temp = a1 + n + a2;      //选择器条件 --> .modal input[name="hostname"]
147                 $(temp).val(text);
148 
149                 //var port = $(tds[0]).text();
150                 //var host = $(tds[1]).text();
151                 //
152                 //$('.modal input[name="hostname"]').val(host);
153                 //$('.modal input[name="port"]').val(port);
154             });
155         });
156     </script>
157 </body>
158 </html>
循环、属性操作(添加、编辑、删除、取消、确定)

5、jQuery样式操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--样式操作-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10         }
11     </style>
12 </head>
13 <body>
14     <input type='checkbox' id='i2'  />
15 
16     <input id="i1" type="button" value="开关" />
17     <div class="c1 hide">asdfasdf</div>
18 
19     <script src="jquery-1.12.4.js"></script>
20     <script>
21         $('#i1').click(function(){
22             //if($('.c1').hasClass('hide')){
23             //      $('.c1').removeClass('hide');
24             //}else{
25             //      $('.c1').addClass('hide');
26             // }
27 
28             //上下效果等同
29 
30             $('.c1').toggleClass('hide');
31         })
32     </script>
33 </body>
34 </html>
View Code

6、示例之TAB切换菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--TAB切换菜单,自定义属性方式-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10         }
11         .menu{
12             height: 38px;
13             background-color: #eeeeee;
14             line-height: 38px;
15         }
16         .active{
17             background-color: brown;
18         }
19         .menu .menu-item{
20             float: left;
21             border-right: 1px solid red;
22             padding: 0 5px;
23             /*点击时鼠标变成小手*/
24             cursor: pointer;
25         }
26         .content{
27             min-height: 100px;
28             border: 1px solid #eeeeee;
29         }
30     </style>
31 </head>
32 <body>
33 
34     <div style="width: 700px;margin:0 auto">
35 
36         <div class="menu">
37             <!--自定义属性a,与b相对应-->
38             <div  class="menu-item active" a="1">菜单一</div>
39             <div  class="menu-item" a="2">菜单二</div>
40             <div  class="menu-item" a="3">菜单三</div>
41         </div>
42         <div class="content">
43             <div b="1">内容一</div>
44             <div class="hide"  b="2">内容二</div>
45             <div class="hide" b="3">内容三</div>
46 
47         </div>
48 
49     </div>
50     <script src="jquery-1.12.4.js"></script>
51     <script>
52         $('.menu-item').click(function(){
53             $(this).addClass('active').siblings().removeClass('active');
54             var target = $(this).attr('a');
55             //字符串拼接 "[b='"  +   target  +   "']"
56             $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');
57         });
58     </script>
59 </body>
60 </html>
TAB切换菜单,自定义属性方式
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--TAB切换菜单,索引方式方式-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10         }
11         .menu{
12             height: 38px;
13             background-color: #eeeeee;
14             line-height: 38px;
15         }
16         .active{
17             background-color: brown;
18         }
19         .menu .menu-item{
20             float: left;
21             border-right: 1px solid red;
22             padding: 0 5px;
23             cursor: pointer;
24         }
25         .content{
26             min-height: 100px;
27             border: 1px solid #eeeeee;
28         }
29     </style>
30 </head>
31 <body>
32 
33     <div style="width: 700px;margin:0 auto">
34 
35         <div class="menu">
36             <div  class="menu-item active" >菜单一</div>
37             <div  class="menu-item" >菜单二</div>
38             <div  class="menu-item" >菜单三</div>
39         </div>
40         <div class="content">
41             <div >内容一</div>
42             <div class="hide" >内容二</div>
43             <div class="hide">内容三</div>
44 
45         </div>
46 
47     </div>
48     <script src="jquery-1.12.4.js"></script>
49     <script>
50         $('.menu-item').click(function(){
51             $(this).addClass('active').siblings().removeClass('active');
52             //$('.content').children().eq(),找到与菜单索引值相同的内容
53             //$(this).index()对象的索引值
54             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
55 
56         });
57     </script>
58 </body>
59 </html>
TAB切换菜单,索引方式方式

7、jQuery文档处理

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--文档处理-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <input id="t1" type="text" />
10     <input id="a1" type="button" value="添加" />
11     <input id="a2" type="button" value="删除" />
12     <input id="a3" type="button" value="复制" />
13 
14     <ul id="u1">
15 
16         <li>1</li>
17         <li>2</li>
18 
19     </ul>
20     <script src="jquery-1.12.4.js"></script>
21     <script>
22         //添加
23         $('#a1').click(function () {
24             var v = $('#t1').val();
25 
26             var temp = "<li>" + v + "</li>";
27             //append向匹配元素内部追加内容在最后(孩子标签)
28             // $('#u1').append(temp);
29             //prepend向匹配元素内部追加内容在最前(孩子标签)
30             $('#u1').prepend(temp);
31             //after向匹配元素后追加(兄弟标签)
32             // $('#u1').after(temp)
33             // $('#u1').before(temp)
34         });
35 
36         //删除
37         $('#a2').click(function () {
38             var index = $('#t1').val();
39             //删除标签及内容
40             //$('#u1 li').eq(index).remove();
41             //清除内容
42             //$('#u1 li').eq(index).empty();
43         });
44 
45         //复制
46         $('#a3').click(function () {
47             var index = $('#t1').val();
48             var v = $('#u1 li').eq(index).clone();
49             $('#u1').append(v);
50         })
51     </script>
52 </body>
53 </html>
View Code

8、示例之点赞特效

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--点赞以及jQuery的css操作-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .container{
 9             padding: 50px;
10             border: 1px solid #dddddd;
11         }
12         .item{
13             position: relative;
14             width: 30px;
15         }
16     </style>
17 </head>
18 <body>
19     <div class="container">
20         <div class="item">
21             <span></span>
22         </div>
23     </div>
24     <div class="container">
25         <div class="item">
26             <span></span>
27         </div>
28     </div>
29     <div class="container">
30         <div class="item">
31             <span></span>
32         </div>
33     </div>
34     <div class="container">
35         <div class="item">
36             <span></span>
37         </div>
38     </div>
39 
40     <script src="jquery-1.12.4.js"></script>
41     <script>
42         $('.item').click(function () {
43             AddFavor(this);
44         });
45 
46         function AddFavor(self) {
47             // DOM对象
48             var fontSize = 15;
49             var top = 0;
50             var right = 0;
51             var opacity = 1;
52             //tag是DOM对象,转换成jQuery对象$(tag)
53             //创建标签
54             var tag = document.createElement('span');
55             //设置标签样式
56             $(tag).text('+1');
57             $(tag).css('color','green');
58             $(tag).css('position','absolute');
59             $(tag).css('fontSize',fontSize + "px");
60             $(tag).css('right',right + "px");
61             $(tag).css('top',top + 'px');
62             $(tag).css('opacity',opacity);
63             //在.item的标签内添加标签对象tag
64             $(self).append(tag);
65             //定时改变标签样式和位置
66             var obj = setInterval(function () {
67                 fontSize = fontSize + 10;
68                 top = top - 10;
69                 right = right - 10;
70                 opacity = opacity - 0.1;
71 
72                 $(tag).css('fontSize',fontSize + "px");
73                 $(tag).css('right',right + "px");
74                 $(tag).css('top',top + 'px');
75                 $(tag).css('opacity',opacity);
76                 //标签看不到后删除定时器和标签
77                 if(opacity < 0){
78                     clearInterval(obj);
79                     $(tag).remove();
80                 }
81             }, 40);
82 
83         }
84     </script>
85 
86 </body>
87 </html>
点赞以及jQuery的css操作

9、示例之可拖动标签

 1 <!DOCTYPE html>
 2 <html>
 3 <!--可拖动标签,jQuery标签位置操作-->
 4 <head lang="en">
 5     <meta charset="UTF-8">
 6     <title></title>
 7 </head>
 8 <body>
 9     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
10         <div id="title" style="background-color: black;height: 40px;"></div>
11         <div style="height: 300px;"></div>
12     </div>
13 <script type="text/javascript" src="jquery-1.12.4.js"></script>
14 <script>
15     $(function(){
16         $('#title').mouseover(function(){
17             $(this).css('cursor','move');
18         });
19         $("#title").mousedown(function(e){
20             //console.log($(this).offset());
21             var _event = e || window.event;
22             var ord_x = _event.clientX;
23             var ord_y = _event.clientY;
24 
25             var parent_left = $(this).parent().offset().left;
26             var parent_top = $(this).parent().offset().top;
27 
28             $('#title').on('mousemove', function(e){
29                 var _new_event = e || window.event;
30                 var new_x = _new_event.clientX;
31                 var new_y = _new_event.clientY;
32 
33                 var x = parent_left + (new_x - ord_x);
34                 var y = parent_top + (new_y - ord_y);
35 
36                 $(this).parent().css('left',x+'px');
37                 $(this).parent().css('top',y+'px');
38 
39             })
40         });
41         $("#title").mouseup(function(){
42             $("#title").off('mousemove');
43         });
44     })
45 </script>
46 </body>
47 </html>
可拖动标签,jQuery标签位置操作

10、jQuery绑定的三种方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--jQuery绑定的三种方式-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <input id="t1" type="text" />
10     <input id="a1" type="button" value="添加" />
11 
12     <ul id="u1">
13         <li>1</li>
14         <li>2</li>
15     </ul>
16 <script src="jquery-1.12.4.js"></script>
17     <script>
18         $('#a1').click(function () {
19             var v = $('#t1').val();
20             var temp = "<li>" + v + "</li>";
21             $('#u1').append(temp);
22         });
23         //方式一,函数解释之后添加的标签不能绑定事件
24 //        $('ul li').click(function () {
25 //            var v = $(this).text();
26 //            alert(v);
27 //        })
28 
29 //        $('ul li').bind('click',function () {
30 //            var v = $(this).text();
31 //            alert(v);
32 //        })
33         //方式二,函数解释之后添加的标签不能绑定事件(可以构造出来)
34 //        $('ul li').on('click', function () {
35 //            var v = $(this).text();
36 //            alert(v);
37 //        })
38         //方式三,委托,事件发生时才绑定
39         $('ul').delegate('li','click',function () {
40             var v = $(this).text();
41             alert(v);
42         })
43 
44     </script>
45 </body>
46 </html>
View Code

11、阻止事件发生

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--阻止、允许事件发生-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9     <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>
10 
11     <a id="i1" href="http://www.oldboyedu.com">走你2</a>
12     <script src="jquery-1.12.4.js"></script>
13     <script>
14         //标签事件绑定的函数先执行,在函数中输入return false;标签后边的操作终止
15         //DOM中标签也要写onclick="return ClickOn()"
16         function ClickOn() {
17             alert(123);
18             return true;
19         }
20         //jQuery只在函数中输入return false;就可以了
21         $('#i1').click(function () {
22             alert(456);
23             return false;
24         })
25     </script>
26 </body>
27 </html>
DOM和jQuery写法上的不同
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--表单验证,根据提交的内容阻止或允许事件发生-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .error{
 9             color: red;
10         }
11     </style>
12 </head>
13 <body>
14 
15     <form id="f1" action="s5.html" method="POST">
16         <div><input name="n1" tex = "用户名" type="text" /></div>
17         <div><input name="n2" tex = "密码" type="password" /></div>
18         <div><input name="n3" tex = "邮箱" type="text" /></div>
19         <div><input name="n4" tex = "端口" type="text" /></div>
20         <div><input name="n5" tex = "IP" type="text" /></div>
21 
22         <input type="submit" value="提交" />
23         <img src="...">
24     </form>
25     <script src="jquery-1.12.4.js"></script>
26     <script>
27         // 函数外边加$(),当页面框架加载完毕后,函数自动执行
28         // 提前绑定事件时机
29         // $.Login('#f1'),jQuery已经写好的方法,同下面一大堆代码
30         $(function(){
31             $.Login('#f1')
32         });
33 
34         $(function(){
35             // 当页面所有元素完全加载完毕后,执行
36             $(':submit').click(function () {
37                 //执行表单验证之前,先清空所有的.error标签
38                 $('.error').remove();
39                 var flag = true;
40                 $('#f1').find('input[type="text"],input[type="password"]').each(function () {
41                     var v = $(this).val();
42                     var n = $(this).attr('tex');
43                     //如果没有输入内容
44                     if(v.length <= 0){
45                         flag = false;
46                         //创建提示标签
47                         var tag = document.createElement('span');
48                         tag.className = "error";
49                         tag.innerHTML = n + "必填";
50                         $(this).after(tag);
51                         //终止循环,相当于break
52                         // return false;
53                         }
54                 });
55                 //结束整个函数
56                 return flag;
57             });
58         });
59 
60         //简单的验证有没有输入内容
61 //        $(':submit').click(function () {
62 //            var v = $(this).prev().val();
63 //            if(v.length > 0){
64 //                return true;
65 //            }else{
66 //                alert('请输入内容');
67 //                return false
68 //            }
69 //        })
70 
71     </script>
72 </body>
73 </html>
表单提交验证示例

12、jQuery扩展

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <!--jQuery扩展-->
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9 
10     <script src="jquery-1.12.4.js"></script>
11     <!--可以引入别人写好的jQuery代码,扩展名可能重复(无法解决)-->
12     <!--引入的代码全局变量问题(引入的代码中写一个自执行函数)-->
13     <script src="plugin1.js"></script>
14     <script>
15         var v = $.wangsen();
16         alert(v);
17 //        $('#i1').css()
18 //        $.ajax()
19 
20           // jquery扩展,两种方式的调用方式不一样
21           //方法一
22 //        $.fn.extend({
23 //            "hanyang": function () {
24 //                return 'db';
25 //            }
26 //        });
27 //        var v = $('#i1').hanyang();
28 //        alert(v);
29 
30           //方法二
31 //        $.extend({
32 //            'wangsen': function () {
33 //                return 'sb';
34 //            }
35 //        });
36 //        var v = $.wangsen();
37 //        alert(v);
38     </script>
39 
40 </body>
41 </html>
jquery扩展的两种方式,其调用方式不一样
/**
 * Created by alex on 2016/11/26.
 */


status = 1;

$.extend({
   'wangsen': function () {
       return 'sb';
   }
});
plugin1.js
/**
 * Created by alex on 2016/11/26.
 */
//引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
(function (arg) {

    var status = 1;

    arg.extend({
       'wangsen': function () {
           return 'sb';
       }
    });

})(jQu$ery);
plugin2.js(使用自执行函数,对全局变量进行封装))

 

更多内容参考:http://www.cnblogs.com/wupeiqi/articles/5369773.html
posted on 2018-03-17 16:06  大小孩  阅读(199)  评论(0编辑  收藏  举报