本节内容
- 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
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
/**
* Created by alex on 2016/11/26.
*/
status = 1;
$.extend({
'wangsen': function () {
return 'sb';
}
});
/**
* Created by alex on 2016/11/26.
*/
//引入的代码全局变量问题(引入的代码中写一个自执行函数,对全局变量进行封装)
(function (arg) {
var status = 1;
arg.extend({
'wangsen': function () {
return 'sb';
}
});
})(jQu$ery);
更多内容参考：http://www.cnblogs.com/wupeiqi/articles/5369773.html
