很多场合，我们都会调用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. 挡不住的好奇心：ASP.NET 5是如何通过XRE实现跨平台的

    .NET程序员也有自己的幸福,.NET的跨平台是一种幸福,.NET的开源也是一种幸福,而更幸福的是可以通过开源的.NET了解.NET是如何一步步走向跨平台的,所以幸福是一种过程. 在.NET跨平台的进 ...

  2. ASP.NET跨平台实践：无需安装Mono的Jexus“独立版”

    在Linux上运行ASP.NET网站或WebApi的传统步骤是,先安装libgdiplus,再安装mono,然后安装Jexus.在这个过程中,虽然安装Jexus是挺简便的一件事,但是安装mono就相对 ...

  3. 基础知识漫谈（2）：从设计UI框架开始

    说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...

  4. 企业IT管理员IE11升级指南【3】—— IE11 新的GPO设置

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  5. OAuth2 Backend Web Application 验证过程

    本文是从我的 github 博客转载的,原文请看. 一图胜千言.图片请自由转载,请保留图片的原始签名.

  6. 分析nuget源码，用nuget + nuget.server实现winform程序的自动更新

    源起 (个人理解)包管理最开始应该是从java平台下的maven开始吧,因为java的开发大多数是基于开源组件开发的,一个开源包在使用时很可能要去依赖其他的开源包,而且必须是特定的版本才可以.以往在找 ...

  7. [已招满，谢谢关注]Sogou招聘C#开发人员，有意者请进

    职位名称:c#开发工程师 工作地点:搜狐网络大厦 职责:搜狗商业平台桌面产品 职位要求: 1. 计算机或者相关专业本科或以上学历 2. 精通c#,两年以上实际项目开发经验 3. 熟悉C/S开发架构和设 ...

  8. Android开发学习之路-Android Studio真神器！

    放假之后电脑配置升级就开始用Android Studio(下面简称AS)了,那个酸爽真的不是一般的啊,这里开一篇博客来记录下AS里面各种酷炫的功能,有更好玩的,大家不要吝啬,评论告诉我吧! 最近And ...

  9. 谈初学Java历程

    学习Java一个月左右,本来很早就想好好静下心来写一点东西了.但由于不想手写,文档写了不知道放在哪好,所以一直拖着.最近注册了博客园,还是挺方便的. 即将大学毕业了,则面临了所以大学生所面临的问题,就 ...

  10. EasyUI刚加载时候Window窗体自动弹出的解决办法