js-jquery-插件开发(二)

二、通过$.fn 向jQuery添加新的方法

2.1、基本格式:

$.fn.pluginName = function() {
    //your code goes here
}

说明:在$.fn后面添加一个方法,名字是我们的插件名称。然后插件代码在这个方法里面展开。

示例一、将页面上所有链接颜色转成红色

<script type="text/javascript">
$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$(‘a‘),则this=$(‘a‘)
    this.css(‘color‘, ‘red‘);
};
</script>
    <a href="http://www.jd.com" >京东</a>
<script type="text/javascript">
    $(function(){
        $(‘a‘).myPlugin();
    });
</script>

示例二、增加url链接

<script type="text/javascript">
$.fn.myPlugin2 = function() {
    //在这里面,this指的是用jQuery选中的元素
    this.css(‘color‘, ‘red‘);
    this.each(function() {
        //对每个元素进行操作
        $(this).append(‘ ‘ + $(this).attr(‘href‘));
    })
};
</script>
    <a href="http://www.jd.com" >京东</a>
<script type="text/javascript">
    $(function(){
        $(‘a‘).myPlugin2();
    });
</script>

2.2、支持链式调用

return 当前对象

<script type="text/javascript">
$.fn.myPlugin3 = function() {
    //在这里面,this指的是用jQuery选中的元素
    this.css(‘color‘, ‘red‘);
    return this.each(function() {
        //对每个元素进行操作
        $(this).append(‘ ‘ + $(this).attr(‘href‘));
    })
};
</script>

2.3、插件接收参数

1、在处理插件参数的接收上,通常使用jQuery的extend方法,但那是给extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,所以我们就可以在jQuery身上调用新合并对象里包含的方法了,像上面的例子。

当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。【重要】

2、利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。

为了演示,再指定一个参数fontSize,允许调用插件的时候设置字体大小。

示例代码:

<script type="text/javascript">
$.fn.myPlugin4 = function(options) {
    var defaults = {
        ‘color‘: ‘red‘,
        ‘fontSize‘: ‘12px‘
    };
    var settings = $.extend(defaults, options);
    return this.css({
        ‘color‘: settings.color,
        ‘fontSize‘: settings.fontSize
    });
}
</script>
<script type="text/javascript">
$(‘a‘).myPlugin4({
    ‘color‘: ‘#2C9929‘,
    ‘fontSize‘: ‘20px‘
});
</script>

2.4、保护好默认参数

注意到上面代码调用extend时会将defaults的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。

一个好的做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。

$.fn.myPlugin = function(options) {
    var defaults = {
        ‘color‘: ‘red‘,
        ‘fontSize‘: ‘12px‘
    };
    var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数,根据extend特性,options,defaults,{}  会依次向左覆盖
    return this.css({
        ‘color‘: settings.color,
        ‘fontSize‘: settings.fontSize
    });
}
时间: 2024-09-30 18:51:34

js-jquery-插件开发(二)的相关文章

js,JQuery 生成二维码

代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="https://files.cnblogs.com/files/wangzhaobo/qrcode.js"&g

玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { $("#"+formId+" input,textarea").removeAttr("readonly"); $("#"+formId+" input,textarea").css('backgroundCo

如何使用jquery.qrcode.js插件生成二维码

1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http://larsjung.de/jquery-qrcode/ 2.然后创建jsp页面,将js引入页面.(此处需要注意的的是顺序不能颠倒,必须是jquery.js先引入) <script type="text/javascript" src="<%=request.getCo

jquery.qrcode.js 插件生成二维码

下载地址:https://github.com/jeromeetienne/jquery-qrcode 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>qrcode.js</title> </head> <body> <div id="qrcode"></div> &l

jquery插件开发尝试(二)

经过上次的尝试,已初步掌握jquery插件的写法,下面为模拟jquery UI插件的效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0,minimun-scale=1.0 maximum-scale=1.0, user-scalable=no&

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

JQuery插件开发精品教程,让你的jQuery提升一个台阶

本文转载自 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.

jQuery插件开发模式

http://www.cnblogs.com/gavin-num1/p/5655126.html jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程>的描述,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使

jQuery插件开发---转载

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,

跟我一起学JQuery插件开发

http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇,jquery插件是怎么开发的,怎么写属于自己的插件? 昨天在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接. 现在我把上面网站的及结合自己的想法写这篇文章.希望能得到大牛们的支持和谅解...大鸟飞过...欢迎拍装. 资料来源: [1]How to w