简单谈谈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中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
原生JavaScript实现购物车
Jan 10 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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
星际争霸任务指南——人族
2020/03/04 星际争霸
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python简单进程锁代码实例
2015/04/27 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python实现日志按天分割
2019/07/22 Python
python解析多层json操作示例
2019/12/30 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
董事长岗位职责
2013/11/30 职场文书
感恩节活动方案
2014/01/27 职场文书
生产车间标语
2014/06/11 职场文书
体育馆的标语
2014/06/24 职场文书
物业接待员岗位职责
2015/04/15 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android