jQuery 自定义函数写法分享


Posted in Javascript onMarch 30, 2012

自定义主要通过两种方式实现
$.extend({aa:function(){}});
$.fn.extend({aa:function(){}});
调用的方法分别是:
$.aa();
$($this).aa();

注意:
创建函数时不要放在 $(function() { }中,调用时候要放在事件里面
$($this).click(function(){$.aa();});

jQuery.extend 函数详解
JQuery的extend扩展方法:
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
一、Jquery的扩展方法原型是:

 

        extend(dest,src1,src2,src3...);
 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

 那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

二、省略dest参数
上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去,如:

$.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的全局对象中。
2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去,如:
$.fn.extend({ 
hello:function(){alert('hello');} 
});

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例:

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
hello:function(){alert('hello');}
})

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

三、Jquery的extend方法还有一个重载原型:

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:
result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:
var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
);
那么合并后的结果就是:
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

以上就是$.extend()在项目中经常会使用到的一些细节。

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
一个JQuery操作Table的代码分享
Mar 30 #Javascript
javascript工具库代码
Mar 29 #Javascript
Web开发之JavaScript
Mar 29 #Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 #Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 #Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 #Javascript
50款非常棒的 jQuery 插件分享
Mar 29 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
对numpy中轴与维度的理解
2018/04/18 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
2014年科室工作总结
2014/11/20 职场文书
优秀英文求职信范文
2015/03/19 职场文书
门店店长岗位职责
2015/04/14 职场文书
初三数学教学反思
2016/02/17 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技