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 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
JavaScript实现世界各地时间显示
Sep 07 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
Protoss兵种介绍
2020/03/14 星际争霸
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
使用python实现画AR模型时序图
2019/11/20 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
网络方面基础面试题
2012/11/16 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
集中整治工作方案
2014/05/01 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers