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. transform 和 transition

    transform的属性包括:rotate() / skew() / scale() / translate() /matrix() 其中 rotate() 旋转度数,0-360 skew()  元素 ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON Regiongrowing

    zw版[转发·台湾nvp系列Delphi例程]HALCON Regiongrowing procedure TForm1.Button1Click(Sender: TObject);var img : ...

  3. zoj3814

    这题说的是给了一个数在longlong范围内 然后求出小于这个数的最大的回文,枚举每位减去1后 , 他后面的位置上全部都置为9,然后在枚举每个前半部分,然后贪心取得这个数的最大值,贪心的时候写错了,错 ...

  4. Linux命令: 替换字符串

    敲命令按以下顺序 ①vim filename ②e ③i ④ESC 1    :s/str1/str2    把当前行的第一个str1替换成str2 2    :s/str1/str2/g    把当 ...

  5. java,swift,oc互相转换,html5 web开发跨平台

    java,swift,oc互相转换,html5 web开发跨平台 写一个java->swift的程序,这个程序是做跨平台系统的核心部分swift和oc到java也在考虑之列Swift->J ...

  6. Unity 使用C/C++ 跨平台终极解决方案(PC,iOS,Android,以及支持C/C++的平台)

    https://blog.csdn.net/fg5823820/article/details/47865741 PC的其实根本不用说,毕竟C#和C++交互的文章已经够多了,当然我自认为经过几次折腾后 ...

  7. 火狐使用Ctrl新开窗口不生效

    使用window.open新开页面,火狐浏览器无法使用Ctrl新开窗口后页面停留在当前页面,兼容性问题,使用<a>或者<router-link>标签即可解决 --贡献者:毛毛

  8. 20145127 《Java程序设计》第五次实验报告

    实验简述: 在本周,我们进行了Java的第五次试验,本次实验的主要内容是结对编程.本次实验的大体过程是: 1.先进行Java的客户端与服务端的代码编写.结对是两个人,一人负责客户端,一人负责服务端. ...

  9. 20145339顿珠 MS08_067漏洞测试

    20145339顿珠 Exp5 MS08_067漏洞测试 实验过程 IP地址:192.168.1.104 虚拟机ip:192.168.1.102 在控制台内使用search ms08_067查看相关信 ...

  10. vs2012添加自定义资源步骤

    1.新建Win32工程 2.选中Resource Files -> add resource 点击打开 这里需要你填写一个Resource Type ,假如你之前已经有了,就直接输入,没有的话在 ...