jQuery插件的点点滴滴
说起jQuery插件，很多人的脑海种已经有了一定的雏形，仿佛感觉仅仅就是那样子，事实呢？当你看了Bootstrap.js,品读了slidesjs，观摩了jquery.cycle2.js,不禁发现，原来插件的世界千变万化，细微之处总是不容易让人发觉，世界那么大，那么我们就一起去看看它到底长什么样子？
工欲善其事必先利其器，如果你对于jQuery插件运用熟练的话，那么对已$.extend,你一定要去了解！，下面我们就先对$.extend来个剖析！先看看你对于$.extend的几种形式！
一、$.extend的用法
$.extend(dest,src1,src2,src3...)
$.extend({},src1,src2,src3...)
$.extend({name：function(){}})
$.fn.extend({name:function(){}})
$.extend({net:{}})
$.extend({boolean,dest,src1,src2,src3...})
$.extend(dest,src1,src2,src3...)
将src1,src2,src3...合并到dest中,请记住合并时，后面同名的属性会覆盖掉前面的属性，对于前面没有的属性，难就进行合并，如下：
<script type="text/javascript">
$(function() {
var obj = {
name: "yyh",
age: 26
},
obj1 = {
name: "yyh1",
age: 27
},
obj2 = {
name: "yyh2",
age: 27,
address:"chitu"
}
var mergeObj = $.extend(obj,obj1,obj2);
console.log(mergeObj)//{name: "yyh2", age: 27, address: "chitu"}
})
</script>
$.extend({},src1,src2,src3...)
这个和上面的是一样的，不同只是把dest={}，把src1,src2,src3合并到一个空对象中，原理同上，不在赘述！
$.extend({name：function(){}})
看到这个东西，你可以这么认为，这是相当于$.extend(dest,src1) 中省略了dest后变成了$.extend(src1)，这样子就相当于将该src合并到调用extend方法的对象中去，也就是将src合并到jquery的全局对象中去！举个例子，我们给jquery全局对象拓展一个是否支持CSS3的方法supportCSS3:
<script type="text/javascript">
$(function() {
$.extend({
supportCSS3: function() {
var body, i, style, transition, vendor;
body = document.body || document.documentElement;
style = body.style;
transition = "transition";
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
i = 0;
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
}
})
if($.supportCSS3){
alert("该浏览器支持css33");
}
})
</script>
所以像$.get,$post,$.ajax就是jquery全局对象的方法！
$.fn.extend({name:function(){}})
和上面的$.extend相比，如果对于js的原型对象有了解，你肯定可以知道$.fn=jQuery.prototype,也就是说这种方式是把方法拓展到jquery对象的实例中，同样来个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
</head>
<body>
<button id="btn1">点击</button>
<script type="text/javascript">
$(function() {
$.fn.extend({
say: function() {
alert("我是丑男孩");
return this;//为什么加this，jquery的链式写法，你懂的！
}
});
$("#btn1").on("click",function(){
$(this).say().hide();
}) })
</script>
</body>
</html>
$.extend({net:{}})
顾名思义，这个事在全局对象中扩展一个net命名空间，理解方式可以$.extend({name：function(){}}) 相似的。作用是干嘛？很简单假设团队有多个人，你担心推展到全局对象中会产生冲突，那么就自己独立建一个属于自己的空间，这样妈妈就在也不用担心儿子程序和别人冲突了！来个例子(如何来读取拓展的属性)：
<script type="text/javascript">
$(function() {
$.extend({
yyh: {
age: 26,
address: "chitu",
supportCSS3: function() {
var body, i, style, transition, vendor;
body = document.body || document.documentElement;
style = body.style;
transition = "transition";
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
i = 0;
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
} }
});
//读取对应的属性
if($.yyh.supportCSS3){
alert("浏览器支持css3");
}
console.log($.yyh.age);
console.log($.yyh.address);
})
</script>
$.extend(boolean,dest,src1,src2,src3...)
这中方式，通过boolean，来决定是否深度拷贝！这种方式想必你在很多场合也见过了,boolean默认的是false，可以省略！至于为什么这样做呢？来个例子就豁然开朗了！
<script type="text/javascript">
$(function() {
var obj = {
name:{
nickname:"丑男孩",//外号
truename:"yyh",//真是姓名
},
age: 26
},
obj1 = {
name:{
nickname:"小男孩",//外号
truename:"yyh1",//真是姓名
},
age:25
},
obj2 = {
name:{
nickname:"老男孩",//外号
username:"uglyboy"
},
age: 27
}
var mergeObj1 = $.extend(true,obj,obj1,obj2);
//mergeObj1={name:{nickname: "老男孩",truename: "yyh1",username: "uglyboy",age: 27}}
var mergeObj2 = $.extend(false,obj,obj1,obj2);
//mergeObj2={name:{nickname: "老男孩",username: "uglyboy",age: 27}}
})
</script>
看完上面的例子的时候，你就知道如果false的时候，后面添加的对象的obj2中没有属性truename，合并后对象就不会有truename这个属性，所以写插件的时候会在里面看到如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
</head> <body>
<script type="text/javascript">
;(function($){
$.fn.Plugin=function(options){
//如果defaults是下面的形式，这里大可以不加boolean
var defaults={
property1:"value1",
property2:"value2",
property3:"value3",
method1:function(){},
method2:function(){},
};
var opt=$.extend(defaults,options);
}
})(jQuery) ;(function($){
$.fn.Plugin=function(options){
//如果defaults是下面的形式，亲，记得加上boolean，不然传递参数可麻烦了！
var defaults={
property1:{
property11:"value11",
property12:"value12",
},
property2:{
property21:"value21",
property22:"value22",
},
property3:{
property31:"value31",
property32:"value32",
},
method1:function(){},
method2:function(){},
}; var opt=$.extend(true,defaults,options);
}
})(jQuery) </script>
</body> </html>
二、jquery插件的几种形式
1、传统的插件写法，defaut没有暴露出来供外部调用(这个应该我们写插件很常用的一种方式),下面是单个实例的时候
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.Tab = function(options) {
var defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
};
var opts = $.extend(defaults, options),
$hdItems=this.find(opts.hdClass),
$bdItems=this.find(opts.bdClass);
$hdItems.each(function(index, el) {
var $this=$(this);
$this.on("click",function(){
$this.addClass('oncurr').siblings().removeClass('oncurr');
$bdItems.eq(index).show().siblings().hide();
})
});
//如果想要支持链式写法,在这里请添加return this;
}
})(jQuery);
$(function() {
$("#J_tab-parent").Tab();
})
</script>
</body>
</html>
多个实例的时候
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div> <div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.Tab = function(options) {
var defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
};
var opts = $.extend(defaults, options);
return this.each(function(index, el) {
var $hdItems=$(this).find(opts.hdClass),
$bdItems=$(this).find(opts.bdClass);
$hdItems.each(function(index, el) {
var $this=$(this);
$this.on("click",function(){
$this.addClass('oncurr').siblings().removeClass('oncurr');
$bdItems.eq(index).show().siblings().hide();
})
});
}); }
})(jQuery);
$(function() {
$(".tab-parent").Tab();
})
</script>
</body>
</html>
2、default写成$.fn.default暴露出来供外部调用(这种方式的插件写法是很经常遇到的,比如jquery.cycle2.js),这个时候你应该会联想到$.fn.format在插件中的用法，这样的好处是可以让用户自定义自己的操作行为，而不用每次实例的时候都去传递同样的阐述，如下的例子：
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item-1 oncurr">选项卡1</li>
<li class="tab-hd-item-1">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item-1">选项卡1对应的内容</div>
<div class="tab-bd-item-1 undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.Tab = function(options) {
var opts = $.extend($.fn.Tab.defaults, options);
return this.each(function(index, el) {
var $hdItems = $(this).find(opts.hdClass),
$bdItems = $(this).find(opts.bdClass);
$hdItems.each(function(index, el) {
var $this = $(this);
$this.on("click", function() {
$(this).html($.fn.Tab.format($(this).text()));
$this.addClass('oncurr').siblings().removeClass('oncurr');
$bdItems.eq(index).show().siblings().hide();
})
});
});
}
$.fn.Tab.defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
};
$.fn.Tab.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
})(jQuery);
$(function() {
$.fn.Tab.defaults = {
hdClass: '.tab-hd-item-1',
bdClass: '.tab-bd-item-1'
};
$(".tab-parent").Tab();
})
</script>
</body> </html>
3、通过data的方式来实现jquery插件的写法(参考bootstrap.js,slidesjs)
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
;(function($, window, document, undefined) {
var pluginName = 'Tab',
defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
}; function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function() {
this.$hdItems = $(this.element).find(".tab-hd-item");
this.$bdItems = $(this.element).find(this.options.bdClass);
var _this = this;
this.$hdItems.each(function(index, el) {
var $this = $(this);
$this.on("click", function() {
$this.addClass('oncurr').siblings().removeClass('oncurr');
_this.$bdItems.eq(index).show().siblings().hide();
})
});
}
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, 'plugin_' + pluginName)) {
return $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
})
} })(jQuery, window, document); $(function() {
$("#J_tab-parent").Tab()
})
</script>
</body> </html>
基本的插件形式就这这三种，当然我们依然可以找到其他的方式的插件，比如私有方法的放置，还有像bootstrap.js的框架的细微的变形，万变不离其中，只要了解基本的方法，其他的都可以依葫芦画瓢！
jQuery插件的点点滴滴的更多相关文章
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- 教你开发jQuery插件（转）
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- jquery插件扩展的学习
jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...
随机推荐
- 浅谈Linux系统的启动流程
Linux系统的启动时通过读取不同的配置文件,执行相应的Shell脚本完成的.当然本文只是简单的从文件的角度分析,更深层次的本文没涉及. 主要读取了以下文件: /boot/grub/grub.con ...
- 表单提交---前端页面模拟表单提交(form)
有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认 ...
- 基于cygwin构建u-boot（二）gcc的C语言标准版本号（-std=）
接上文,修改Makefile和config.mk中,.depend相关文件格式后继续编译. 四.tools文件夹的文件编译错误 错误告警如下[多行信息,请使用右侧滚动条查看]: gcc -Wall - ...
- static的用法解析
PHP中static变量的使用范围要更广一些,我们不仅可以在类,方法或变量前面添加static修饰符,我们甚至还能给函数内部变量添加static关键字.添加了static修饰符的变量即使在该函数执行完 ...
- 【iOS开发】collectionView 瀑布流实现
一.效果展示 二.思路分析 1> 布局的基本流程 当设置好collectionView的布局方式之后(UICollectionViewFlowLayout),当系统开始布局的时候,会调用 pre ...
- window7下statsvn统计代码量
下载statsvn:http://www.statsvn.org/ 将下载后的statsvn.jar放到d:\svn目录下; 打开cmd窗口切换到需要统计代码的项目目录如:d:\project\web ...
- PHP中output control
Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况.输出控制函数不对使用 header() 或 setcookie ...
- Eclipse使用git最简易流程
git有诸多好处,网上都说的很清楚了,在这里我不再赘述.对于我来说,私下里想做一些项目,而又不能很好的保存自己的代码和进行版本控制,这时候,就用到了git.下面,就以我个人为例讲讲git从0开始如何安 ...
- 【图解ASP.NET MVC运行机制理解-简易版】
很多盆友咨询ASP.NET MVC的机制.网上也有好多.但是都是相当深奥.看的云里雾里的.我今天抽空,整理个简易版本.把处理流程走一遍. 当然,这个只是处理请求的一部分环节.百度的面试题“客户端从浏览 ...
- 【剑指offer】面试题20：顺时针打印矩阵
题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...