简单谈谈jQuery(function(){})与(function(){})(jQuery)


Posted in Javascript onDecember 19, 2014

开发jQuery插件时总结的一些经验分享一下。

一、先看
jQuery(function(){ });
全写为
jQuery(document).ready(function(){ });

意义为在DOM加载完毕后执行了ready()方法。

二、再看
(function(){ })(jQuery);
其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象。

(function($) {…})(jQuery);

这里实际上是匿名函数,如下:

function(arg){…}
这就定义了一个匿名函数,参数为arg

而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:
(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这个匿名函数

而(function($){…})(jQuery)则是一样的,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery
相当于funtion output(s){…};output(jQuery);或者var fn=function(s){…};fn(jQuery);

$(function(){…});

或者:

jQuery(function($) {

});

允许你绑定一个在DOM(不包含图片)文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。

全写是:
$(document).ready(function(){

});

三、总结

jQuery(function(){ });用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在。不可用于存放开发插件的代码,因为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。
(function(){ })(jQuery);用于存放开发插件的代码,执行其中代码时DOM不一定存在,所以直接自动执行DOM操作的代码请小心使用。

Javascript 相关文章推荐
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
javascript的BOM汇总
Jul 16 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 #Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 #Javascript
jQuery实现视频作为全屏幕背景
Dec 18 #Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 #Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 #Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 #Javascript
JavaScript获取Url里的参数
Dec 18 #Javascript
You might like
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Javascript 实用小技巧
2010/04/07 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python提取字典key列表的方法
2015/07/11 Python
Python实现二叉堆
2016/02/03 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python中open函数的基本用法示例
2019/09/07 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
行政主管岗位职责
2013/11/18 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
医学专业自荐信
2014/06/14 职场文书
党校学习个人总结
2015/02/15 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python