jQuery插件开发学习笔记

时间：2014-04-09 编辑：简简单单来源：一聚教程网

1.类级别的插件开发

　　我是这样理解的：jQuery是类，$是jQuery的别名，$('selector')为jQuery对象

　　这种插件类似为jQuery类添加静态的方法，然后我们就可以像在C#中调用静态方法一样使用插件。添加静态方法的途径有两种：

代码如下

复制代码

jQuery.alert = function () {
alert("这是一个jQuery的提示框");
}

jQuery.confirm = function () {
confirm("这是一个JQuery的提示框");
}

　　相应的调用：$.alert(); $.confirm();

　　另一种方法的代码如下：

代码如下	复制代码
jQuery.extend({ alert: function () { alert("这是一个jQuery的提示框"); }, confirm: function () { confirm("这是一个JQuery的提示框"); } });

　　这种是通过jQuery提供的extend方法进行功能的扩展，调用的方法同上。

　　另外，为了避免与其它jQuery插件的冲突，我们可以添加自己的命名空间：

代码如下	复制代码
jQuery.sample = { alert: function () { alert("这是一个jQuery的提示框"); }, confirm: function () { confirm("这是一个JQuery的提示框"); } };

　　添加了命名空间后的调用：$.sample.alert(); $.sample.confirm();

　　2.对象级别的插件开发

代码如下

复制代码

这种写法的说明：
var fn = function(para){
//code...
}
fn(jQuery);

先定义一个方法，再立即执行这个方法
这种写法的好处：我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

*/
(function ($) {
    $.fn.extend({
        hilight: function (options) {
            var opts = $.extend($.fn.hilight.defauts, options);
            this.css("color", opts.color).css("background-color", opts.bgcolor);
        }
    });

    $.fn.hilight.defauts = {
        color: 'red',
        bgcolor: 'white'
    };
})(jQuery);

　　jQuery推荐这种写法，好处就在上面的注释部分。

　　在这段代码中我们将defaults暴漏出来，允许用户直接访问并设置defaults值，这样做的好处，是只需要在一处设置默认值以后，别处都可以直接使用，而不用每次传递参数。当然，我们仍然可以传递参数，以改变手工设置的默认值。

　　我们还可以通过暴漏defaults的相同方法来暴漏一些可供别人扩展的方法；如果需要将一个方法或属性私有化，只需要在闭包中定义，而不要提供相应的引用

这里写的是一个比较简单地二级菜单的插件,html结构如下
index.html

代码如下

复制代码

<a href="/list-139/" target="_blank">jquery</a>学习

顶级菜单一
- 二级分类一
- 二级分类一
- 二级分类一
- 二级分类一
- 二级分类一

顶级菜单二
- 二级分类二
- 二级分类二
- 二级分类二
- 二级分类二
- 二级分类二

顶级菜单三
- 二级分类三
- 二级分类三
- 二级分类三
- 二级分类三
- 二级分类三

顶级菜单四
- 二级分类四
- 二级分类四
- 二级分类四
- 二级分类四
- 二级分类四

顶级菜单五
- 二级分类五
- 二级分类五
- 二级分类五
- 二级分类五
- 二级分类五

jquery.menu.css
* {padding:0;margin:0;}
ul li {font-size:12px;text-align:center;list-style-type:none;cursor:pointer;}
.menu {width:500px;color:#000;overflow:hidden;}
.menu li {line-height:30px;width:100px;float:left;background:#999;color:#333;}
.list {display:none;}
.list li {background:#999;color:#333;}
jquery.menu.js
(function ($){
    $.fn.menu=function (){
        this.children('li').hover(function (){
            $(this).find('ul').slideDown('normal');
        },function (){
            $(this).find('ul').stop().slideUp('normal');
        });
    };
})(jQuery);

word-spacing: 0px; padding-top: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-">

上一个：解决Discuz不支持MariaDB的问题
下一个： jquery网页返回顶部代码

推荐专题

最新下载

热门教程

jQuery插件开发学习笔记

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程