最简单的插件

$.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. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  2. （WC2016模拟十八）【BZOJ4299】[CodeChef]FRBSUM

    咕了若干天我终于来补坑了qwq HINT $1\leq N,M\leq 10^5$ $1\leq \sum A_i\leq 10^9$ 题解: 虽然场上做出来了但还是觉得好神啊! 假设当前集合能凑出$ ...

  3. tinymce原装插件源码分析（三）-code

    code: 用于显示源码.主要包含一个弹框.设置显示内容以及内容的更新. function showDialog() { var win = editor.windowManager.open({ t ...

  4. luogu P1375 小猫(卡特兰数）

    题意 (n<=200000) 题解 把DP转移方程写出来,这不是卡特兰数吗?然后就解决了. 做完这题我发现 DP真是一个好东西. (公式连乘所以中间要加mod要不爆longlong了) #inc ...

  5. redis.conf配置文件配置项解析

    知识来源于 : https://blog.csdn.net/bsfz_2018/article/details/79061413[Redis在linux下的安装] daemonize:如需要在后台运行 ...

  6. 过Hard题目.周末

      # Title Editorial Acceptance Difficulty Frequency   . 65 Valid Number     12.6% Hard    . 126 Word ...

  7. Android中处理Touch Icon的方案

    苹果的Touch Icon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些Touch Icon的网页链接更加和Native应用更相像了.由于苹果设备IPod,IP ...

  8. iOS开发- Images can’t contain alpha channels or transparencies 解决的方法

    新版的iTunesConnect真是各种问题阿... 蛋疼要命. 上传介绍图片(屏幕截图)的时候 , 遇到了这个问题 Images can't contain alpha channels or tr ...

  9. video : Write and Submit your first Linux kernel Patch

    http://v.youku.com/v_show/id_XNDMwNzc3MTI4.html After working with Linux (mostly as an advanced user ...

  10. 由老同事学习SAP所想到的

    前段时间一位老同事在微信上跟我说他们公司正计划导SAP系统,但整个IT中心几乎无人使用过SAP,知道我在这行业干了多年了,所以想问我怎么开始学习.于是我约他今天出来聊聊,顺便把手里的SAP ECC E ...