jQuery基础语法
一、jQuer介绍及安装
1、jQuery介绍
-
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架),极大简化了JavaScript 编程。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
-
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2、jQuery使用
下载地址:https://code.jquery.com/
压缩版:https://code.jquery.com/jquery-1.12.4.min.js
正常版:https://code.jquery.com/jquery-1.12.4.js
jquery操作文档:http://jquery.cuishifeng.cn/
这里我们使用正常版来做实验(方便查看),压缩版的适用于生产,版本使用1.12版本兼容之前版本浏览器。
(1)把jquery-1.12.4.js
复制到同级目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">dream</div>
<script src="jquery-1.12.4.js"></script>
<script>
//jQuery('#1');或者下面那种调用方法
$('#1');
</script>
</body>
</html>
(2)转换
jquery对象[0] ===>> Dom对象
$(Dom对象) ===>> jquery对象
二、查找元素
1、基本选择器
$('#id') ###查找id
$('.class') ###查找class
$('element') ###查找所有指定标签
$('*') ###查找所有
$('a,p,...') ###查找多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" class="c1">
<a>1</a>
<a>1</a>
</div>
<div class="c1">
<a>1</a>
</div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
2、层级选择器
$('#i1 a') ###获取id为i1下面的所有a标签
$('#i1>a') ###父子,只会一层
3、基本筛选器
(1)命令说明
$('li:first'); ###找出第一个
$('li:last'); ###找出最后一个
$('tr:eq(index)'); ###通过index查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
(2)层级和first叠加使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<div>
<a>2</a>
</div>
<a>1</a> //找出这个
<a>1</a>
<a>1</a>
</div>
<script src="jquery-1.12.4.js"></script>
</body>
</html>
$('.c1>a:first') ###我们可以进行叠加使用
4、属性
$('[attribute]') ###具有attribute属性的所有标签
$('[attribute="value"]') ###attribute属性等于value的标签
5、选择实例
$('#tb :checkbox').prop('checked'); ###获取值
$('#tb :checkbox').prop('checked',true); ###设置值
jQuery内置循环:$('#tb :checkbox').xxx
$('#tb :checkbox').each(function(k){
//k当前索引值
//this,DOM,当前循环得元素 $(this)
})
三元运算:var v = 条件? 真值:假值
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();" />
<input type="button" value="取消" onclick="Cancel();"/>
<input type="button" value="反选" onclick="Reverse();" />
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type='checkbox'/></td>
<td>dream</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td><input type='checkbox'/></td>
<td>dream1</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td><input type='checkbox'/></td>
<td>dream2</td>
<td>男</td>
<td>22</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckAll() {
$('#tb :checkbox').prop('checked',true);
}
function Cancel() {
$('#tb :checkbox').prop('checked',false);
}
function Reverse() {
$('#tb :checkbox').each(function () {
//还可以通过this.checked判断
//this当前循环得每个元素
//三元运算 var v = 条件? 真值:假值;
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
6、样式操作
$(#id).addClass('hide') ###添加class
$(#id).removeClass('hide') ###删除class
$(#id).toggleClass('hide') ###对设置或移除被选元素的一个或多个类进行切换
开关:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id='i1' type="button" value="开关" />
<div class="c1 hide">dreamya</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>
三、筛选器
1、查找
$(this).next() ###下一个
$(this).nextAll() ###所有下面的
$(this).nextUntil(#id) ###找到所有下面到id为止
$(this).prev() ###上一个
$(this).prevAll() ###所有上面的
$(this).prevUntil(#id) ###找到所有上面到id为止
$(this).parent() ###父
$(this).parents() ###祖先
$(this).parentsUntil() ###直到那个祖先
$(this). siblings() ###兄弟
$(#id).find(#id1) ###查找所有id下面的的id1标签
2、过滤
$(this).eq(index|-index) ###选择器选取带有指定index值的元素
$(this).first() ###选择器选取第一个元素
$(this).last() ###选择器选取最后一个元素
$(this).hasClass(class) ###检查被选元素是否包含指定的class
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: #0c0c0c;
color: #9cc2cb;
height: 40px;
line-height: 40px;
width:80px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="item">
<div class="header">目录一</div>
<div class="content">内容一</div>
<div class="content">内容一</div>
</div>
<div class="item">
<div class="header">目录二</div>
<div class="content hide">内容二</div>
<div class="content hide">内容二</div>
</div>
<div class="item">
<div class="header">目录三</div>
<div class="content hide">内容三</div>
<div class="content hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
//可以合并成(链式编程):$(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');
$(this).nextAll().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
文档操作:
$(#id).text() ###获取文本内容
$(#id).text("<a>1</a>") ###设置文本内容
$(#id).html() ###获取html内容
$(#id).html("<a>1</a>") ###设置文本内容
Dom中有value:
$(#id).val() ###查询值
$(#id).val("1") ###设置值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.frame {
position: fixed;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
background-color: #0f9e60;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0.7;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>dream</td>
<td>男</td>
<td>20</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td>DM</td>
<td>男</td>
<td>21</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td>dreamya</td>
<td>男</td>
<td>22</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
</tbody>
</table>
<div class="frame hide">
<span>姓名:</span>
<input name="username" type="text" />
<br/>
<span>性别:</span>
<input name="gender" type="text" />
<br/>
<span>年龄:</span>
<input name="age" type="text" />
<input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.edit').click(function () {
//删除hide
$('.shadow,.frame').removeClass('hide');
})
//添加hide和赋值
$('#tb .edit').click(function () {
$('.shadow,.frame').removeClass('hide');
var tds = $(this).parent().prevAll();
//进行赋值
var username = $(tds[2]).text();
var gender = $(tds[1]).text()
var age = $(tds[0]).text();
$('.frame input[name="username"]').val(username);
$('.frame input[name="gender"]').val(gender);
$('.frame input[name="age"]').val(age);
});
//删除hide
$('.frame input[name="cancle"]').click(function () {
$('.shadow,.frame').addClass('hide');
//清除原有的值,防止显示错乱
$('.frame input[type="text"]').val('');
})
</script>
</body>
</html>
四、属性操作
1、用于自定义属性
$(#id).attr(key) ###获取属性
$(#id).attr(key,value) ###设置属性,可以
$(#id).removeattr(key) ###删除属性
2、专用于checkbox,radio
$(#id).prop('checked') ####获取值
$(#id).prop('checked',true) ###设置值
我们通过属性操作对上面文本操作的示例进行优化,下面的方法进行赋值,我们只需要修改Table内容就行,不需要对js进行修改!!!
3、示例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.frame {
position: fixed;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
background-color: #0f9e60;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity:0.7;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<input type="button" value="添加" class="edit"/>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td target="username">dream</td>
<td target="gender">男</td>
<td target="age">20</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td target="username">DM</td>
<td target="gender">男</td>
<td target="age">21</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
<tr>
<td target="username">dreamya</td>
<td target="gender">男</td>
<td target="age">22</td>
<td><a class="edit">修改</a></td>
<td><a class="del">-</a></td>
</tr>
</tbody>
</table>
<div class="frame hide">
<span>姓名:</span>
<input name="username" type="text" />
<br/>
<span>性别:</span>
<input name="gender" type="text" />
<br/>
<span>年龄:</span>
<input name="age" type="text" />
<input name='cancle' type="button" value="取消">
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.edit').click(function () {
//删除hide
$('.shadow,.frame').removeClass('hide');
})
//添加hide和赋值
$('#tb .edit').click(function () {
$('.shadow,.frame').removeClass('hide');
var tds = $(this).parent().prevAll();
//进行赋值
$(tds).each(function () {
//获取当前自定义target属性值
var n = $(this).attr('target');
//获取当前文本内容
var text = $(this).text();
var temp = '.frame input[name="' + n + '"]';
$(temp).val(text);
})
// var username = $(tds[2]).text();
// var gender = $(tds[1]).text()
// var age = $(tds[0]).text();
// $('.frame input[name="username"]').val(username);
// $('.frame input[name="gender"]').val(gender);
// $('.frame input[name="age"]').val(age);
});
//删除hide
$('.frame input[name="cancle"]').click(function () {
$('.shadow,.frame').addClass('hide');
//清除原有的值,防止显示错乱
$('.frame input[type="text"]').val('');
})
</script>
</body>
</html>
4、菜单切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.active{
color: burlywood;
background-color: #001F3F;
}
.menu{
height: 38px;
background-color: #0c0c0c;
color: #9cc2cb;
line-height: 38px;
cursor: pointer;
}
.menu .menu-item{
float: left;
border-right: 1px solid rebeccapurple;
padding: 0 10px;
}
.content{
min-height: 200px;
border: 1px solid burlywood;
}
</style>
</head>
<body>
<div style="width: 500px; 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>
$('.menu .menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var n = $(this).attr('a');
$('.content ').children('[b="' + n + '"]').removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
5、通过index实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.active{
color: burlywood;
background-color: #001F3F;
}
.menu{
height: 38px;
background-color: #0c0c0c;
color: #9cc2cb;
line-height: 38px;
cursor: pointer;
}
.menu .menu-item{
float: left;
border-right: 1px solid rebeccapurple;
padding: 0 10px;
}
.content{
min-height: 200px;
border: 1px solid burlywood;
}
</style>
</head>
<body>
<div style="width: 500px; 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 .menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
// $(this).index();
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
</html>
五、文档处理
1、内部插入
append
prepend
2、外部插入
after
before
3、删除
remove
empty
4、复制
clone
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="1" type="text">
<input id="2" type="button" value="添加">
<input id="3" type="button" value="删除">
<input id="4" type="button" value="复制">
<ul id="ul">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
//添加
$('#2').click(function () {
var n = $('#1').val();
var temp = "<li>" + n + "</li>";
//我们可以把这个append修改为prepend、after、before来做测试
$('ul').append(temp);
})
//删除
$('#3').click(function () {
var index = $('#1').val();
//删除当前index
$('#ul li').eq(index).remove();
//清空value值设置为空
//$('#ul li').eq(index).empty();
})
//复制,通过index进行复制
$('#4').click(function () {
var index = $('#1').val();
var v = $('#ul li').eq(index).clone();
$('ul').append(v);
})
</script>
</body>
</html>
六、CSS处理
1、CSS
$(#id).css('样式名称','样式值')
eg.点赞:
点赞效果:
- $(#id).append()
- $(#id).remove()
- setInterval
- 透明度:1 --->> 0
- position
- 字体大小,位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding:50px;
border: 1px solid bisque;
}
.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>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
Add(this);
});
function Add(self) {
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
//Dom对象,设置css属性
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + 'px');
$(tag).css('top',top + 'px');
$(tag).css('right',right + 'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize + 5;
top = top - 10;
right = right - 10;
opacity = opacity - 0.2;
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('positon','absolute');
$(tag).css('fontSize',fontSize + 'px');
$(tag).css('top',top + 'px');
$(tag).css('right',right + 'px');
$(tag).css('opacity',opacity);
if (opacity < 0 ){
clearInterval(obj);
$(tag).remove();
}
},100)
}
</script>
</body>
</html>
2、位置
$(window).scrollTop() ###获取值
$(window).scrollTop(value) ###设置值
scrollLeft([val])
offset().top ###指定标签在html中的坐标
offset().left ###指定标签在html中的坐标
position() ###指定标签相对父标签(relative)标签的坐标
3、尺寸
$(#id).height() ###获取标签的高度 纯高度
$(#id).innerHeight() ###获取标签边框+纯高度
$(#id).outerHeight() ###获取标签边框+纯高度
$(#id).outerHeight(true) ###获取标签边框+纯高度
七、事件
1、事件绑定(三种)
$('.c1').click()
### 被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
$('.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(){
})
eg.
<!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>
2、阻止事件发生
(1)说明
return false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="return clickOn();" href="http://www.baidu.com">百度</a>
<a id="1" href="http://taobao.com">淘宝</a>
<script src="jquery-1.12.4.js"></script>
<script>
//Dom方法
function clickOn() {
alert(1);
//改成false的话就不会跳转
return true;
}
//jQuery方法
$('1').click(function () {
alert(2);
return false;
})
</script>
</body>
</html>
(2)示例(表单验证)
简单写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这里随便指定的地址就行-->
<form action="1.html" method="post">
<input type="text" />
<input type="submit" value="提交" />
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
var v = $(this).prev().val();
if(v.length > 0){
return true;
}else {
alert('请输入内容');
return false;
}
})
</script>
</form>
</body>
</html>
升级:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<!--这里随便指定的地址就行-->
<form id="1" action="1.html" method="post">
<div><input name="n1" type="text" /></div>
<div><input name="n2" type="password" /></div>
<div><input name="n3" type="text" /></div>
<div><input name="n4" type="text" /></div>
<input type="submit" value="提交" />
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
var flag = true;
$('.error').remove();
$('#1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
flag = false;
var tag = document.createElement('span');
tag.className = 'error';
tag.innerText = " *";
$(this).after(tag);
}
})
return flag;
})
</script>
</form>
</body>
</html>
八、当页面框架加载完成之后,自动执行
1、说明
$(function(){
$(...)
})
2、之前代码修改后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<!--这里随便指定的地址就行-->
<form id="1" action="1.html" method="post">
<div><input name="n1" type="text" /></div>
<div><input name="n2" type="password" /></div>
<div><input name="n3" type="text" /></div>
<div><input name="n4" type="text" /></div>
<input type="submit" value="提交" />
<script src="jquery-1.12.4.js"></script>
<script>
//当页面框架加载完后,自动执行,比如我们的图片
$(function(){
$(':submit').click(function () {
var flag = true;
$('.error').remove();
$('#1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <=0){
flag = false;
var tag = document.createElement('span');
tag.className = 'error';
tag.innerText = " *";
$(this).after(tag);
}
})
return flag;
})
})
</script>
</form>
</body>
</html>
九、jQuery扩展
1、说明
- $.extend $.方法
- $.fn.extend $(..).方法
### 写入单独文件中
(function(){
var status = 1;
// 封装变量
})(jQuery)
2、二种写法
(1)方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
$.extend({
'dream': function () {
return 'dream';
}
})
var v = $.dream();
alert(v);
</script>
</body>
</html>
(2)方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
// $.extend({
// 'dream': function () {
// return 'dream';
// }
// })
// var v = $.dream();
// alert(v);
$.fn.extend({
'dreamya':function () {
return 'dreamya';
}
})
var n = $('#1').dreamya();
alert(n);
</script>
</body>
</html>
3、单独文件
(1)同级目录建立plugin.js
(function (arg) {
var status = 1;
arg.extend({
'dream': function () {
return 'dream';
}
})
})(jQuery); //jQuery也可以写$
(2)调用plugin.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="plugin.js"></script>
<script>
var v = $.dream();
alert(v);
</script>
</body>
</html>
本文地址:https://blog.csdn.net/Dream_ya/article/details/85623243
上一篇: 历史上沈万三是什么人?面对朱元璋的刁难他是如何保命的
下一篇: 当年丢的圆规