简单谈谈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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
JavaScript小技巧整理
Dec 30 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
JavaScript canvas实现雨滴特效
Jan 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
超级简单的php+mysql留言本源码
2009/11/11 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Python使用configparser库读取配置文件
2020/02/22 Python
鲜花方阵解说词
2014/02/13 职场文书
蓝颜请假条
2014/04/11 职场文书
助理政工师申报材料
2014/06/03 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
出纳工作检讨书
2014/10/18 职场文书
高中生军训感言
2015/08/01 职场文书