JS杂谈系列-jquery-插件开发小记
//=======================start
(function ($) {
//扩展 必须
$.fn.extend({
//插件名称 必须
colh: function (options) {
//默认参数 (放在插件外面，避免每次调用插件都调用一次，节省内存)
var defaults = {one: '#faa',two: '#ccc'};
//覆盖默认参数 必须
var opts = $.extend(defaults, options);
//主函数
return this.each(function () {
//激活事件
//操作对象
var obj = $(this);
//执行效果
obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);
});
}
});
})(jQuery);
//=================end
上面是隔行换色的jq插件，一个最简单的插件实例，我们创建一个jqex.js文件，粘贴上面代码
我们新建一个demo.html页面，引入jquery类库和上面保存好的jqex.js文件，运行可见效果
静态html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="jqex.js"></script>
<script type="text/javascript">
$(function(){
//start
//调用插件，改变奇偶颜色 赋值
$(".a1").colh({ one:'#114245',two:'#afe365'});
$(".a2").colh({ one:'#ffc',two:'#ccc'});
//end
})
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%;}
table{ margin:50px;}</style>
</head>
<body>
<table width="100%" cellspacing="1" class="a1">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
<table width="100%" cellspacing="1" class="a2">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
<table width="100%" cellspacing="1" class="a2">
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
<tr><td>123</td><td>123</td><td>123</td></tr>
</table>
</body>
</html>
如上代码，执行demo，其中script中的 $(".a1").colh({ one:'#114245',two:'#afe365'}); 是调用插件
我们可以看见.a1的奇偶采用颜色是one:'#114245',two:'#afe365'
.a2的奇偶采用颜色是 one:'#ffc',two:'#ccc'
比对调用插件的代码发现实现了索要效果，只要把参数的one和two进行改变就实现了不用部分的隔行换色，我们来分析原理
//============================
(function ($) {
})(jQuery);
封装插件的最外层，一个立即执行的匿名函数，传入了一个jquery，我们先解释的jquery是什么
他就是 $("div").hide()中的$,$其实是jquery的简写，
而jquery是一个方法，简单比喻写成jquery=function(){} ，而且这个方法是一个构造方法，俗称就是类，jq是js的类库，名字合理解释了
这句代码的意思：闭包下，执行函数，传入jquery类
//============================
$.fn.extend({
});
下一层结构，其实$==jquery,不要迷糊
fn是什么，他就是prototype的简写，原型属性，用于给构造函数（类）添加共享的属性和方法，用于new的实例的调用中
prototype属性，任何的方法都会有这个属性
extend就是jq自己写的添加插件扩展方法，原理代码略，结构固定
这句代码的意思就是：给jquery类new出的实例添加扩展方法
//============================
//插件名称 必须
colh: function (options) {
}
第三层，定义一个插件，插件的名称是colh，自定义的，叫阿猫阿狗随意
意思：我要写一个自定义名称的插件了（其实是一个方法），这部分名称随意
当然我可以添加多个，多个的写法就是
colh: function (options) {
}，
colh1: function (options) {
}
自己写几个就是造几个，逗号隔开，最后一个不要写逗号
//============================
var defaults = {one: '#faa',two: '#ccc'};
var opts = $.extend(defaults, options);
这次是关键代码了，也是你自己要写的
var defaults = {one: '#faa',two: '#ccc'}; 定义一个object类型的内容，作为默认采用值，我们在调用插件这样写
$(".a1").colh(); 调用时没有写参数，那么采用的就是我们 defaults 的数值，表格奇偶颜色就是
one: '#faa',two: '#ccc' 可以试一试，这个的主要做用就是不传参数下，也添加一个最通用的效果
var opts = $.extend(defaults, options); 这个里面$.extend(）的作用就是键值融合，我们举几个例子
var a={aa:1111,bb:2222},var b={bb:3333},var c={dd:4444},
$.extend(a,b）=>{aa:1111,bb:3333}
$.extend(a,c）=>{aa:1111,bb:2222,dd:4444}
方法理解就是，我会把前后的obj参数的全部键提出来，放在一个新obj类型里面，然后对出现同样键，第二个obj中键值会替换第一个obj的键值
$.extend(a,b） 提出所有键：aa和bb，第二个和第一个同样有bb键，第二个的bb键对应键值“3333”替换第一个的bb键值“2222”最后返回 {aa:1111,bb:3333}
$.extend(）的另一个用处就是添加工具扩展，下面介绍
//============================
return this.each(function () {
var obj = $(this);
obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);
});
这就是核心代码了
js中this上下文指针
$(".a1").colh({ one:'#114245',two:'#afe365'}); this指向 $(".a1")
$(".a2").colh({ one:'#ffc',two:'#ccc'}); this指向 $(".a2") 有2个，当前页面
我们发现一个页面会出现多个同类名内容，这时候就是jq的 each() 发挥作用了，
他会遍历方法前面所有实例，并且在回调函数中，遍历到的每一个存放在$(this)
这样我们就可以实现通同类名对象，多实例的实现了
$(this)代表每一个实例，当前就是代表
$(".a1").colh({ one:'#114245',two:'#afe365'}); 中的$(".a1")、
$(".a2").colh({ one:'#ffc',two:'#ccc'}); 中的$(".a2")[0]、$(".a2")[1]
加上下面css设置obj.find('tr:even').css('background',opts.one);
obj.find('tr:odd').css('background',opts.two);
3个表格都实现了隔行换色
查找下面的奇偶，用伪类选择器
//============================
//============================
写一个tab切换插件
第一步 最外层
(function ($) {
})(jQuery);
第二步 第二层
(function ($) {
$.fn.extend({
});
})(jQuery);
第三步 第三层
(function ($) {
$.fn.extend({
tab: function () {
}
});
})(jQuery);
上面三步的代码几乎固定的，复制就好，除了插件名称
第四步 创建一个tab插件 插件全部代码
(function ($) {
$.fn.extend({
tab:function(){
return this.each(function () {
var obj = $(this);
obj.find(".tabnav").children().click(function(){
obj.find(".tabbox").children().eq($(this).index()).show().siblings().hide();
});
});
}
});
})(jQuery);
tab插件已经完成了，下面是html代码
<div class="tab1" style="height:400px; width:400px; background:#F93"> <div class="tabnav" style="height:50px; line-height:50px;"> <span>111</span> <span>222</span> <span>333</span> </div> <div class="tabbox" style="height:350px; background:#F9C;"> <div>111111</div> <div style="display:none;">22222222222</div> <div style="display:none;">33333333</div> </div> </div>
调用插件代码
$(".tab1").tab();
发现一个tab切换也被封装为插件了，下一步你可以封装更复杂的，如：焦点图、带动画的tab切换等
//===========================================
//===========================================
//===========================================
插件开发已经差不多了，我们会发现，jq里面有这样一些方法，如此调用
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jq提供的 inArray()方法,调用$.inArray(4, arr);实现方法处理，返回结果
jq的工具更定不能满足所有人，我们也会希望对某个项目添加很多基于jq的工具，也是$.fun()去调用
开始吧！这个封装方法就是
$.extend({key:fun,key2:fun2}); 我们很眼熟，上面对象类型合并就是他，他另一个用途就是添加工具扩展，基于类，这个类就是jquery
他的原理就是jquery.hanfun1=function(){}，给jquery的方法名直接.一个属性
其实function的原型就是object类型，可以.添加属性和方法就可以理解了，这属于静态方法，静态就是通过jquery.hanfun1去调用，不用new实例去调用，解释完毕，看代码
工具开发jq代码 获取数组最大值
(function ($) {
$.extend({
han1:function(arr){
return Math.max.apply(null,arr)
}
});
})(jQuery);
调用工具js代码
var arr=[45,897,548,789]; alert($.han1(arr));
会输出 897
完毕了！