jQuery插件的写法分享


Posted in Javascript onJune 12, 2013

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);

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

(function($){  
    $.fn.extend({   
 //将可选择的变量传递给方法
        pluginname: function(options) {  
            //设置默认值并用逗号隔开
            var defaults = {  
                padding: 20,  
                mouseOverColor : '#000000',  
                mouseOutColor : '#ffffff'  
            }  
            var options =  $.extend(defaults, options);  
            return this.each(function() {  
                var o = options;  
                //这里编写相应代码 
                //可以像下边这样获取变量值 
                alert(o.padding);  
            });  
        }  
    });  
})(jQuery); 

3、实现jQuery插件

(function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {
            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                var o = options;
                //将元素集合赋给变量 本例中是 ul对象 
                var obj = $(this);
                //得到ul中的a对象
                var items = $("li a", obj);
                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });
            });
        }
    });
})(jQuery);

最后,使用插件的方法如下:

//使用插件
$(document).ready(function() {
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
作者:朋友的你 来源:jQuery学习
Javascript 相关文章推荐
Jquery中删除元素的实现代码
Dec 29 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 #Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 #Javascript
Jquery 表单验证类介绍与实例
Jun 09 #Javascript
js调用后台servlet方法实例
Jun 09 #Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 #Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 #Javascript
ScrollDown的基本操作示例
Jun 09 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
webpack打包js的方法
2018/03/12 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
python版本的读写锁操作方法
2016/04/25 Python
Python 装饰器深入理解
2017/03/16 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python学习入门细节知识点
2018/03/29 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
自荐书模板
2013/12/15 职场文书
外语系毕业生自荐信范文
2013/12/16 职场文书
运动会方阵解说词
2014/02/12 职场文书
监察建议书范文
2014/03/12 职场文书
企业党员公开承诺书
2014/03/26 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
MySQL创建管理HASH分区
2022/04/13 MySQL