简单谈谈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 相关文章推荐
文本加密解密
Jun 23 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
详解vue的diff算法原理
May 20 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 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/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
php 魔术方法详解
2014/11/11 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JS解析XML实例分析
2015/01/30 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Python简单日志处理类分享
2015/02/14 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python查看模块安装位置的方法
2018/10/16 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python随机模块random使用方法详解
2020/02/14 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
财务副总经理工作职责
2013/11/25 职场文书
团日活动总结书格式
2014/05/08 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python