很多场合，我们都会调用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 vNext 概述

    兼容Mono的下一代云环境Web开发框架ASP.NET vNext 我们知道了ASP.NET vNext是一个全新的框架,是一个与时俱进的框架.这篇文章将深入讨论在整体架构更多的细节,文档参照 ASP ...

  2. ABP理论学习之数据过滤器

    返回总目录 本篇目录 介绍 预定义过滤器 关闭过滤器 开启过滤器 设置过滤器参数 定义自定义过滤器 其他ORM 介绍 软删除模式通常用于不会真正从数据库删除一个实体而是仅仅将它标记为"已删除 ...

  3. iOS开发系列--C语言之构造类型

    概述 在第一节中我们就提到C语言的构造类型,分为:数组.结构体.枚举.共用体,当然前面数组的内容已经说了很多了,这一节将会重点说一下其他三种类型. 结构体 枚举 共用体 结构体 数组中存储的是一系列相 ...

  4. Microsoft Azure Web Sites应用与实践【2】—— 通过本地IIS 远程管理Microsoft Azure Web Site

    Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...

  5. ARM汇编指令调试方法

    学习ARM汇编时,少不了对ARM汇编指令的调试.作为支持多语言的调试器,gdb自然是较好的选择.调试器工作时,一般通过修改代码段的内容构造trap软中断指令,实现程序的暂停和程序执行状态的监控.为了在 ...

  6. RAID 概述

      原创地址:http://www.cnblogs.com/jfzhu/p/3999283.html 转载请注明出处   独立硬盘冗余阵列(RAID, Redundant Array of Indep ...

  7. C语言 · Interval · 求矩阵元素和

    问题描述 这里写问题描述. 输入格式 测试数据的输入一定会满足的格式. 例:输入的第一行包含两个整数n, m,分别表示矩阵的行数和列数.接下来n行,每行m个正整数,表示输入的矩阵. 输出格式 要求用户 ...

  8. C语言 · 复习杂记

    /*=================================*/ /* 基础部分 */ /*=================================*/一:.CPP--C++文件: ...

  9. C语言 · 最小公倍数

    问题描述 编写一函数lcm,求两个正整数的最小公倍数. 样例输入 一个满足题目要求的输入范例.例:3 5 样例输出 与上面的样例输入对应的输出.例: 数据规模和约定 输入数据中每一个数的范围. 例:两 ...

  10. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...