很多场合，我们都会调用jQuery的插件去完成某个功能，比如slider。

如下图，做一个div，通过“$( "#slider" ).slider();”的方式直接将div变成slider，比起slider($('#slider'))更贴近jQuery的链式调用写法，可读性和通用性更好些。

那么，我们也来为jQuery写插件。便于项目中的组件化。

方法是非常简单的，那就写一个测试的demo来作为基础的验证吧。

定义html，假设我们要把test div修改成宽高都是200px，背景色为红色的这么一个插件功能。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div id='test'></div>

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

        <script type='text/javascript'>

        </script>

    </body>

</html>

写一个名为test的插件函数，完成插件的功能。这里可以直接使用this，表示选择器选择的那个元素封装对象。

            function test(){

                this.css('background-color','red');

                this.css('width', '200');

                this.css('height', '200');

            }

完成一个自执行函数，将jQuery传进去，关键就是把插件函数挂到jQuery.fn中去。

            (function(jquery){

                jquery.fn.test = test;

            })(jQuery);

调用的时候，就用jQuery选择器选择test div后直接链式调用test插件函数即可。

$('#test').test();

如此，最简单的插件就完成了。

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div id='test'></div>

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

        <script type='text/javascript'>

            function test(){

                this.css('background-color','red');

                this.css('width', '200');

                this.css('height', '200');

            }

            (function(jquery){

                jquery.fn.test = test;

            })(jQuery);

            $('#test').test();

        </script>

    </body>

</html>

为jQuery写插件的更多相关文章

  1. 关于jQuery写插件及其演示

    关于写jQuery插件是非常有必要的.这是前端学习其中必须经过的一个过程 对于初次写插件先想清楚原理       (function($){  $.fn.yourName = function(opt ...

  2. jquery写插件

    http://www.cnblogs.com/ajianbeyourself/p/5815689.html

  3. 自己动手写插件底层篇—基于jquery移动插件实现

    序言 本章作为自己动手写插件的第一篇文章,会尽可能的详细描述一些实现的方式和预备知识的讲解,随着知识点积累的一点点深入,可能到了后期讲解也会有所跳跃.所以,希望知识点不是很扎实的读者或者是初学者,不要 ...

  4. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  5. 【jQuery】结合accordion插件分析写插件的方法及注意事项

    1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对 ...

  6. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  7. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  8. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  9. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

随机推荐

  1. android输入限制

    title: 2016-5-30 Android输入验证 tags: EditText,输入验证 --- 前言2 使用EditText让用户输入文字时,需要对输入验证.除过验证是否有效的逻辑不同,Ed ...

  2. SQL Server2016 新功能实时查询统计信息

    SQL Server2016 新功能实时查询统计信息 很多时候有这样的场景,开发抱怨DBA没有调优好数据库,DBA抱怨开发写的程序代码差,因此,DBA和开发都成为了死对头,无法真正排查问题. DBA只 ...

  3. ABP理论学习之数据传输对象(DTO)

    返回总目录 本篇目录 为何需要DTO 领域层抽象 数据隐藏 序列化和懒加载问题 DTO惯例和验证 DTO和实体的自动映射 使用特性和扩展方法进行映射 帮助接口 DTO用于应用层和 展现层间的数据传输. ...

  4. EQueue性能测试计划

    1.发送消息吞吐量的测试: 1)单台producer单个进程的发送消息tps2)单台producer多个进程的发送消息tps3)单台broker的接收消息tps,由于单台producer可能压不满,所 ...

  5. WCF basicHttpBinding之Message Security Mode

    原创地址:http://www.cnblogs.com/jfzhu/p/4067873.html 转载请注明出处 前面的文章<WCF Security基本概念>介绍了WCF的securit ...

  6. 启动 Apache2.2 的问题

    启动 Apache2.2 的问题: windows不能在本地计算机启动 Apache2.2.有关更多信息,查阅系统事件日志.如果这是非Microsoft服务,请与服务厂商联系,并参考特定服务错误代码1 ...

  7. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  8. SSIS Design3：并发执行

    1,利用优先约束来并发处理数据,Data Flow Task 和 Data Flow Task 1 是并发执行的,而 Data Flow Task2 必须等到 Data Flow Task 和 Dat ...

  9. IOS 消息机制(NSNotificationCenter)

    消息机制 NSNotificationCenter 一直都在频繁使用,但是却对其原理不是十分了解.今天就花些时间,把消息机制原理重头到尾好好过一遍. iOS 提供了一种 "同步的" ...

  10. 【Win 10 应用开发】RTM版的UAP项目解剖

    Windows 10 发布后,其实SDK也偷偷地在VS的自定义安装列表中出现了,今天开发人员中心也更新了下载.正式版的SDK在API结构上和以前预览的时候是一样的,只是版本变成10240罢了,所以大家 ...