jQuery插件的写法

小咪咪 2022-08-08 05:14 233阅读 0赞

1、概述

先看看html代码

<ul id="catagory"> <li><a href="#">jQuery</a></li> <li><a href="#">Asp.net</a></li> <li><a href="#">Sql Server</a></li> <li><a href="#">CSS</a></li> </ul>

比如我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a位置恢复。实现方法如下：

$(document).ready(function() { $("#catagory a").hover(function() { $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); }, function() { $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 }); }); });

现在我们将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，现在我们来看看jQuery插件的写法。

2、jQuery插件的结构

下边这个结构应该是编写jQuery插件的一个比较好的结构，我将原作者的一些注释进行了相应的翻译。

//为避免冲突，将我们的方法用一个匿名方法包裹起来 (function($) { //扩展这个方法到jquery $.fn.extend({ //插件名字 pluginname: function() { //遍历匹配元素的集合 return this.each(function() { //在这里编写相应代码进行处理 }); } }); //传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$" })(jQuery);

接下来，我们给插件中加入一些可以改变的属性，这样用户可以根据自己的需要来做一些更改。同时，我们应提供相应的默认值。

3、实现jQuery插件

最后，使用插件的方法如下：

//使用插件 $(document).ready(function() { $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" }); });

http://www.jquery001.com/how-to-write-jquery-plugin.html

demo:http://www.jquery001.com/demo/how-to-write-jquery-plugin.htm