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 18 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
JS实现密码框效果
Sep 10 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 无线电
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
PHP引用符&的用法详细解析
2013/08/22 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
什么是servlet
2012/05/08 面试题
医学护理系毕业生求职信
2013/10/01 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
先进工作者申报材料
2014/12/23 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
队列队形口号
2015/12/25 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS