jQ插件编写
参考文档:http://www.cnblogs.com/Dlonghow/p/4142034.html
编写插件最先接触到的就是jQuery.fn.extend 和jQuery.extend 这个两个属性,但是这两个东西是什么,干啥用的,还得先明白:
1、jQuery.extend(object)
a)、为jQuery添加静态方法
eg : jQuery.extend({
min:function(a,,b){return a<b?a:b},
max:function(a,b){return a>b?a:b}
});
jQuery.min(2,3) //2
b)、jQuery.extend(target,object1,[objectN]) 用一个对象或多个对象来扩充对象,最后返回扩充的对象
eg:
var target = {
name : 'zt',
age : 24
}
var object1 = {
name : 'zj',
age : '28',
address : 'ly'
}
console.log(jQuery.extend(target,object1)); // {name:'zj',age:'28',address:'ly'};
2、jQuery.fn.extend(object);
$.fn是什么?
$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。
查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
原来 jQuery.fn = jQuery.prototype.
所以,它是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
$.fn.extend({
doAlertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").doAlertWhileClick(); // 页面上为:
$("#input1") 为一个jQuery实例{不太懂?},当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
3、在实际的开发项目中:{pluginName为插件名称}
开发插件,是$.fn.pluginName = function(options){ }; 如果pluginName 为变量, 则写成 $.fn[pluginName] = function(options){ }
第一步:定一个闭包区域,防止插件被污染
;(function ($, window,undefined) { //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
})(window.jQuery, window);
第二步:写入插件方法:
;(function ($, window,undefined) { //传入window,不需要去外部寻找,提高效率 ; undefined ,防止外部声明,影响内部变量
$.fn[pluginName] = function(options){
return this.each(function(){
}) //支持链式调用
}
})(window.jQuery, window);
jQ插件编写的更多相关文章
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- jQuery插件编写学习中遇见的问题--attr prop
个人博客: https://chenjiahao.xyz 最近在学习jQuery的插件的编写,有两种方式,$.fn.extend以及$.extend,一种是作用于对象原型上,一种是直接作用于jQuer ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- Wireshark插件编写
Wireshark插件编写 在抓包的过程中学习了使用wireshark,同时发现wireshark可以进行加载插件,便在网上学习了一下相应的插件开发技术. 需求编写一个私有协议名为SYC,使用UDP端 ...
- typecho插件编写教程1 - 从HelloWorld说起
typecho插件编写教程1 - 从HelloWorld说起 老高 187 5月25日 发布 推荐 0 推荐 收藏 2 收藏,189 浏览 最近老高正在编写一个关于typecho的插件,由于typec ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- jq插件第二款来袭 图片滚动
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
随机推荐
- 后台生成textbox并设置多行属性,自动换行
Table tb = new Table(); TableRow row1 = new TableRow(); TableCell tc1 = new TableCell(); TableCell t ...
- IIS的安装
xp上好像只能装IIS5,IIS6根本就装不了
- 关于FND_PROFILE与FND_GLOBLE[Z]
fnd_global package可以取得一些關於當前login in用戶的信息 fnd_concurrent_requests functions select FND_PROFILE.VAL ...
- linux查看与设置主机名
1.设置主机名 通过编辑/etc/sysconfig/network文件中的HOSTNAME字段就可以修改主机名.如下所示: [root@zijuan /]# vim /etc/sysc ...
- .Xmodmap vim键位映射。
remove Lock = Caps_Lockkeysym Caps_Lock = Control_Ladd Control = Control_Lkeysym Escape = grave asci ...
- javascript线程解释(setTimeout,setInterval你不知道的事)
john resig写的一篇文章: 原文地址:http://ejohn.org/blog/how-javascript-timers-work/ 作为入门者来说,了解JavaScript中timer的 ...
- uestc 10 In Galgame We Trust
题意:求最长的合法括号序列 解:栈+分类讨论 now表示已经算出的序列,且此序列与现在扫描的序列可能能够连接,tmp表示现在扫描到的序列长度 左括号入栈 右括号:1.栈空时:统计当前总长 并且将栈,n ...
- VC++2008 用空工程创建 DLL
VC++2008 用空工程创建 DLL 一.创建 DLL 工程项目: 1)点击菜单[File] -> [New] -> [Project...] 弹出 “New Project” 对话框: ...
- DataUml Design 教程6-DataUML Design 1.1版本号正式公布(支持PD数据模型)
从DataUML Design正式公布到如今有两个月了.因为近期比較忙,到如今才公布1.1版本号. 以后本人会一直坚持不断完好DataUML Design软件,希望广大程序员们多多支持. 一.1.1版 ...
- Hdu Binary Tree Traversals
Problem Description A binary tree is a finite set of vertices that is either empty or consis ...