参考网址：http://jquery.cuishifeng.cn/
1、安装环境
2、查找元素
3、操作元素
一、安装环境：
1、我们需要去官网下载jQuery，地址：http://jquery.com/download/
2、版本选择。
2.1：目前jQuery版本分为1.x、2.x、3.x。为了更好的兼容性，我们通常使用1.x版本，因为它兼容IE8以下的版本，但是所有的命令不分版本，都适当用。
2.2：一般同一个版本有两个安装包jquery-1.x.x.js和jquery-1.x.min.js。min顾名思义是压缩过的。调试的时候我们为了方便，一般使用非压缩版的，但是上线必须是min（压缩版）。
3、安装。
3.1：下载完jQuery安装包，直接放到你的python项目的目录下。
3.2：导入方法，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <!--导入jquery-->
<script src="jquery-1.12.4.js"></script>
<!--下面开始写方法-->
<script> </script>
</body>
</html>
3.3：引用$.和jQuery
方法一
方法二
Dom和jquery之间的转换：
Dom转成jquery对象：$(Dom对象名)
jQuery转换成Dom对象：$('#id名')[0]
总结：
我们发现jquery第0个元素才是Dom对象，所以jQuery的对象内容要比Dom对象的内容多。
二、查找元素：
选择器（直接找到某些或某类标签）：
基本：
1、id
$('id')
2、class
<div class='c1'><div>
$('.c1')
3、标签
3.1：例如找a标签，下面这种方法找到所有的a标签
$('a')
3.2：组合（例如我想同时找到class是c1和a标签及id等于i1的标签）
$('.c1,a,#i1')
你可以理解为把不同的查找方法，都放到引号里面用逗号隔开就行
3.3：层级（例如我要找到id是id1下的a标签）
$('#i1 a')跟上面一样，如果是组合的话用逗号隔开，如果是空格的话是找它下面的子子孙孙
$('#i1>a')要是这么写的话只找到id等于i1下的a标签
3.4:基本筛选
$('.c1:first')在找到所有class等于c1的标签里面的第一个标签
:first(找到的标签里面的第一个标签)
:last(找到的标签里面的最后一个标签)
:even奇数
:odd偶数
:eq（例如$('#i1 a:eq(0)'，找到id等于i1下的a标签里面索引等于0的标签）
:gt(大于多少)
3.5：属性
简单操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a zhangsan='1'>123</a>
<a zhangsan='2'>123</a>
<a zhangsan='3'>123</a>
<script src="jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html>
$('zhangsan') 找到所有具有zhangsan属性的标签
$('[zhangsan="1"]')找到zhangsan属性等于1的标签(注意单、双引号的不能隔开)
表单：
如果我想找到html中所有input标签中type等于text的标签，用属性查找的话可以这么写$('input[type="text"]')
表单的话可以这么查找：
$(':text')
实例一（全选、反选、取消）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll();" />
<input type="button" value="反选" onclick="resverseAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<table>
<thead>
<tr>
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
// 全选，首先我找到id等于td的标签，然后找它下面的checkbox标签，用prop方法让checked等于true就选择上了
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
// 全选，首先我找到id等于td的标签，然后找它下面的checkbox标签，用prop方法让checked等于flase就选择上了
function cancleAll(){
$('#tb :checkbox').prop('checked',false);
} function resverseAll(){
//循环所有的checkbox对象，然后用匿名函数，里面加上条件判断
$("#tb :checkbox").each(function () {
//我们说了checked后面有false或true就是设置属性，没有就是获取对象属性。如果选择上了，让他等于false
if($(this).prop("checked")){
$(this).prop("checked",false);
//否则就更改为true
}else{
$(this).prop("checked",true);
}
})
}
</script>
</body>
</html>
实例二（下拉菜单）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div> <div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//查找class等于header的标签，给个click事件。这个事件里面添加一个匿名函数
$('.header').click(function(){
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide')
// var v = $("this + div");
// $("label + input")
// console.log(v);
//
// $("afsldkfja;skjdf;aksdjf") // 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/ // 链式编程
// $(...).click(function(){
// this..
// }) // $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide') //this代指谁点击谁就是谁
//被点击的这个标签的下一个标签（也就是内容的标签），移除hide属性（不隐藏），然后我们要让其它的内容标签隐藏，
//也就是它父亲的的兄弟标签，就是其它class等于item属性，在这里面找到classs等于.content属性里面，增加hide（让它隐藏）
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') })
</script>
</body>
</html>
筛选：
.next(下一个)
.nextAll(下面所有的)
.nextUntil()(直到找到那个，包含直到那个标签)
.prev() 上一个
.prevall() 上面所有的
.parent() 父
.parents() 往上找，一直找到所有的长辈
.parentsUntil() 往上找，一直找到，直到到哪里，类似于next的Until
.children() 孩子
.siblings() 兄弟
.find('#i1') 子子孙孙中查找
内容操作：
.text() 获取内容，赋值就变成了更改 $('#i1').text = 123
.html ()获取标签及内容,赋值就变成了更改（$('#i1').html = <a>123 </a>）
.val()获取值，类似于.value（注意，只是有value的属性都可以应用）
实例：模态框（添加、编辑等操作）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a> <table border="1">
<tr>
<td>1.1.1.11</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.12</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.13</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.14</td>
<td>80</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td> </tr>
</table> <div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
</div> <div>
<input type="button" value="取消" onclick="cancelModal();" />
</div>
</div> <div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
// 添加
function addElement() {
// 找到这两个class，然后删除之前设置的hide隐藏
$('.modal,.shadow').removeClass('hide');
//因为当用户点击编辑后会遗留垃圾，所以让用户点击添加的时候先清除一下模态框里面的数据
$('.modal input[type="text"]').val('')
}
// 取消
function cancelModal(){
// 找到这两个class，然后添加之前hide隐藏
$('.modal,.shadow').addClass('hide');
// 这里是设置如果用户点击编辑后，我们在点击添加，上次添加进去的数据就会存在，所以当点击添加时，先清除上次的编辑垃圾。
$('.modal,.input[type="text"]').val("");
}
// 需求是（当用户点击编辑时候，把它前面的数据写到弹出框里）
// 找到定义在每个编辑上的edit,并定义事件，再来个匿名函数
$('.edit').click(function(){
// 首先让弹出框（背景框和输入框）这两个显示，去除之前的hide隐藏属性
$('.modal,.shadow').removeClass('hide');
//this代表的是click获得的当前标签
// 然后找到这个标签的父标签的上面所有标签
var tds = $(this).parent().prevAll();
// tds是获得的第1个标签，并获取内容
var port = $(tds[0]).text();
// tds是获得的第2个标签，并获取内容
var host = $(tds[1]).text(); // 找到弹出框，并传入值
$('.modal input[name="hostname"]').val(host);
$('.modal input[name="port"]').val(port); }); </script>
</body>
</html>
样式操作：
addClass
removeClass
toggleClass
实例（开关灯）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" />
<div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script>
<script>
$('#i1').click(function(){
// 方法一：
// if($('.c1').hasClass('hide')){
// $('.c1').removeClass('hide');
// }else{
// $('.c1').addClass('hide');
// }
// 方法二：
$('.c1').toggleClass('hide');
})
</script>
</body>
</html>
属性操作：
一般做自定义属性操作
$('..').attr
$('..').removeAttr('')删除某个属性
$('..').prop
attr（如果有属性，就把属性的值改掉，如果没有该属性名就会新增,注意：jquery1.x和2.x不要使用对checked等做选中的不建议使用attr）:
('#i1')
[input#i1]
$('#i1')[0]
<input id="i1" type="button" value="开关">
$('#i1').attr('type')
"button"
$('#i1').attr('id')
"i1"
$('#i1').attr('value')
"开关"
$('#i1').attr('value',"哈哈")\\这样的话就修改了原来value的值
[input#i1]
$('#i1')[0]
<input id="i1" type="button" value="哈哈">
$('#i1').attr('name',"zhangsan")
[input#i1]
$('#i1')[0]
<input id="i1" type="button" value="哈哈" name="zhangsan">
('#i1').removeAttr('value')
[input#i1]
prop：
$('').prop('checked'）获取值
$('').prop('checked',false)设置值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type='checkbox' id='i2' /> <input id="i1" type="button" value="开关" />
<div class="c1 hide">asdfasdf</div> <script src="jquery-1.12.4.js"></script>
<script>
</script>
</body>
</html> //让标签checkbox不选中
$('#i2').prop('checked',false)
[input#i2] //让标签checkbox选中
$('#i2').prop('checked',true)
[input#i2]
实例（表格编辑增强版）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a> <table border="1">
<tr>
<td target="hostname">1.1.1.11</td>
<td target = "port">80</td>
<td target = "ip">1</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target = "port">80</td>
<td target = "ip">2</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">3</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">4</td>
<td>
<a class="edit">编辑</a> | <a>删除</a>
</td> </tr>
</table> <div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div> <div>
<input type="button" value="取消" onclick="cancelModal();" />
</div>
</div> <div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
// 添加
function addElement() {
// 找到这两个class，然后删除之前设置的hide隐藏
$('.modal,.shadow').removeClass('hide');
}
// 取消
function cancelModal(){
// 找到这两个class，然后添加之前hide隐藏
$('.modal,.shadow').addClass('hide');
// 这里是设置如果用户点击编辑后，我们在点击添加，上次添加进去的数据就会存在，所以当点击添加时，先清除上次的编辑垃圾。
$('.modal,.input[type="text"]').val("");
}
// 需求是（当用户点击编辑时候，把它前面的数据写到弹出框里）
// 找到定义在每个编辑上的edit,并定义事件，再来个匿名函数
$('.edit').click(function(){
// 首先让弹出框（背景框和输入框）这两个显示，去除之前的hide隐藏属性
$('.modal,.shadow').removeClass('hide');
//this
var tds = $(this).parent().prevAll();
tds.each(function(){
//获取td的target属性值
var n = $(this).attr('target');
//获取td标签中的内容（hostname、port、ip）
var text = $(this).text();
//利用input属性named等于hostname、port、ip
var a1 = '.modal input[name="';
var a2 = '"]';
//然后让它们拼接起来。如：.modal样式下的 input框，name等于hostname。因为这样写$(.modal input[name="n")，这样的话n是个字符串，所以我们只能拼接起来，这样你随便增加几列
var temp = a1 + n + a2;
$(temp).val(text)
})
}); </script>
</body>
</html>
示例（下选框）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div> </div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
//给class等于menu定义一个事件，并建立一个匿名函数
$('.menu-item').click(function(){
//点击菜单几就给他应用一个actinve标红的样式，再把它的兄弟标签取出背景为红的样式
$(this).addClass('active').siblings().removeClass('active');
//用attr获取到这个菜单a的值
var target = $(this).attr('a');
//这里又用到里字符串拼接的方法。
//让内容里面属性b的值等于a的值得标签取出hide隐藏属性，再让它的兄弟标签加上隐藏的样式
$('.content').children("[b='"+ target + "']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
.index(索引位置)
示例（下选框增强版）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body> <div style="width: 700px;margin:0 auto"> <div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >内容一</div>
<div class="hide" >内容二</div>
<div class="hide">内容三</div> </div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
文档处理：
append 把某个值追加到最后
prepend 把某个值追加到最上面
after 把某个值加到最后和当前标签的父级标签同级
before 把某个值加到最前面和当前标签的父级标签同级
remove 删除（内容和所属的标签都删）
empty 删除（只删除标签的内容）
clone 克隆
样式操作（css）：
$('').css('color','red')
$('').css('color','red')
示例（点赞）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this);
}); function AddFavor(self) {
// DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1; var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function () {
fontSize = fontSize + 10;
top = top - 10;
right = right - 10;
opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + 'px');
$(tag).css('opacity',opacity);
if(opacity < 0){
clearInterval(obj);
$(tag).remove();
}
}, 40); }
</script> </body>
</html>
位置操作：
scrollTop([val])
scrollLeft([val])
$(window).scrollTop() 获取
$(window).scrollTop(0) 有值就是定位当前标签位置（下拉按钮的位置）
$('#id'').scrollTop()获取当前标签位置
$('#id'').scrollTop(0)设置值（如置顶）
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
postion() 指定标签相对父级标签（relative）标签的坐标
$('#i1').height 获取标签的高度（标签设置的高度（纯高度））
$('.test').height()
200
$('.test').height(true)
[div.test]
$('.test').height(false)
[div.test]
$('#i1').innerHeight() #纯高度+内边距（padding（padding-top加padding-bottom））
$('.test').innerHeight()
200
$('.test').innerHeight(true)
[div.test]
$('.test').innerHeight(false)
[div.test]
$('#i1').outerHeight() #纯高度+上下边框的和+内边距（padding（padding-top加padding-bottom））
$('#i1').outerHeight(true)类似这样的话直接打印id等于1的这个标签
#纯高度，边距，外边距，内边距
事件：
绑定方法一：
$('#i1').click 绑定事件
绑定方法二：
$('#i1').bind('click',function(){
})
解绑
$('#i1').unbind('click',function(){
})
绑定方法三：
例如：class样式c1下的a标签绑定一个事件
$('.c1').delegate('a','click',function(){
})
解绑
$('.c1').delegate('a','click',function(){
})
绑定方法四：
$('.c1').on('click',function(){
})
解绑
$('.c1').off('click',function(){
})
绑定方法三示例：
使用场景：一般在新增标签中，delegate是实时绑定，委托。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" /> <ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
}); // $('ul li').click(function () {
// var v = $(this).text();
// alert(v);
// }) // $('ul li').bind('click',function () {
// var v = $(this).text();
// alert(v);
// }) // $('ul li').on('click', function () {
// var v = $(this).text();
// alert(v);
// }) $('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
}) </script>
</body>
</html>
示例（多个事件判断）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> <a id="i1" href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
//当return为true的话就继续执行href的跳转操作
function ClickOn() {
alert(123);
return true;
}
//当return为flase的话就不执行href的跳转操作
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
示例(表单提交前的验证):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body> <form id="f1" action="http://www.baidu.com" method="POST">
<div><input name="n1" tex = "用户名" type="text" /></div>
<div><input name="n2" tex = "密码" type="password" /></div>
<div><input name="n3" tex = "邮箱" type="text" /></div>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" />
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//当网页框架加载完成后，自动执行操作
$(function(){
// 当页面所有元素完全加载完毕后，执行
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className = "error";
tag.innerHTML = n + "必填";
$(this).after(tag);
// return false;
}
});
return flag; }); }); </script>
</body>
</html>
jQuery扩展：
$.extend $.方法
$.fn.extend $(..).方法
扩展方法一：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1"></div> <script src="jquery-1.12.4.js"></script>
<script src="test1.js"></script>
<script>
var v = $('#i1').zhangsan();
alert(v);
</script>
</body>
</html>
test1.js
/**
* Created by Administrator on 2016/11/30.
*/
$.fn.extend({
"zhangsan": function () {
return 'zhangsan';
}
});
扩展方法二：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div></div> <script src="jquery-1.12.4.js"></script>
<script src="test2.js"></script>
<script>
var v = $.lisi();
alert(v);
</script>
</body>
</html>
test2.js
/**
* Created by Administrator on 2016/11/30.
*/
$.extend({
'lisi': function () {
return 'lisi';
}
});