简单谈谈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 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
JS中的模糊查询功能
Dec 08 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
js删除对象中的某一个字段的方法实现
Jan 11 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
一个基于PDO的数据库操作类
2011/03/24 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
input框中的name和id的区别
2016/11/16 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Python的两道面试题
2013/06/29 面试题
爱岗敬业演讲稿
2014/05/05 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis