1.一次声明一个函数

$.fn.函数名 = function([options]){}

$.fn.red=function(options){
var defaults = {
'color': 'red'
};
var settings = $.extend(defaults, options);
this.css(settings);

return this;

}

2.一次声明多个函数   

$.fn.extend({
函数名:function(){}
});

$.fn.extend({
big:function(options){
var defaults = {
'fontSize': '22px'
};
var settings = $.extend({},defaults, options);

this.css(settings);

return this;

},
normal:function(options){
var defaults = {
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);

this.css(settings);

return this;

}
});

3.通常是结合命名空间搭配使用,将需要用到的功能块整合进来,然后确定好输入与输出,同时保证传入参数的可扩展性(有默认值,复合对象),和传出的链式调用(return this);

4. 扩展

4.1

面向对象思维编辑插件

//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
} $(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})

4.2

jquery extend实现原理

jq 插件写法的更多相关文章

  1. JQ插件写法 扩展JQ方法

    目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...

  2. jq插件写法

    如今做web开发,jQuery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用.最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用  (f ...

  3. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  4. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  5. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

  6. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  7. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

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

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

  9. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

随机推荐

  1. jmeter 线程组之间的参数传递(加密接口测试三)

    场景测试中,一次登录后做多个接口的操作,然后登录后的uid需要关联传递给其他接口发送请求的时候使用. 1.在登录接口响应信息中提取uid字段值 1>login请求 -->添加 --> ...

  2. e.printStackTrace() ; 是什么意思?

    catch(Exception e){e.printStackTrace() ;} 当try语句中出现异常是时,会执行catch中的语句,java运行时系统会自动将catch括号中的Exception ...

  3. SQL Server 2008 R2 超详细安装图文教程

    一.下载SQL Server 2008 R2安装文件 ed2k://|file|cn_sql_server_2008_r2_enterprise_x86_x64_ia64_dvd_522233.iso ...

  4. php分层

    表示层         UI      主要表示WEB方式,也可以表示成WINFORM方式.如果逻辑层相当强大和完善,无论表现层如何定义和更改,逻辑层都能完善地提供服务. 业务逻辑层  BLL     ...

  5. python excel操作 练习:#生成一个excel文件,生成3个sheet,每个sheet的a1写一下sheet的名称。每个sheet有个底色

    练习:#生成一个excel文件,生成3个sheet,每个sheet的a1写一下sheet的名称.每个sheet有个底色 #coding=utf-8 from openpyxl import Workb ...

  6. Linux服务器---使用mysql

    使用mysql 1.登录,可以用密码登录,也可以不用密码登录.命令格式“mysql –u 用户名 –p 密码” [root@localhost src]# mysql -u root –p     / ...

  7. c++第十五天

    <c++ primer, 5E> 第94页到第99页,笔记: 1.迭代器(iterator):一种比下标访问更通用的访问容器中元素的机制. (并不是所有标准库容器都支持下标访问,<运 ...

  8. ELK学习笔记之ELK分析syslog日志

    0x00 配置FIlebeat搜集syslog并发送至 #配置 mv /etc/filebeat/filebeat.yml /etc/filebeat/filebeat.yml.bak vim /et ...

  9. SNMP学习笔记之SNMP简单概述

    0x00 SNMP简单概述 0.1.什么是Snmp SNMP是英文"Simple Network Management Protocol"的缩写,中文意思是"简单网络管理 ...

  10. 移动页面click延迟引发的touch问题

    一.事件捕获与冒泡 先扯一下事件的触发流程,这个之后会用到. DOM2级事件规定事件包括三个阶段: ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段 大概的流程就是事件从最外层一层一层往里面传递( ...