最简单的插件

$.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. NOIp模拟赛三十四（yxq供题）

    毒瘤yxq! 毒瘤yxq! 毒瘤yxq! 据yxq自己说,林导让他出题的时候要求是“代码量少”,“思维难度高”,“不涉及太复杂的算法”,而且“最好要让myh有一题做不出来”(狙击myh).于是今天的题 ...

  2. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  3. mariadb 视图 事务 索引 外键

    视图 对于复杂的查询,在多个地方被使用,如果需求发生了改变,需要更改sql语句,则需要在多个地方进行修改,维护起来非常麻烦   假如因为某种需求,需要将user拆房表usera和表userb,该两张表 ...

  4. macOS seria 10.12升级到macOS Mojave的报错：xcrun: error: invalid active developer path, missing xcrun

    今天升级mac系统到macOS mojave后,在终端操作gitlab时遇到一行莫名其妙的错误: xcrun: error: invalid active developer path (/Libra ...

  5. Linux文件属性（属主属组权限）

    Linux文件属性 Linux系统是一种典型的多用户系统,不同的用户处于不同的地位,拥有不同的权限.为了保护系统的安全性,Linux系统对不同的用户访问同一文件(包括目录文件)的权限做了不同的规定. ...

  6. 12、NIO、AIO、BIO一

    1.NIO概述 什么是NIO:NIO是New I/O的简称,与旧式的基于流的I/O方式相对,从名字看,他表示新的一套JAVA I/O标准.它是在java1.4中被纳入到JDK中的,并具有以下特性: - ...

  7. m_Orchestrate learning system---二十六、动态给封装好的控件添加属性

    m_Orchestrate learning system---二十六.动态给封装好的控件添加属性 一.总结 一句话总结:比如我现在封装好了ueditor控件,我外部调用这个控件,因为要写数据到数据库 ...

  8. Minikube之Win10单机部署Kubernetes（k8s）自动化容器操作的开源平台

    Minikube之Win10单机部署 Kubernetes(k8s)是自动化容器操作的开源平台,基于这个平台,你可以进行容器部署,资源调度和集群扩容等操作.如果你曾经用过Docker部署容器,那么可以 ...

  9. ELK搭建（filebeat、elasticsearch、logstash、kibana）

    ELK部署(文章有点儿长,搭建时请到官网将tar包下载好,按步骤可以完成搭建使用) ELK指的是ElasticSearch.LogStash.Kibana三个开源工具 LogStash是负责数据的收集 ...

  10. String build-in function - len

    len is a build-in function that returns the numbers of characters in a string: Since we started coun ...