很多场合，我们都会调用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. The Swiss Army Knife of Data Structures … in C#

    "I worked up a full implementation as well but I decided that it was too complicated to post in ...

  2. VS2013.3 & VS2014 任务资源管理器

    Web 开发,特别是前端 Web 开发,正迅速变得像传统的后端开发一样复杂和精密.前端生成过程,可以囊括SASS 和LESS扩展.CSS/JS的压缩包.JSHint 或 JSLint的运行时 .或者更 ...

  3. 玩转JavaScript OOP[2]——类的实现

    概述 当我们在谈论面向对象编程时,我们在谈论什么?我们首先谈论的是一些概念:对象.类.封装.继承.多态.对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了 ...

  4. .NET单元测试的艺术-1.入门

    开篇:最近在看Roy Osherove的<单元测试的艺术>一书,颇有收获.因此,将其记录下来,并分为四个部分分享成文,与各位Share.本篇作为入门,介绍了单元测试的基础知识,例如:如何使 ...

  5. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  6. 开始研究web，mark一下

    之前想要搞引擎,经过思考之后,定位为webgl方面的引擎,这个决定早就做了,只是没有写下来   做了一些调研之后,确定使用babylon.js 和typescript 和c# 来开发   Babylo ...

  7. ASP.NET Web API路由系统：Web Host下的URL路由

    ASP.NET Web API提供了一个独立于执行环境的抽象化的HTTP请求处理管道,而ASP.NET Web API自身的路由系统也不依赖于ASP.NET路由系统,所以它可以采用不同的寄宿方式运行于 ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...

  9. LINQ系列：Linq to Object分区操作符

    分区是指将一个单一的输入序列划分成两个或多个部分或序列,同时不会对输入元素重排序,返回一个新形成的部分.LINQ分割操作符包括Skip.SkipWhile.Take和TakeWhile. 1. Ski ...

  10. MVC5 网站开发实践 2.2、管理员身份验证

    上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践  ...