Jquery学习笔记
中文参考文档：http://jquery.cuishifeng.cn
Jquery是一个包含DOM/BOM/JavaScript的类库
引入jquery文件方法：<script src='jquery-1.12.4.js'></script>
调用jquery方法有以下2种
<script>
jQuery 或者 $
</script>
Jquery版本系列包含：
1.X -> 推荐 兼容性更好IE8以下
2.X
3.X
Jquery和dom之间的转换方法：
jquery和dom输出的区别：jquery的输出是使用中括号[]包裹的，dom输出是直接输出的html标签样式。
jquery对象转换为dom方法：在jquery语句后面加上第0个元素[0]，这时输出就转换为DOM对象。
如：首先需要导入jquery文件
执行：$('#l1')
jquery输出：[div#l1, context: document, selector: "#l1"]
执行：$('#l1')[0]
输出：<div id="l1">123</div>
DOM对象转换为jquery写法：在dom对象外使用$()包裹后，即刻转为jquery对象，如：$(DOM对象)
如：d =document.getElementById('l1')
$(d) 转换为jquery
输出：[div#l1, context: div#l1]
一：查找元素
DOM : 10个左右(get系列）
jquery分2种：
第一种选择器：直接找到某个或者某类标签
1：id选择器，根据标签内的ID进行查询。如：$('#l1')
2：class选择器，根据标签内的class进行查询。如：$('.l1')
3：标签选择器，根据标签名进行查询。如：$('div')
4：组合选择器，可以根据标签，ID，class名统一查询，如：$('div,#l1,.l1')
5：层级选择器
$('#i10 a') 先定位到i10标签，然后从其内部包含的所有标签中查找所有的a标签
$('#i10>a') 只在i10下的子标签中查找a标签
6：基本筛选器
:first 从查询结果中提取第一个元素
:last 从查询结果中提取最后一个元素
:even 筛选所有的基数行
:odd 筛选所有的偶数行
:eq(index) 根据索引查找
:header 找到所有的h标签
7：属性
$('[name]') 具有name属性的所有标签
$('[name="123"]') name属性等于123的标签
$("input[type='text']") # 这里第一步筛选input,然后找到type=text的所有标签
$(':text') 简写
jquery方法内置循环:
$('#tb:checkbox').each(function(k){
// k 当前索引
//this 是dom对象，代指当前循环的元素 $(this)
}
三元运算写法：var v = 条件 ？ 真值 ： 假值
实例见：jquery多选反选全选.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="checkAll();" /> 9 <input type="button" value="反选" onclick="reverseAll();" /> 10 <input type="button" value="取消" onclick="channelAll();" /> 11 <table border="1" > 12 <thead> 13 <th>选择</th> 14 <th>IP</th> 15 </thead> 16 <tbody id="tb"> 17 <tr> 18 <td><input type="checkbox"></td> 19 <td>1.1.1.1</td> 20 </tr> 21 <tr> 22 <td><input type="checkbox"></td> 23 <td>2.2.2.2</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>3.3.3.3</td> 28 </tr> 29 </tbody> 30 </table> 31 <script src="jquery-1.12.4.js"></script> 32 <script> 33 /* 获取id=tb下所有的checkbox属性标签，使用prop方法，如果后面带1个参数表示获取值，带2个参数表示赋值*/ 34 function checkAll() { 35 $('#tb :checkbox').prop('checked',true) 36 } 37 function channelAll() { 38 $('#tb :checkbox').prop('checked',false) 39 } 40 function reverseAll() { 41 /* each方法是循环获取的所有checkbox属性标签,然后通过函数对每个标签进行操作，k表示所有标签的索引*/ 42 $(':checkbox').each(function (k) { 43 /* DOM写法，this表示当前的标签 44 if(this.checked){ 45 this.checked = false; 46 }else{ 47 this.checked = true; 48 } 49 */ 50 /* jquery写法，这里用$(this)将doc标签转换为jquery格式 51 if ($(this).prop('checked')) { 52 $(this).prop('checked', false) 53 } else { 54 $(this).prop('checked', true) 55 }*/ 56 // 写法3，三元运算，v = 条件? 值1:值2，当条件为真将值1赋予v，反之值2赋予v 57 var v = $(this).prop('checked')?false:true; 58 $(this).prop('checked',v) 59 }) 60 } 61 </script> 62 </body> 63 </html>
第二种筛选器：在选择器选择后出现的多个符合条件的标签中，再次进行选择。
$(this).next() 当前标签的下一个兄弟标签
$(this).nextAll() 当前标签下面的所有兄弟标签（不包含兄弟标签中的子标签）
$(this).nextUntil('#ii1') 从当前标签开始向下查找到ID=II1的兄弟标签，提取这个区间范围的所有兄弟标签
$(this').prev() 当前标签的上一个兄弟标签
$(this).prevAll() 当前标签上面的所有兄弟标签（不包含兄弟标签中的子标签）
$(this).prevUntil('#ii1') 从当前标签开始向上查找到ID=II1的兄弟标签，提取这个区间范围的所有兄弟标签
$(this).parent() 当前标签的父标签
$(this).parents() 当前标签的所有父标签，直到<html>标签
$(this).parentsUntil('#ii1') 从当前标签开始向上查找直到一个父标签ID=ii1的标签结束，提取这个区间范围的所有标签
$(this).children() 当前标签的所有子标签
$(this).siblings() 当前标签的所有兄弟标签
$(this).find(样式名) 查找当前标签下的样式名
$(this).eq(1) 查找到的标签列表根据索引提取指定的标签
hasClass(class) 判断是否具有class这个样式
实例：菜单动态.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 .header{ 7 background-color:black; 8 color:wheat; 9 } 10 .content{ 11 min-height:50px; 12 } 13 .hide{ 14 display: none;; 15 } 16 </style> 17 <title>Title</title> 18 </head> 19 <body> 20 <div id='ii1' style="height:400px;200px;border:1px solid red;"> 21 <div class="item"> 22 <div id='i11' class="content hide">内容一 23 <div class="ct2">test</div> 24 </div> 25 <div id='i22' class="content hide">内容2</div> 26 <div id='i33' class="content hide">内容3</div> 27 <div class="header">标题一</div> 28 <div id='i1' class="content hide">内容一 29 <div class="content2">test</div> 30 </div> 31 <div id='i2' class="content hide">内容2</div> 32 <div id='i3' class="content hide">内容3</div> 33 </div> 34 <div class="item"> 35 <div class="header">标题二</div> 36 <div class="content hide">内容二</div> 37 </div> 38 <div class="item"> 39 <div class="header">标题三</div> 40 <div class="content hide">内容三</div></div> 41 <div class="item"> 42 <div class="header">标题四</div> 43 <div class="content hide">内容四</div> 44 </div> 45 </div> 46 <script src="jquery-1.12.4.js"></script> 47 <script> 48 $('.header').click(function () { 49 //当前点击的标签 $(this) 50 // 获取某个标签的下一个标签 51 // 获取某个标签的父标签 52 // 获取所有的兄弟标签 53 //添加样式和移除样式 54 // $('#i1').addClass('hide') 55 // $('#i1').removeClass('hide') 56 // 利用筛选器 57 /* 58 $(this).next() //获取当前标签的下一个标签 59 $(this).prev() //获取当前标签的上一个标签 60 $(this).parent() //获取当前标签的父标签 61 $(this).children() //获取当前标签的子标签 62 $(this).siblings() //获取当前标签的所有兄弟标签 63 $(this).find('#i1') //查找并获取当前标签内ID为i1的标签（子子孙孙中查找） 64 */ 65 console.log($(this).parentsUntil('#ii1')) 66 $(this).prevAll().removeClass('hide') 67 $(this).parent().siblings().find('.content').addClass('hide') 68 // 支持链式编程 69 // $(...).click() 这里的click是绑定事件 70 // $(this).next().remove('hide').parent().siblings().find('.content').addClass('hide') 71 }) 72 </script> 73 </body> 74 </html>
文本操作：
$(..).text() # 只获取文本内容，不获取内部的html标签
$(..).text("<a>1</a>") # 设置文本内容,内容中的html标签不会进行解析，统一以字符串新式出现。
$(..).html() #获取文本内容，文本内容中的html标签也会以字符串形式获取到。
$(..).html("<a>1</a>") #设置文本内容，字符串中的html标签在设置时将会进行解析，将解析后的1进行赋值。
以下val适用于input之类的具有输入功能的框
$(..).val() 获取值，用于具有value属性的标签
$(..).val(..) 设置值，用于具有value属性的标签
实例：模态编辑框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top:50%; 13 left:50%; 14 width:500px; 15 height:400px; 16 margin-left:-250px; 17 margin-top:-250px; 18 background-color: #dddddd; 19 z-index: 10; 20 } 21 .shadow{ 22 position:fixed; 23 top:0; 24 left:0; 25 right:0; 26 bottom:0; 27 opacity:0.6; 28 background-color: black; 29 z-index:9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="Addtx();">添加</a> 35 <table border="1"> 36 <thead> 37 <tr> 38 <th>ip</th> 39 <th>port</th> 40 <th>os</th> 41 </tr> 42 </thead> 43 <tbody> 44 <tr> 45 <td>1.1.1.1</td> 46 <td>80<b>test</b></td> 47 <td> 48 <a>添加</a> | <a class="edit">编辑</a> | <a>删除</a> 49 </td> 50 </tr> 51 <tr> 52 <td>1.1.1.1</td> 53 <td>80</td> 54 <td> 55 <a>添加</a> | <a class="edit">编辑</a> | <a>删除</a> 56 </td> 57 </tr> 58 </tbody> 59 </table> 60 <div class="modal hide"> 61 <div> 62 <input name="hostname" type="text"/> 63 <input name="port" type="text"/> 64 </div> 65 <div> 66 <input type="button" value="取消" onclick="cancel();" /> 67 </div> 68 </div> 69 <div class="shadow hide"></div> 70 <script src="jquery-1.12.4.js"></script> 71 <script> 72 /*为样式名modal,shadow的标签删除hide样式*/ 73 function Addtx() { 74 $('.modal,.shadow').removeClass('hide') 75 } 76 /*为样式名 添加hide样式*/ 77 function cancel() { 78 $('.modal,.shadow').addClass('hide') 79 /*对输入框进行清空操作*/ 80 $('.modal input[type="text"]').val('') 81 } 82 /*样式edit 点击触发click事件，执行一个匿名函数*/ 83 $('.edit').click(function () { 84 /*获取当前标签this的父标签的以上所有同级别标签*/ 85 var tds = $(this).parent().prevAll(); 86 Addtx(); /*执行函数*/ 87 var ip = $(tds[1]).text() /*将tds[1]的dom转换为jquery，使用text方法提取文本内容*/ 88 var port = $(tds[0]).text() 89 $('.modal input[name="hostname"]').val(ip) /*查找样式modal标签下的input[name=hostname]的标签进行赋值操作*/ 90 $('.modal input[name="port"]').val(port) 91 }) 92 </script> 93 </body> 94 </html>
样式操作：
addClass #添加样式
removeClass # 删除样式
toggleClass # 如果样式存在则删除样式，如果样式不存在则添加样式（开关效果）
实例：开关
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input id='btn' type="button" value="开关" /> 14 <span class="i1 hide">开灯了</span> 15 </body> 16 <script src="jquery-1.12.4.js"></script> 17 <script> 18 $('#btn').click( 19 function () { 20 $('.i1').toggleClass('hide') 21 } 22 ) 23 </script> 24 </html>
属性操作：
# 一般专门用于做自定义属性操作
$(..).attr('n')：当为一个参数时候是获取属性值
$(..).attr('n','v')：当为2个参数时是修改属性值，如果出现重复则覆盖
$(..).removeAttr('n')：删除属性
实例：模态编辑框通过自定义属性动态加载内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top:50%; 13 left:50%; 14 width:500px; 15 height:400px; 16 margin-left:-250px; 17 margin-top:-250px; 18 background-color: #dddddd; 19 z-index: 10; 20 } 21 .shadow{ 22 position:fixed; 23 top:0; 24 left:0; 25 right:0; 26 bottom:0; 27 opacity:0.6; 28 background-color: black; 29 z-index:9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="Addtx();">添加</a> 35 <table border="1"> 36 <thead> 37 <tr> 38 <th>ip</th> 39 <th>port</th> 40 <th>os</th> 41 </tr> 42 </thead> 43 <tbody> 44 <tr> 45 <td target="hostname">1.1.1.1</td> 46 <td target="port">80</td> 47 <td> 48 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a> 49 </td> 50 </tr> 51 <tr> 52 <td target="hostname">1.1.1.1</td> 53 <td target="port">80</td> 54 <td> 55 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a> 56 </td> 57 </tr> 58 </tbody> 59 </table> 60 <div class="modal hide"> 61 <div> 62 <input name="hostname" type="text"/> 63 <input name="port" type="text"/> 64 </div> 65 <div> 66 <input type="button" value="取消" onclick="cancel();" /> 67 </div> 68 </div> 69 <div class="shadow hide"></div> 70 <script src="jquery-1.12.4.js"></script> 71 <script> 72 /*为样式名modal,shadow的标签删除hide样式*/ 73 function Addtx() { 74 $('.modal,.shadow').removeClass('hide') 75 } 76 /*为样式名 添加hide样式*/ 77 function cancel() { 78 $('.modal,.shadow').addClass('hide') 79 /*对输入框进行清空操作*/ 80 $('.modal input[type="text"]').val('') 81 } 82 /*样式edit 点击触发click事件，执行一个匿名函数*/ 83 $('.edit').click(function () { 84 Addtx(); /*执行函数*/ 85 var tds = $(this).parent().prevAll(); /*提取所有上级兄弟标签，使用each循环每个标签*/ 86 tds.each( 87 function () { 88 /*this代表当天的td，获取td的target的值*/ 89 var n = $(this).attr('target'); 90 /*获取td中的内容*/ 91 var txt = $(this).text(); 92 /*进行字符串拼接，以满足定位目标输入框的属性和对应值*/ 93 var a1 = '.modal input[name='; 94 var a2 = ']'; 95 var temp = a1 + n + a2; 96 /*在input的输入框中动态输入对应的标签提取到的值(如标签target=hostname 值1.1.1.1)*/ 97 $(temp).val(txt) 98 } 99 ) 100 }) 101 $('.del').click(function () { 102 $(this).parent().parent().remove() 103 }) 104 $('.cp').click(function () { 105 /*克隆标签*/ 106 var new_ct = $(this).parent().parent().clone() 107 var par_ct = $(this).parent().parent().parent() 108 par_ct.append(new_ct) 109 }) 110 </script> 111 </body> 112 </html>
# prop方法专门用于checkbox,radio等类似的选择功能标签
$(..).prop('checked')
$(..).prop('checked',true)
PS:
.index 获取索引位置
见实例：菜单切换_索引方法.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .active{ 11 background-color:brown; 12 } 13 .menu{ 14 height:38px; 15 background-color: #eeeeee; 16 line-height:38px; 17 cursor:pointer;/*鼠标链接以小手形状出现*/ 18 } 19 .menu-item{ 20 float:left; 21 border-right:1px solid red; 22 padding:0 5px; 23 } 24 .content{ 25 min-height:100px; 26 border:1px solid red; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="700px;margin:0 auto;"> 32 <div class="menu"> 33 <div class="menu-item active">menu 1</div> 34 <div class="menu-item">menu 2</div> 35 <div class="menu-item">menu 3</div> 36 </div> 37 <div class="content"> 38 <div>content 1</div> 39 <div class="hide">content 2</div> 40 <div class="hide">content 3</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 /*根据自定义属性进行操作*/ 46 $('.menu-item').click(function () { 47 /*当前标签添加active样式并将所有兄弟标签删除active样式*/ 48 $(this).addClass('active').siblings().removeClass('active'); 49 /*获取当前标签的索引号*/ 50 var v = $(this).index(); 51 /*根据content下通过eq定位索引标签进行操作*/ 52 $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide') 53 }) 54 </script> 55 </body> 56 </html>
文档处理：（实现添加，删除，修改）
append #在目标标签内的子标签最下方添加内容
prepend #在目标标签内的子标签最上方添加内容
after #在目标标签同级下方添加内容
before #在目标标签同级上方添加内容
remove #删除 根据索引对应到的标签和内容
empty #只清空标签内容，不删除标签
clone #克隆一份，然后需要通过append再次添加克隆的数据
实例：标签添加删除复制.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="text" id="txt"> 9 <input type="button" id="Add" value="添加" /> 10 <input type="button" id="Del" value="删除" /> 11 <input type="button" id="Cp" value="复制" /> 12 13 <ul> 14 <li>abc</li> 15 <li>123</li> 16 <li>def</li> 17 </ul> 18 <script src="jquery-1.12.4.js"></script> 19 <script> 20 $('#Add').click(function () { 21 var txt = $('#txt').val() 22 var tit = '<li>' + txt +'</li>' 23 /* 在li的最下方添加标签和内容*/ 24 $('ul').append(tit) 25 /*在li的最上方添加标签和内容 26 $('ul').prepend(tit) 27 */ 28 /*在同级标签的下方添加标签和内容 29 $('ul').after(tit) 30 */ 31 /*在同级标签的最上方添加标签和内容 32 $('ul').before(tit) 33 */ 34 }); 35 $('#Del').click(function () { 36 var index = $('#txt').val(); 37 /*删除标签和内容*/ 38 $('ul li').eq(index).remove(); 39 /*只删除内容 40 $('ul li').eq(index).empty()*/ 41 }); 42 $('#Cp').click(function () { 43 var index = $('#txt').val(); 44 /*根据索引号克隆一行新的数据*/ 45 var new_ct = $('ul li').eq(index).clone(); 46 /*添加克隆出来的数据*/ 47 $('ul').append(new_ct) 48 }) 49 </script> 50 </body> 51 </html>
实例：模态编辑框添加编辑删除克隆.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top:50%; 13 left:50%; 14 width:500px; 15 height:400px; 16 margin-left:-250px; 17 margin-top:-250px; 18 background-color: #dddddd; 19 z-index: 10; 20 } 21 .shadow{ 22 position:fixed; 23 top:0; 24 left:0; 25 right:0; 26 bottom:0; 27 opacity:0.6; 28 background-color: black; 29 z-index:9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="Addtx();">添加</a> 35 <table border="1"> 36 <thead> 37 <tr> 38 <th>ip</th> 39 <th>port</th> 40 <th>os</th> 41 </tr> 42 </thead> 43 <tbody id="tb"> 44 <tr> 45 <td target="hostname">1.1.1.1</td> 46 <td target="port">80</td> 47 <td> 48 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a> 49 </td> 50 </tr> 51 <tr> 52 <td target="hostname">1.1.1.1</td> 53 <td target="port">80</td> 54 <td> 55 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a> 56 </td> 57 </tr> 58 </tbody> 59 </table> 60 <div class="modal hide"> 61 <div> 62 <input name="hostname" type="text"/> 63 <input name="port" type="text"/> 64 </div> 65 <div> 66 <input type="button" value="确定" onclick="confirmModal();" /> 67 <input type="button" value="取消" onclick="cancel();" /> 68 </div> 69 </div> 70 <div class="shadow hide"></div> 71 <script src="jquery-1.12.4.js"></script> 72 <script> 73 /*为样式名modal,shadow的标签删除hide样式*/ 74 function Addtx() { 75 $('.modal,.shadow').removeClass('hide') 76 } 77 /*为样式名 添加hide样式*/ 78 function cancel() { 79 $('.modal,.shadow').addClass('hide') 80 /*对输入框进行清空操作*/ 81 $('.modal input[type="text"]').val('') 82 } 83 /*添加行数据*/ 84 function confirmModal() { 85 var htname = $('.modal input[name="hostname"]').val(); 86 var htport = $('.modal input[name="port"]').val(); 87 var tr = document.createElement('tr'); 88 var td1 = document.createElement('td'); 89 td1.setAttribute('target','hostname'); 90 td1.innerHTML = htname; 91 var td2 = document.createElement('td'); 92 td2.setAttribute('target','port'); 93 td2.innerHTML = htport; 94 var td3 = document.createElement('td'); 95 td3.innerHTML = '<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>' 96 $(tr).append(td1); 97 $(tr).append(td2); 98 $(tr).append(td3); 99 $('#tb').append(tr); 100 cancel() 101 } 102 103 /*样式edit 点击触发click事件，执行一个匿名函数*/ 104 $('.edit').click(function () { 105 Addtx(); /*执行函数*/ 106 var tds = $(this).parent().prevAll(); /*提取所有上级兄弟标签，使用each循环每个标签*/ 107 tds.each( 108 function () { 109 /*this代表当天的td，获取td的target的值*/ 110 var n = $(this).attr('target'); 111 /*获取td中的内容*/ 112 var txt = $(this).text(); 113 /*进行字符串拼接，以满足定位目标输入框的属性和对应值*/ 114 var a1 = '.modal input[name='; 115 var a2 = ']'; 116 var temp = a1 + n + a2; 117 /*在input的输入框中动态输入对应的标签提取到的值(如标签target=hostname 值1.1.1.1)*/ 118 $(temp).val(txt) 119 } 120 ) 121 }) 122 $('.del').click(function () { 123 $(this).parent().parent().remove() 124 }) 125 $('.cp').click(function () { 126 /*克隆标签*/ 127 var new_ct = $(this).parent().parent().clone() 128 var par_ct = $(this).parent().parent().parent() 129 par_ct.append(new_ct) 130 }) 131 </script> 132 </body> 133 </html>
CSS样式处理
获取标签，然后通过css进行设置样式
$('t1').css('样式名称','样式值')
抽屉点赞功能：
实例：点攒.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .contain{ 8 padding:50px; 9 border:1px solid #ddd; 10 } 11 .item{ 12 position: relative; 13 width:30px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="contain"> 19 <div class="item"> 20 <span>攒</span> 21 </div> 22 </div> 23 <div class="contain"> 24 <div class="item"> 25 <span>攒</span> 26 </div> 27 </div> 28 <script src="jquery-1.12.4.js"></script> 29 <script> 30 $('.item').click(function () { 31 /*点击item触发事件执行这个函数*/ 32 Addfaver(this) 33 }) 34 function Addfaver(self) { 35 /*实现效果，初始化效果值*/ 36 var fontsize=15; 37 var top=0; 38 var right=0; 39 var opacity=1; 40 /*创建一个span标签*/ 41 var tag = document.createElement('span') 42 $(tag).text('+1') 43 /*设置标签样式*/ 44 $(tag).css('color','green') 45 $(tag).css('position','absolute'); 46 $(tag).css('fontsize',fontsize + "px") 47 $(tag).css('top',top + "px") 48 $(tag).css('right',right + "px") 49 $(tag).css('opacity',opacity) 50 $(self).append(tag) 51 /*以下使用定时器实现效果的变化*/ 52 var obj = setInterval(function () { 53 fontsize = fontsize + 5; 54 top = top - 5; 55 right= right - 5; 56 opacity= opacity - 0.2; 57 $(tag).css('fontsize',fontsize + "px") 58 $(tag).css('top',top + "px") 59 $(tag).css('right',right + "px") 60 $(tag).css('opacity',opacity) 61 /*当透明度小于0时候，进行删除定时器和删除+1的标签*/ 62 if(opacity < 0){ 63 clearInterval(obj) 64 $(tag).remove() 65 } 66 },100) 67 } 68 </script> 69 </body> 70 </html>
滑轮位置：
$(div).scrollTop() 获取div的上下滑轮位置
$(window).scrollTop() 获取windows窗口的上下滑轮位置
$(window).scrollTop(0) 设置滑轮位置值
.scrollLeft([val]) 左右位置
offset 指定标签在html中的坐标
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
事件绑定方式：
DOM:三种绑定方式
jquery:
第一种:$('.c1').click() # 很多种绑定事件
第二种:$('.c1').bind('click',function(){ }) # 对.c1绑定click事件
$('.c1').unbind('click',function(){ }) # 对.c1解除绑定click事件
$('.c1').delegate('a','click',function(){ }) # 对.c1下面的所有a标签绑定一个click事件，这个功能可以实现动态添加的标签具有事件绑定，很有用。
$('.c1').undelegate('a','click',function(){ }) # 对.c1下面所有a标签解除click事件
$('.c1').on('click',function(){}) # 以上所有绑定方式在jquery内部全部使用的是on绑定
$('.c1').off('click',function(){})
实例：绑定实例.html -->注意delegate的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="t1" type="text" /> 9 <input type="button" id="a1" value="添加" /> 10 <ul id="u1"> 11 <li>123</li> 12 <li>123</li> 13 <li>123</li> 14 </ul> 15 <script src="jquery-1.12.4.js"></script> 16 <script> 17 $('#a1').click(function () { 18 var v = $('#t1').val(); 19 var tmp = '<li>' + v + "</li>" 20 $('#u1').prepend(tmp) 21 }) 22 /*使用以下方法添加标签后，但是无法触发alert事件 23 $('ul li').click(function () { 24 var v = $(this).text() 25 alert(v) 26 }) 27 $('ul li').bind('click',function () { 28 var v = $(this).text() 29 alert(v) 30 }) 31 $('ul li').on('click',function () { 32 var v = $(this).text() 33 alert(v) 34 }) 35 */ 36 /*这个叫委托，可以对添加的标签进行绑定事件执行*/ 37 $('ul').delegate('li','click',function () { 38 var v = $(this).text() 39 alert(v) 40 }) 41 </script> 42 </body> 43 </html>
阻止事件:
return false # 将阻止后面的事件发生，默认是return true
# 当页面框架加载完成后，自动执行
$(function(){
$(绑定事件默认执行的操作)
})
举例:
/*通过return false 阻止后面href事件的发生*/
<a onclick='return clickon()' href='http://www.baidu.com'>let go</a>
<a id='i1' href='http://www.baidu.com'>letgo2</a>
<script>
/*dom*/
function clickon(){
alert(123);
return false;
</script>
<script src='jquery-1.12.4.js'></script>
<script>
/*jquery*/
$('#i1').click(function(){
alert(456)
return false; # 阻止后续事件的发生
})
</script>
return false: 后面的href将停止链接
实例：表单验证.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .error{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <form id='f1' action="s1.html"> 14 <div><input name='n1' type="text" /></div> 15 <div><input name='n2' type="password" /></div> 16 <div><input name='n3' type="text" /></div> 17 18 <input type="submit" value="提交"/> 19 <img src="..."> 20 </form> 21 <script src="jquery-1.12.4.js"></script> 22 <script> 23 /*当页面框架加载完毕后，会自动执行，注，不需要等待图片加载完成，只加载图片的框架，和下面的区别*/ 24 // $(function () { 25 // 26 // }) 27 28 /*当上面所有元素完全加载完毕后，才会执行,注意，需要等待图片加载完成*/ 29 $(':submit').click(function () { 30 var flag = true; 31 $('.error').remove(); /*清空错误提示的样式*/ 32 $('#f1').find('input[type="text"],input[type="password"]').each(function () { 33 var v = $(this).val(); 34 /*当输入框为空，将创建错误提示*/ 35 if(v.length <= 0){ 36 flag = false; 37 var tag = document.createElement('span'); 38 tag.className='error'; 39 tag.innerHTML = '必填'; 40 $(this).after(tag); 41 // return flag; /*只结束当前循环*/ 42 } 43 }); 44 return flag; /*结束整个循环*/ 45 }) 46 </script> 47 </body> 48 </html>
jquery 扩展，使用自执行函数封装扩展，避免全局变量冲突。
- $.extend 执行： $.方法
- $.fn.extend 执行 $(..).方法
实例：jquery扩展.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <script src="jquery-1.12.4.js"></script> 9 <script> 10 //jquery扩展第一种，自定义jquery的方法,使用extend，内部是一个字典 11 $.extend({ 12 'name':function () { 13 return 'jack'; 14 } 15 }); 16 var v = $.name(); /*方法调用*/ 17 alert(v); 18 //jquery扩展第二种， 19 $.fn.extend({ 20 'name':function () { 21 return 'jack'; 22 } 23 }); 24 var v = $('#i1').name(); 25 alert(v) 26 </script> 27 </body> 28 </html>
js扩展引入方法：
将jqeury扩展代码写入到js文件中，引入方法：
<script src='js自定义文件.js'></script>
<script>
var v = $.自定义的方法名()
alert(v)
</script>
自执行函数，可以封装js扩展
(function(){
var status = 1;
// 封装变量
})(jquery)