最简单的插件

$.fn.changeStyle = function (colorStr) {

    $(this).css('color',colorStr);

}

应用如下：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jquery插件开发</title>

</head>

<body>

    <p>Hello jQuery!</p>

</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.extend.js"></script>

<script type="text/javascript">

    $('p').changeStyle('red');

</script>

</html>

但是如果想连续使用，就不好用了，比如：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jquery插件开发</title>

</head>

<body>

    <p>Hello jQuery!</p>

</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.extend.js"></script>

<script type="text/javascript">

    $('p').changeStyle('red').css('font-size','20px');

</script>

</html>

这里的设置字体大小就没有效果了。

需要简单处理一下上面的拓展程序。

$.fn.changeStyle = function (colorStr) {

    this.css('color',colorStr);

    return this;

}

加上return this;就可以了。

进一步扩展

(function ($) {

    $.fn.changeStyle = function (colorStr) {

        this.css('color',colorStr);

        return this;

    }

}(jQuery));

这样处理会更加安全，防止被污染

支持更多参数

(function ($) {

    $.fn.changeStyle = function (colorStr,fontSize) {

        this.css('color',colorStr).css('font-size',fontSize);

        return this;

    }

}(jQuery));

这里传递了两个参数

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jquery插件开发</title>

</head>

<body>

    <p>Hello jQuery!</p>

</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.extend.js"></script>

<script type="text/javascript">

    $('p').changeStyle('red','25px');

</script>

</html>

灵活处理参数

(function ($) {

    $.fn.changeStyle = function (option) {

        this.css('color',option.colorStr).css('font-size',option.fontSize);

        return this;

    }

}(jQuery));

这里用json对象传递参数,更加灵活。

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jquery插件开发</title>

</head>

<body>

    <p>Hello jQuery!</p>

</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.extend.js"></script>

<script type="text/javascript">

    $('p').changeStyle({colorStr:'red',fontSize:'25px'});

</script>

</html>

支持默认参数处理

(function ($) {

    $.fn.changeStyle = function (option) {

        var defaultSetting = {colorStr:'blue',fontSize:'12px'};

        var setting        = $.extend(defaultSetting,option);

        this.css('color',setting.colorStr).css('font-size',setting.fontSize);

        return this;

    }

}(jQuery));

这里会合并给定的参数和默认的参数,

如果只传一个参数，就会启用默认的参数。

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jquery插件开发</title>

</head>

<body>

    <p>Hello jQuery!</p>

</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.extend.js"></script>

<script type="text/javascript">

    $('p').changeStyle({fontSize:'25px'});

</script>

</html>

后记

也可以这样处理

(function ($) {

    $.fn.extend({

        changeStyle:function (option) {

            var defaultSetting = {colorStr:'blue',fontSize:'12px'};

            var setting        = $.extend(defaultSetting,option);

            this.css('color',setting.colorStr).css('font-size',setting.fontSize);

            return this;

        }

    });

}(jQuery));

$.fn $.fn.extend $.extend 的理解

(function ($) {

    $.fn.extend({

        changeStyle: function (option) {

            var defaultSetting = {colorStr: 'blue', fontSize: '12px'};

            var setting = $.extend(defaultSetting, option);

            this.css('color', setting.colorStr).css('font-size', setting.fontSize);

            return this;

        }

    });

    // 静态方法，直接通过$调用，不可以通过元素调用

    $.extend({

        min: function (a, b) {

            return a < b ? a : b;

        },

        max: function (a, b) {

            return a > b ? a : b;

        }

    });

    // 可以通过元素调用

    $.fn.extend({

        min: function (a, b) {

            return a < b ? a : b;

        },

        max: function (a, b) {

            return a > b ? a : b;

        }

    });

}(jQuery));

调用如下，

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>jquery插件开发</title>

</head>

<body>

    <p>Hello jQuery!</p>

</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript" src="./js/jquery.extend.js"></script>

<script type="text/javascript">

    $('p').changeStyle({fontSize:'25px'});

    $.min('3','5'); // 3

    $('p').min('3','5'); // 3

</script>

</html>


1. $.fn 和 $.fn.extend 都是针对成员进行扩展的，$.extend扩展的是静态方法。

2. jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！

3. jQuery.extend()，是扩展的jQuery这个类。

jQuery插件开发初探的更多相关文章

  1. JQuery插件开发初探——图片轮播

    在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...

  2. JQuery插件开发初探——结构熟悉

    工作之余,对Jquery插件做了一点尝试,想着之前总用别人写的插件,自己要是也写一个用岂不是很cool.于是说干就干,动手开始写. 首先是模仿,从一个简单的功能进行入手,了解一下插件开发的流程和结构. ...

  3. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  4. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  5. jQuery插件开发精品教程，让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  6. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  7. jQuery插件开发（溢出滚动）

    声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...

  8. 从零开始学jQuery插件开发

    http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...

  9. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

随机推荐

  1. BZOJ 2794 [Poi2012]Cloakroom（离线+背包）

    2794: [Poi2012]Cloakroom Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 406  Solved: 241[Submit][St ...

  2. sql 技巧

    1.想把一张表的 某个字段或多个字段 的 所有数据 复制到另外一张表里  insert into 表名(字段) select (字段) from 表名 2.from Users u , IN(u.ro ...

  3. 洛谷 P1417 烹调方案 （01背包拓展）

    一看到这道题就是01背包 但是我注意到价值和当前的时间有关. 没有想太多,直接写,0分 然后发现输入方式不对-- 改了之后只有25分 我知道wa是因为时间会影响价值,但不知道怎么做. 后来看了题解,发 ...

  4. [转载]深入Java单例模式

    在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下.   所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在 ...

  5. 2015 Multi-University Training Contest 2 hdu 5306 Gorgeous Sequence

    Gorgeous Sequence Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  6. 从头认识java-17.2 线程中断（interrupt）

    这一章节我们来讨论一下线程中断(interrupt). 1.什么是线程中断(interrupt)? 就是在多线程执行的时候,我们给线程贴上一个中断的标记.可是不要求线程终止. 2.样例: 中断的样例: ...

  7. sort函数自定义compare方法

    今天看到有C++这样写: sort(ins.begin(), ins.end(), [](Interval a, Interval b){return a.start < b.start;}); ...

  8. 对于树的序列化，用了stream，很好

    https://leetcode.com/problems/serialize-and-deserialize-binary-tree/?tab=Description 下面这个解法里面的C++部分很 ...

  9. 批量修改文件的编码格式至UTF-8

    批量修改文件的编码格式至UTF-8 学习了: https://jingyan.baidu.com/article/e8cdb32b47a1ea37042bad11.html http://blog.c ...

  10. JavaScript（14）jQuery（JavaScript 库）

    JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...