Html 4：jQuery
1、概述
2、选择器
3、筛选器
4、文本操作
5、样式操作
6、属性操作
7、文档处理
8、CSS
9、位置
10、事件
11、自定义属性
一、概述
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery即：DOM/BOM/JavaScript的类库（模块 《=》类库）
1、版本：
1.x（支持ie6）最新稳定版：1.12.4
2.x（不支持更早版本ie）
3.x（不支持更早版本ie）
2、jQuery与DOM的转换
jQuery对象[0] => Dom对象
$(Dom对象) => jQuery对象
3、导入jQuery
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <a>1</a> 10 <a>21</a> 11 <a id="i1">133</a> 12 <a>144</a> 13 <a>155</a> 14 </div> 15 <script src="jquery-1.12.4.js"></script> 16 </body> 17 </html>
二、选择器
直接找到某个或某类标签
1、基本
获取单个元素
id：$('#id')
class：
<div class='c1'></div>
$(".c1")
标签：
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
组合：
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
$('.c2')
$('a,.c2,#i10')
2、层级
$('#i10 a') 子子孙孙
$('#i10>a') 儿子
3、基本筛选器
:first(获取匹配的第一个元素：$('li:first'))
:last(获取匹配的最后一个元素：$('li:last'))
:eq()(查找第二行$("tr:eq(1)"))
4、属性
$('[aa]') 具有aa属性的所有标签
$('[aa="123"]') aa属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 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 function checkAll() { 44 $('#tb :checkbox').prop('checked',true); 45 } 46 function cancleAll() { 47 $('#tb :checkbox').prop('checked',false); 48 } 49 function reverseAll() { 50 $(':checkbox').each(function(k){ 51 // this,代指当前循环的每一个元素 52 // Dom 53 /* 54 if(this.checked){ 55 this.checked = false; 56 }else{ 57 this.checked = true; 58 } 59 */ 60 /* 61 if($(this).prop('checked')){ 62 $(this).prop('checked', false); 63 }else{ 64 $(this).prop('checked', true); 65 } 66 */ 67 // 三元运算var v = 条件? 真值：假值 68 var v = $(this).prop('checked')?false:true; 69 $(this).prop('checked',v); 70 }) 71 } 72 </script> 73 </body> 74 </html>
总结：
- $('#tb:checkbox').prop('checked'); 获取值
- $('#tb:checkbox').prop('checked', true); 设置值
- jQuery方法内置循环： $('#tb:checkbox').xxxx
$('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- 三元运算：var v = 条件 ? 真值 : 假值
三、筛选器
$('#i1').next()：找到每个段落的后面紧邻的同辈元素
$('#i1').nextAll()：给第一个div之后的所有元素加个类
$('#i1').nextUntil('#ii1')：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>
$('#i1').prev()：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
$('#i1').prevAll()：查找当前元素之前所有的同辈元素
$('#i1').prevUntil('#ii1')：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
$('#i1').parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合
$('#i1').parents()：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）
$('#i1').parentsUntil()：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
$('#i1').children()：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
$('#i1').siblings()：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
$('#i1').find()：搜索所有与指定表达式匹配的元素
$('li:eq(1)')：字符串形式
$('li').eq(1)：获取匹配的第二个元素（jQuery形式）
first()：获取第一个元素
last()：获取最后个元素
hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true
四、文本操作
$(..).text() # 取得所有匹配元素的内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html() #取得第一个匹配元素的html内容
$(..).html("<a>1</a>") #设置html内容
$(..).val() #获得匹配元素的当前值
$(..).val(..) #设置文本框中的值
五、样式操作
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 type='checkbox' id='i2' /> 14 15 <input id="i1" type="button" value="开关" /> 16 <div class="c1 hide">asdfasdf</div> 17 18 <script src="jquery-1.12.4.js"></script> 19 <script> 20 $('#i1').click(function(){ 21 // if($('.c1').hasClass('hide')){ 22 // $('.c1').removeClass('hide'); 23 // }else{ 24 // $('.c1').addClass('hide'); 25 // } 26 $('.c1').toggleClass('hide'); 27 }) 28 </script> 29 </body> 30 </html>
六、属性操作
1、专门用于做自定义属性
$(..).attr('n') #返回被选元素的属性值
$(..).attr('n','v') #设置被选元素的属性值
$(..).removeAttr('n') #删除被选元素的属性值
<input type='checkbox' id='i1' />
2、专门用于chekbox,radio
$(..).prop('checked') #获取在匹配的元素集中的第一个元素的属性值
$(..).prop('checked', true) #选中复选框为true，没选中为false
PS：index 获取索引位置：
搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1
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 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 32 <div style=" 700px;margin:0 auto"> 33 34 <div class="menu"> 35 <div class="menu-item active" a="1">菜单一</div> 36 <div class="menu-item" a="2">菜单二</div> 37 <div class="menu-item" a="3">菜单三</div> 38 </div> 39 <div class="content"> 40 <div b="1">内容一</div> 41 <div class="hide" b="2">内容二</div> 42 <div class="hide" b="3">内容三</div> 43 44 </div> 45 46 </div> 47 <script src="jquery-1.12.4.js"></script> 48 <script> 49 $('.menu-item').click(function(){ 50 $(this).addClass('active').siblings().removeClass('active'); 51 var target = $(this).attr('a'); 52 $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); 53 }); 54 </script> 55 </body> 56 </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: #eeeeee; 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="addElement();">添加</a> 35 36 <table border="1" id="tb"> 37 <tr> 38 <td target="hostname">1.1.1.11</td> 39 <td target="port">80</td> 40 <td target="ip">80</td> 41 <td> 42 <a class="edit">编辑</a> | <a class="del">删除</a> 43 </td> 44 </tr> 45 <tr> 46 <td target="hostname">1.1.1.12</td> 47 <td target="port">80</td> 48 <td target="ip">80</td> 49 <td> 50 <a class="edit">编辑</a> | <a class="del">删除</a> 51 </td> 52 </tr> 53 <tr> 54 <td target="hostname">1.1.1.13</td> 55 <td target="port">80</td> 56 <td target="ip">80</td> 57 <td> 58 <a class="edit">编辑</a> | <a class="del">删除</a> 59 </td> 60 </tr> 61 <tr> 62 <td target="hostname">1.1.1.14</td> 63 <td target="port">80</td> 64 <td target="ip">80</td> 65 <td> 66 <a class="edit">编辑</a> | <a class="del">删除</a> 67 </td> 68 69 </tr> 70 </table> 71 72 <div class="modal hide"> 73 <div> 74 <input name="hostname" type="text" /> 75 <input name="port" type="text" /> 76 <input name="ip" type="text" /> 77 </div> 78 79 <div> 80 <input type="button" value="取消" onclick="cancelModal();" /> 81 <input type="button" value="确定" onclick="confirmModal();" /> 82 </div> 83 </div> 84 85 <div class="shadow hide"></div> 86 87 <script src="jquery-1.12.4.js"></script> 88 <script> 89 90 $('.del').click(function () { 91 $(this).parent().parent().remove(); 92 }); 93 94 function confirmModal() { 95 96 var tr = document.createElement('tr'); 97 var td1 = document.createElement('td'); 98 td1.innerHTML = "11.11.11.11"; 99 var td2 = document.createElement('td'); 100 td2.innerHTML = "8001"; 101 102 $(tr).append(td1); 103 $(tr).append(td2); 104 105 $('#tb').append(tr); 106 107 $(".modal,.shadow").addClass('hide'); 108 // $('.modal input[type="text"]').each(function () { 109 // // var temp = "<td>..." 110 // 111 // 112 // 113 // }) 114 } 115 116 function addElement() { 117 $(".modal,.shadow").removeClass('hide'); 118 } 119 function cancelModal() { 120 $(".modal,.shadow").addClass('hide'); 121 $('.modal input[type="text"]').val(""); 122 } 123 124 $('.edit').click(function(){ 125 $(".modal,.shadow").removeClass('hide'); 126 // this 127 var tds = $(this).parent().prevAll(); 128 tds.each(function () { 129 // 获取td的target属性值 130 var n = $(this).attr('target'); 131 // 获取td中的内容 132 var text = $(this).text(); 133 var a1 = '.modal input[name="'; 134 var a2 = '"]'; 135 var temp = a1 + n + a2; 136 $(temp).val(text); 137 }); 138 139 140 // var port = $(tds[0]).text(); 141 // var host = $(tds[1]).text(); 142 // 143 // $('.modal input[name="hostname"]').val(host); 144 // $('.modal input[name="port"]').val(port); 145 // 循环获取tds中内容 146 // 获取 <td>内容</td> 获取中间的内容 147 // 赋值给input标签中的value 148 149 }); 150 </script> 151 </body> 152 </html>
七、文档处理
append #后面追加
prepend #往前面加
after #平级下面（在每个匹配的元素之后插入内容）
before #平级前面
remove #删全部
empty #只删内容
clone #克隆
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 id="a1" type="button" value="添加" /> 10 <input id="a2" type="button" value="删除" /> 11 <input id="a3" type="button" value="复制" /> 12 13 <ul id="u1"> 14 15 <li>1</li> 16 <li>2</li> 17 18 </ul> 19 <script src="jquery-1.12.4.js"></script> 20 <script> 21 $('#a1').click(function () { 22 var v = $('#t1').val(); 23 24 var temp = "<li>" + v + "</li>"; 25 // $('#u1').append(temp); 26 $('#u1').prepend(temp); 27 // $('#u1').after(temp) 28 // $('#u1').before(temp) 29 }); 30 31 $('#a2').click(function () { 32 var index = $('#t1').val(); 33 $('#u1 li').eq(index).remove(); 34 //$('#u1 li').eq(index).empty(); 35 }); 36 $('#a3').click(function () { 37 var index = $('#t1').val(); 38 var v = $('#u1 li').eq(index).clone(); 39 $('#u1').append(v); 40 // $('#u1 li').eq(index).remove(); 41 //$('#u1 li').eq(index).empty(); 42 }) 43 </script> 44 </body> 45 </html>
八、CSS
$('t1').css('样式名称', '样式值')：访问匹配元素的样式属性
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .container{ 8 padding: 50px; 9 border: 1px solid #dddddd; 10 } 11 .item{ 12 position: relative; 13 width: 30px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="item"> 20 <span>赞</span> 21 </div> 22 </div> 23 <div class="container"> 24 <div class="item"> 25 <span>赞</span> 26 </div> 27 </div> 28 <div class="container"> 29 <div class="item"> 30 <span>赞</span> 31 </div> 32 </div> 33 <div class="container"> 34 <div class="item"> 35 <span>赞</span> 36 </div> 37 </div> 38 39 <script src="jquery-1.12.4.js"></script> 40 <script> 41 $('.item').click(function () { 42 AddFavor(this); 43 }); 44 45 function AddFavor(self) { 46 // DOM对象 47 var fontSize = 15; 48 var top = 0; 49 var right = 0; 50 var opacity = 1; 51 52 var tag = document.createElement('span'); 53 $(tag).text('+1'); 54 $(tag).css('color','green'); 55 $(tag).css('position','absolute'); 56 $(tag).css('fontSize',fontSize + "px"); 57 $(tag).css('right',right + "px"); 58 $(tag).css('top',top + 'px'); 59 $(tag).css('opacity',opacity); 60 $(self).append(tag); 61 62 var obj = setInterval(function () { 63 fontSize = fontSize + 10; 64 top = top - 10; 65 right = right - 10; 66 opacity = opacity - 0.1; 67 68 $(tag).css('fontSize',fontSize + "px"); 69 $(tag).css('right',right + "px"); 70 $(tag).css('top',top + 'px'); 71 $(tag).css('opacity',opacity); 72 if(opacity < 0){ 73 clearInterval(obj); 74 $(tag).remove(); 75 } 76 }, 40); 77 } 78 </script> 79 </body> 80 </html>
九、位置
$(window).scrollTop() #获取匹配元素相对滚动条顶部的偏移；此方法对可见和隐藏元素均有效。
$(window).scrollTop(0) #设定垂直滚动条值
scrollLeft([val]) #左右滚动条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="i1"></div> 9 <div style="height: 100px;100px;overflow: auto"> 10 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 11 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 12 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 13 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 14 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 15 <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> 16 </div> 17 <div id="i2"></div> 18 <div style="height: 1000px;"></div> 19 <script src="jquery-1.12.4.js"></script> 20 </body> 21 </html>
offset() #获取匹配元素在当前视口的相对偏移
offset().left #指定标签在html中的坐标
offset().top #指定标签在html中的坐标
position() #指定标签相对父标签(relative)标签的坐标
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd; 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;"></div> 10 <div style="height: 300px;"></div> 11 </div> 12 <script type="text/javascript" src="jquery-1.12.4.js"></script> 13 <script> 14 $(function(){ 15 $('#title').mouseover(function(){ 16 $(this).css('cursor','move'); 17 }); 18 $("#title").mousedown(function(e){ 19 //console.log($(this).offset()); 20 var _event = e || window.event; 21 var ord_x = _event.clientX; 22 var ord_y = _event.clientY; 23 24 var parent_left = $(this).parent().offset().left; 25 var parent_top = $(this).parent().offset().top; 26 27 $('#title').on('mousemove', function(e){ 28 var _new_event = e || window.event; 29 var new_x = _new_event.clientX; 30 var new_y = _new_event.clientY; 31 32 var x = parent_left + (new_x - ord_x); 33 var y = parent_top + (new_y - ord_y); 34 35 $(this).parent().css('left',x+'px'); 36 $(this).parent().css('top',y+'px'); 37 38 }) 39 }); 40 $("#title").mouseup(function(){ 41 $("#title").off('mousemove'); 42 }); 43 }) 44 </script> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .h{ 8 border: 2px solid; 9 height: 50px; 10 padding: 10px; 11 margin: 5px; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="h" id="i1"> 17 sdfs 18 </div> 19 <script src="jquery-1.12.4.js"></script> 20 </body> 21 </html>
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() #纯高度 + padding
$('i1').outerHeight() # 纯高度 + padding + border
$('i1').outerHeight(true) # 纯高度 + padding + border + margin
十、事件
DOM： 三种绑定方式
jQuery：
基本绑定方式
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){ })
$('.c1').unbind('click',function(){ })
**********委托**********
$('.c').delegate('a', 'click', function(){})（委托）
$('.c').undelegate('a', 'click', function(){ })
$('.c1').on('click', function(){ })
$('.c1').off('click', function(){ })
阻止事件发生：return false
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> 9 10 <a id="i1" href="http://www.oldboyedu.com">走你2</a> 11 <script src="jquery-1.12.4.js"></script> 12 <script> 13 function ClickOn() { 14 alert(123); 15 return true; 16 } 17 $('#i1').click(function () { 18 alert(456); 19 return false; 20 }) 21 </script> 22 </body> 23 </html>
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
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 14 <form id="f1" action="s5.html" method="POST"> 15 <div><input name="n1" tex = "用户名" type="text" /></div> 16 <div><input name="n2" tex = "密码" type="password" /></div> 17 <div><input name="n3" tex = "邮箱" type="text" /></div> 18 <div><input name="n4" tex = "端口" type="text" /></div> 19 <div><input name="n5" tex = "IP" type="text" /></div> 20 21 <input type="submit" value="提交" /> 22 <img src="..."> 23 </form> 24 <script src="jquery-1.12.4.js"></script> 25 <script> 26 // 当页面框架加载完毕后，自动执行 27 // $(function(){ 28 // $.Login('#f1') 29 // }); 30 $(function(){ 31 // 当页面所有元素完全加载完毕后，执行 32 $(':submit').click(function () { 33 $('.error').remove(); 34 var flag = true; 35 $('#f1').find('input[type="text"],input[type="password"]').each(function () { 36 var v = $(this).val(); 37 var n = $(this).attr('tex'); 38 if(v.length <= 0){ 39 flag = false; 40 var tag = document.createElement('span'); 41 tag.className = "error"; 42 tag.innerHTML = n + "必填"; 43 $(this).after(tag); 44 // return false; 45 } 46 }); 47 return flag; 48 }); 49 }); 50 51 // $(':submit').click(function () { 52 // var v = $(this).prev().val(); 53 // if(v.length > 0){ 54 // return true; 55 // }else{ 56 // alert('请输入内容'); 57 // return false 58 // } 59 // }) 60 61 </script> 62 </body> 63 </html>
十一、自定义属性
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
1 status = 1; 2 3 $.extend({ 4 'bb': function () { 5 return 'bb'; 6 } 7 });
1 (function (arg) { 2 var status = 1; 3 arg.extend({ 4 'bb': function () { 5 return 'bb'; 6 } 7 }); 8 })(jQuery);
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 src="plugin2.js"></script> 10 <script> 11 var v = $.bb(); 12 alert(v); 13 // $('#i1').css() 14 // $.ajax() 15 // jquery扩展 16 // $.fn.extend({ 17 // "aa": function () { 18 // return 'aa'; 19 // } 20 // }); 21 // var v = $('#i1').bb(); 22 // alert(v); 23 // $.extend({ 24 // 'wangsen': function () { 25 // return 'bb'; 26 // } 27 // }); 28 // var v = $.bb(); 29 // alert(v); 30 </script> 31 </body> 32 </html>