无意看了这篇《jQuery插件开发精品教程,让你的jQuery提升一个台阶》文章,现在做一下总结。

一、jQuery插件的创建可以有三种方法

1.通过$.extend()来扩展jQuery

2.通过$.fn 向jQuery添加新的方法

3.通过$.widget()应用jQuery UI的部件工厂方式创建

方法1太简单,创建后通过$.myfunction()方式调用,不能对指定元素调用。

方法3相对于方法2太复杂。

方法2就是常用的创建jq插件的方法。可以对指定元素进行操作。例如$('#title').myfunction();

二、jQuery插件创建格式

$.fn.myfunction = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}

如果想要支持链式调用只需return一下即可。

$.fn.myfunction = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
return this.css('color', 'red');
}

三、让插件接受参数,使用$.extend方法

$.fn.myPlugin = function(options) {
var defaults = {//设置默认值
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改,为了保持变量defaults的值不变应该使用以下代码
//var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}

四、面向对象的插件开发

为了以后代码维护和可读性我们可以进行面向对象的方法开发插件。

var Beautifier = function(ele, opt) {
this.$element = ele, //获取当前选中的jq对象。
this.defaults = {
'color': 'red',
'fontSize': '12px'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}

创建jq插件步骤的更多相关文章

  1. oneThink后台添加插件步骤详解

    内容管理框架:oneThink 版本:V1.1.141212 (注:v1.1也有很多版本,一不小心就下到V1.1.140202 去了,还有其他版本,建议去代码托管平台下载最新版本) 我也不偷懒,把每一 ...

  2. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  3. ArcGIS Desktop python Add-in 创建一个插件

    1)创建一个项目 首先创建一个插件项目,本节介绍如何利用向导创建一个插件项目. 创建任何一个ArcGIS插件产品的过程都是一样的. 创建一个Python插件项目包括2个步骤: a) 选择一个插件项目文 ...

  4. nuxt创建项目的步骤

    nuxt创建项目的步骤 1.基本步骤 // 创建package.json依赖管理文件 npm init -y // 在package.json文件中添加运行nuxt的命令,之后npm run dev启 ...

  5. TODO:GitHub创建组织的步骤

    TODO:GitHub创建组织的步骤 使用GitHub进行团队合作,写这个步骤主要作用是为了OneTODO作为一个团队组织进行代码的分享,让更多人来参与. 使用帐号.密码登录GitHub 2.右上角加 ...

  6. ABP创建数据库操作步骤

    1 ABP创建数据库操作步骤 1.1 SimpleTaskSystem.Web项目中的Web.config文件修改数据库配置. <add name="Default" pro ...

  7. 创建 Transact-SQL 作业步骤

    创建 Transact-SQL 作业步骤 在对象资源管理器中,连接到 SQL Server 数据库引擎实例,再展开该实例. 展开"SQL Server 代理",创建一个新作业或右键 ...

  8. 使用Autodesk Vault插件向导轻松创建Vault插件

    Vault SDK帮助文档中已经详细描述了怎么创建Vault插件,不过还是太麻烦了,首先要添加必要的引用,修改程序集属性,添加vcet.config文件,实现必要的接口,最后还要手动把生成的文件拷贝到 ...

  9. 创建守护进程步骤与setsid() -- linux deamon进程

    原创:http://www.cnblogs.com/mickole/p/3188321.html 一,守护进程概述 Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且 ...

随机推荐

  1. android popupwindow位置显示

    1.在控件的上方: private void showPopUp(View v) { LinearLayout layout = new LinearLayout(this); layout.setB ...

  2. Jmeter CSV 参数化/检查点/断言

    当参数的值没有规律且量不太大时,可以使用CSV Data set config这种方法. 案例: 应用Sogou自动搜索关键字: 软件开发测试,web功能自动化测试,性能自动化测试,Selenium以 ...

  3. 记重回IT行业的面试

    问点: 0,梳理一个前端知识框架 1,jQuery的理解 2,仿某网站首页,除了download,显示新优化地方 3,文档模型(DOM) 事件流 事件处理程序 事件类型 例如阻止冒泡的方法 4,前端跟 ...

  4. sqlserver批量删除表

    --批量删除表 ) DECLARE tmpCur CURSOR FOR SELECT name FROM sys.objects WHERE TYPE='U' AND name LIKE N'%_Qu ...

  5. 微软宣布在Azure上支持更多的开放技术和选择

    微软和我都热爱Linux,并且就在情人节过去几天之后,我非常高兴能用几个激动人心的消息来表达这种对Linux的热爱,您将会看到在Azure上的云部署将具有更加开放的选择性和灵活性. 这些激动人心的消息 ...

  6. C#连接SQL Server测试

    string con, sql; con = "Server=192.168.31.26;Database=TestDB;user=kala;pwd=Password"; sql ...

  7. UML用例图间关系说明

    用例间一般存在如下四种关系: 1."通信"关系(<<cmmunicate>>构造型): "通信"关系:使用实心的关联线或带<< ...

  8. Type Systems

    This section deals with more theoretical aspects of types. A type system is a set of rules used by a ...

  9. Vue点击切换class

    <style> .active{ color: red; } </style> <ul id="app"> <li v-for='(ite ...

  10. REG小探

    根键名称缩写对照表   常用数据类型