自己动手写一个JQuery插件(第一篇)(转)

1. 前言

从现在开始,我们将一步一步学习怎么写一个jQuery插件,编写jQuery插件不是难的事情(当然这取决于你编写的这个插件的复杂程度,比如我们将要写的这些,就是一些很简单的例子),jQuery插件有两种形式.

$的工具函数
操作dom包装集合的方法.
我们这里是针对第二种方式来写一个jQuery高亮的插件-highlight,虽然很简单哈.不过为了显示出我们比较牛逼,我们名字得起得专业一点.

2. 第一步.让我们的插件更加安全

(function($){

//代码都写在这里哈
})(jQuery)
上面的这段代码,你可以把他理解成写插件的固定模式.就好像是我们小时候写作文的时候.开头一定是.今天天气很好…我看到了…之类的,然后中间的内容是们需要去填充的东东. 为什么要这么做呢?通俗点说.这样能给我们的插件提供一个更加安全的密封环境.这个就好像一个保护罩一样.避免外部敌人的侵入,在后面,我们将要比较没有保护罩的时候.会出出 现哪些不可预期的后果.

3. 第二步.扩展JQuery的原型方法

我们在我们的保护罩里面构建我们的插件的主要结构.

(function($){
$.fn.highlight = function(){
//具体实现
}
})(jQuery)

$.fn这个东西是什么?如果你对js有些了解的话,你应该就认识原型这个东西了.$.fn是$.prototype的别名,他们是同一个,只是名字不一样而已.$.fn.highlight这个就好像说.好吧, 虽然你已经很强大了,可是我还是需要你的身上在搞出点东西来满足我的需求,当你这样做的时候.你会发现你的所有被$包装过的dom对象都会多出一个hihlight方法.用console.dir试试看? 这里我们还要注意一个问题,就是this上下文,就你目前看到的,这个this指向的是包装过的对象集,可是如果你是在each中,也是使用this,那么它指向的却是Dom,接着我们来修改一下这个代码.记不记得你当时喜欢jQuery的原因,链式写法,是的.当时就是这样,上面的代码并不能支持链式写法.所以我们要把代码改成这样

(function($){
$.fn.highlight = function(){
return this//具体实现
}
})(jQuery)
很简单吧,仅仅是多了一个return,可是,就是这个return,让我们的插件也能享受链式操作的好处.

4. 第三步.完成一个简单的可用插件

好了,我想我们已经说得太多了,你心里一定在想,靠,这是什么鸟教程啊.到现在都不能搞出一个功能出来.好吧.我们现在马上来把这个东西给搞成可以用的.也就是你的第一个插件

(function($){
$.fn.highlight = function(){
return this.css(background,lightblue);
}
})(jQuery)

这样你的第一个插件就完成了,试试看效果吧,这里我们导入了jQuery库,也导入我们自己的插件.

现在是不是看到效果了?那些被选中的li都变成了浅蓝色,这就是你的第一个插件,很容易吧.接着我们继续来完善它,首先,这个插件有个缺点.颜色是固定的.只能是浅蓝色,好吧.我们这就给 它一个参数,让它自由的选择颜色

(function($){
$.fn.highlight = function(color){
return this.css("background",color);
}
})(jQuery)

这样我们就可以在调用这个函数的时候传入参数了 $("li").highlight("#FF0000");这样就更加的灵活了