简单谈谈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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
JS回调函数深入理解
Oct 16 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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程序?
2006/12/08 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
网页常用特效代码整理
2006/06/23 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
Move.js入门
2017/02/08 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
浅谈Python NLP入门教程
2017/12/25 Python
浅谈django的render函数的参数问题
2018/10/16 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
毕业生的自我评价
2013/12/30 职场文书
小学生环保标语
2014/06/13 职场文书
会计个人实习计划书
2014/08/15 职场文书
大连星海广场导游词
2015/02/10 职场文书
结婚主持人致辞
2015/07/28 职场文书
英语导游欢迎词
2015/09/30 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers