jquery插件

根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建

第一种方法：
$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + ' My App: ' + message);
}
})
$.log('initializing...'); //调用

image.png

第二种：
基本方法
先看一下它的基本格式：

$.fn.pluginName = function() {
//your code goes here
}
基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

比如我们将页面上所有链接颜色转成红色，则可以这样写这个插件：

$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}
html代码：

• 
  我的微博
  


• 
  我的博客
  


• 
  我的小站
  

这是p标签不是a标签，我不会受影响

下面进一步，在插件代码里处理每个具体的元素，而不是对一个集合进行处理，这样我们就可以针对每个元素进行相应操作。

我们已经知道this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。

比如现在我们要在每个链接显示链接的真实地址，首先通过each遍历所有a标签，然后获取href属性的值再加到链接文本后面。

更改后我们的插件代码为：
$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
this.css('color', 'red');//这里的this是代表的是jq选中的元素，表示的是一个集合
this.each(function() {
//对每个元素进行操作
$(this).append(' ' + $(this).attr('href'));//这里的this代表的是普通的DOM元素，所欲这里要把DOM元素转化为jq对象。$(this)就是jq对象了。
}))
}

这里要穿插进一个术语：链式调用
我们知道jq有一个非常好的特性就是链式调用，也就是我们通常在jquery代码中常用到的类似于这样：$('#div').css('background','#ccc').removeClass('box').stop().animate({width:300})。也就是通过.链接起来的可以直接调用其它的方法。这样的就可以称为链式调用。
其实链式调用主要是通过return this 实现的。
上面的为了不打破链式调用，只需要return $(this).append(' ' + $(this).attr('href')).css('color', 'red');

让插件接收参数
一个强劲的插件是可以让使用者随意定制的，这要求我们提供在编写插件时就要考虑得全面些，尽量提供合适的参数。