jQuery中$.fn的用法
在jQuery插件中,常常看见这样的结构,开始自己也是不理解后来通过查阅资料,慢慢的理解其中的大意,所以先总结出来。
(function( $, window, document, undefined ){}){//...code}(jquery,window,document)
1.立即执行函数:(function(){})()
这是一个自调函数,函数定义好之后自动执行。(function(){})表示一个匿名函数,而后面紧跟着的()表示立即调用此函数。而且()也是向函数传递参数的地方。
比如:
;(function(){alert("立即执行");
})();(function(parameter){alert(parameter);
})("立即执行函数传递参数");
使用此函数的好处是,不会产生任何全局变量。缺点是无法重复执行。对于插件来说,是最合适不过的了。不会产生任何全局变量,同时一次引用就够了。
2.传递参数(jQuery,window,document)
$ 实参:$是jQuery的缩写,很多方法和类库也都使用$,这里表示接受jQuery对象,避免冲突
window,document实参:分别接受 window document对象。window,document 对象都是全局环境下的,而在函数体内的window document对象是局部的,这样做有个好处就是,提高性能,减少作用域链的查询时间。如果你在函数体内需要多次调用window 或 document对象,这样把window 或 document对象当作参数传进去,这样做是非常有必要的。当然如果你的插件用不到这两个对象,那么就不用传递这两个参数了。
3.ndefined形参:看起来是有点多余。undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined
4.“;”分号作用:
防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误。
5.$.fn的用法
举个例子:<div id="myDiv"></div>(function( $, window, document, undefined ){}){$.fn.extend({test:function(){alert($(this).attr("id"));}});}(jquery,window,document)$("#myDiv").test();//结果:myDiv(function( $, window, document, undefined ){}){$.extend({test:function(){alert("好好活着");}});}(jquery,window,document)$('#myDiv').test();//结果:好好活着
前者是绑定在dom元素上面的插件,后者是绑定在jQuery上的插件
$.fn是指jQuery的命名空间,加上fn的方法及属性,会对jQuery实例有效。
如扩展$.fn.abc(),即$.fn.abc()是对jQuery扩展了一个abc()方法,在每一个jquery实例都可以引用这个方法,例如
$("#div").abc();
jQuery为开发者开发插件提供了两个方法,分别是:
jquery.extend(object);为扩展jquery类本身.为类添加新的方法
jquery.fn.extend(object);给jquery对象添加方法
fn原型:查看jquery可知
jQuery.fn = jQuery.prototype ={ init: function( selector, context ){//.... //......
};
jquery.fn = jquery.prototype
jquery本身就是一个封装得很好的类,比如我们用语句 $("div")会生成一个jquery类的实例。
jquery.extend(object);为jquery类添加类方法,可以理解为添加静态方法。
如:
$.extend({add:function(a,b){return a+b;}
});$("#div").add(3,4);//return 7
这样便为jquery添加一个为add 的方法,之后便可以在引入jquery的地方,使用这个方法了;
$.fn.extend(object);对jquery添加成员函数、jquery类的实例 可以使用这个成员函数。
列如 编辑被点击时,弹出当前编辑框里面的内容。
$.fn.extend({alertWhileClick:function(){$(this).click(function(){alert($(this).val());}); }
});
jQuery中$.fn的用法相关推荐
- jQuery中$.fn的用法示例介绍
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对j ...
- ajax异步后台存放购物车表,jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)...
本文实例讲述了jQuery购物车插件jsorder用法.分享给大家供大家参考,具体如下: JSORDER 案例 案例一:我的菜单(点击菜名即可加入菜单) 红烧豆腐 12元 毛血旺 32元 套餐:京酱肉 ...
- jQuery中extend的用法
jQuery中extend的用法 前言 一.Jquery的扩展方法原型是: 二.省略dest参数 1.$.extend(src) 2.$.fn.extend(src) 三.Jquery的extend方 ...
- jQuery的$.fn使用
jquery中文网为您提供jQuery的$.fn使用等资源,欢迎您收藏本站,我们将为您提供最新的jQuery的$.fn使用资源 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jque ...
- jQuery ready(fn) 页面载入函数
ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向wi ...
- jQuery中slice()方法用法实例
本文实例讲述了jQuery中slice()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以选取匹配元素集的子集. 语法结构: 复制代码 代码如下: $(selector).slice(sta ...
- html中字段是日期控件,jQuery日历插件datepicker用法详解
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端, ...
- css()用法,jQuery的css()方法用法实例
本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值.以样式属性名称作为 ...
- Jquery 循环map的用法
//Jquery 循环map的用法 $.each(map,function(key,values){console.log(key);$(values).each(function(){console ...
最新文章
- 检查Bash数组是否包含值
- VC++ inline内联函数的作用解决方案
- OpenCV三种立体匹配求视差图算法总结
- android https 简书,关于Android http改为https
- python初学代码留个纪念
- c语言多线编程程序,C语言之多线编程 来看看?
- 【C语言简单说】三:整数变量和输出扩展(2)
- linux 命令案例学习——文件搜索
- Koa入门教程之示例应用
- 代码执行漏洞原理/防御
- 使用iMazing为iPad添加PDF文档
- c++游戏编程100事列_C/C++编程笔记:C语言开发经典游戏项目《五子棋》,内含源码...
- 【知识图谱系列】六篇2020年知识图谱预训练论文综述 | 30页汇报ppt免费获取 | GCC,GraphCL,DGI,InfoGraph等模型
- java框架有哪几种,java权限框架有几种?常见的权限框架分享
- hadoop(二)-hadoop原理及架构
- 【读书笔记】重新定义团队
- 文献阅读(167)NoC神经网络加速器
- 世界地图各大洲鼠标移入切换显示
- 乐优商城之后台管理系统的环境搭建(七)
- python中交集并集用什么符号表示_Python实现两个list求交集,并集,差集的方法示例...