最简单的插件

$.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. 【BZOJ3678】Wangxz和OJ

    题意: 不想讲 题解: Rope真香! 正解是Splay缩点,访问时再拆成一个序列 代码: //STL dafa good! #include<algorithm> #include< ...

  2. POJ-1276 Cash Machine 多重背包 二进制优化

    题目链接:https://cn.vjudge.net/problem/POJ-1276 题意 懒得写了自己去看好了,困了赶紧写完这个回宿舍睡觉,明早还要考试. 思路 多重背包的二进制优化. 思路是将n ...

  3. SP687 REPEATS - Repeats（后缀数组）

    一个初步的想法是我们枚举重复子串的长度\(L\).然后跑一遍SA.然后我们枚举一个点\(i\),令他的对应点为\(i+L\),然后求出这两个点的LCP和LCS的长度答案就是这个点的答案就是\((len ...

  4. caioj 1158 欧拉函数

    直接套模板,这道题貌似单独求还快一些 解法一 #include<cstdio> #include<cctype> #define REP(i, a, b) for(int i ...

  5. 【Codeforces】512C Fox and Dinner

    [解析]欧拉筛法,奇偶分析.建二分图,网络流 [Analysis] http://blog.csdn.net/qq574857122/article/details/43453087. 所谓的连通块就 ...

  6. hdu2236

    链接:点击打开链接 题意:在一个n*n的矩阵中,找n个数使得这n个数都在不同的行和列里而且要求这n个数中的最大值和最小值的差值最小 代码: #include <iostream> #inc ...

  7. 操作指定文件格式的10个Perl CPAN模块

    在Perl开发中,非常可能会碰到一些不同格式的文件--XML.PDF.CSV及RSS文件等,和一些不同的二进制数据格式.Perl应用程序须要操作这些文件,对它们进行读写. 此时.能够求助于全面Perl ...

  8. thinkphp5项目--个人博客（八）

    thinkphp5项目--个人博客(八) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  9. Windows下Python2.7配置OpenCV2.4.10

    所需文件: 1 Python2.7.13 链接: https://www.python.org/downloads/release/python-2713/ 这里选Windows 64位的安装包. 2 ...

  10. 86.express里面的app.configure作用

    以下摘自 express 3.0 的 文档 app.configure([env], callback) Conditionally invoke callback when env matches ...