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 ...
随机推荐
- Ubuntu14.04配置arm-linux-gcc 4.4.3交叉编译环境
首先下载交叉编译:不多说,直接贴地址了 http://arm9download.cncncn.com/mini2440/linux/arm-linux-gcc-4.4.3-20100728.tar.g ...
- MFC与Qt的内存管理
最近在做MFC向Qt的移植,在内存管理方面遇到了很头疼的问题,虽然不知道问题到底出在哪,先了解下这两个库的内存管理方式.于是转载两篇关于内存管理的文章. 一. Qt内存管理: 在Qt的程序中经常会看到 ...
- 类：初识类的事件（有点不明白，怎么普通Precedure可以赋值给TEvent）
先勾画一下思路:1.建立一个类, 里面有年龄字段 FAge;2.通过 Age 属性读写 FAge;3.如果输入的年龄刚好是 100 岁, 将会激发一个事件, 这个事件我们给它命名为: OnHundre ...
- XmlDocument，XDocument相互转换
XmlDocument,XDocument相互转换 using System; using System.Xml; using System.Xml.Linq; namespace MyTest { ...
- Linux下的摄影后期处理软件
由于喜欢摄影,在LInux上折腾,想找一款能代替lightroom的软件.发现darktable这款软件专业.于是就安装了. 以下是在Linux上安装darktable的instruction,需要添 ...
- 三 ICE开发初级研究
http://www.acejoy.com/bbs/viewthread.php?tid=2878&extra=page%3D1 ICE开发初级研究(一) 最近一段一直在忙于工作,事情比较多, ...
- 基于 Bootstrap 的扁平化 UI 开发包
Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat UI的组件外观设计非常清新和漂亮,Flat UI的组件包含按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块 ...
- C语言中不同类型的循环（Different types of loops in C）
C语言中有三种类型的循环:for,while,do-while. while循环先判断循环条件. while (condition) { //gets executed after condition ...
- POJ22230 Watchcow (欧拉回路)
Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 6477 Accepted: 2823 Specia ...
- Java如何访问Axis2服务端
import javax.xml.namespace.QName; import org.apache.axis2.AxisFault; import org.apache.axis2.address ...