最简单的插件

$.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. Java默认方法

    示例1 interface InterfaceA { default void say() { System.out.println("InterfaceA"); } } publ ...

  2. poj1284 && caioj 1159 欧拉函数1：原根

    这道题不知道这个定理很难做出来. 除非暴力找规律. 我原本找的时候出了问题 暴力找出的从13及以上的答案就有问题了 因为13的12次方会溢出 那么该怎么做? 快速幂派上用场. 把前几个素数的答案找出来 ...

  3. 【BZOJ 1588】 [HNOI2002]营业额统计

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每天的最小波动值指的是和之前所有天的差值的绝对值中的最小值. 用set.的lower_bound函数. 每次找和他差值最小的数字就好 ...

  4. 【BZOJ 1406】 [AHOI2007]密码箱

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] \(x^2%n=1\) \(x^2-1 = k*n\) \((x+1)*(x-1) % n == 0\) 设\(n=a*b\) 对于 ...

  5. Spring学习总结（14）——Spring10种常见异常解决方法

    在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...

  6. COGS——T 1578. 次小生成树初级练习题

    http://www.cogs.pro/cogs/problem/problem.php?pid=1578 ☆   输入文件:mst2.in   输出文件:mst2.out   简单对比时间限制:1 ...

  7. 完毕乔布斯的梦想：一个免费wifi共享的乌托邦

    早在2007年推出iPhone时,乔布斯就提出这种如果:商业区与居民区的wifi路由器全民开放,实现与路人共享网络之便.能够想象,那算是一个wifi共享的乌托邦. 数年过去了,乔布斯的梦想依然没能全然 ...

  8. 数位DP CF388D - Fox and Perfect Sets

    题目地址 一个整数perfect集合满足性质:集合中随意两个整数的异或和仍在这个集合中. 求最大数不超过K的perfect集合的个数. 每一个集合都是一个线性的向量空间. .能够通过全然的高斯消元得出 ...

  9. POJ1180 Batch Scheduling 解题报告(斜率优化)

    题目链接:http://poj.org/problem?id=1180 题目描述: There is a sequence of N jobs to be processed on one machi ...

  10. mysql InnoDB引擎 共享表空间和独立表空间(转载)

    PS:innodb这种引擎,与MYISAM引擎的区别很大.特别是它的数据存储格式等.对于innodb的数据结构,首先要解决两个概念性的问题: 共享表空间以及独占表空间. 1.什么是共享表空间和独占表空 ...