简单谈谈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 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
Angularjs实现数组随机排序的方法
Oct 02 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php生成图片验证码的方法
2016/04/15 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
使用console进行性能测试
2015/04/27 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
35个Python编程小技巧
2014/04/01 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
写自荐信的七个技巧
2013/10/15 职场文书
预备党员党校学习自我评价分享
2013/11/12 职场文书
技术总监的工作职责
2013/11/13 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书