当你第一眼看到“(function($){...})(jQuery)”的时候。你有什么感觉？呵呵呵，我当时还是止不住的从心底里骂了一句——操，这他妈什么劳什子。时过境迁，对于如今无比倚重Jquery的我，自感当时的自己是那么的无知，今天忙里偷闲。解释一下到底“(function($){...})(jQuery)”该如何理解：

代码一：

<html>

	<head>

		<title>代码一</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<script type="text/javascript">

			(function(name){

				alert(name);

			})("GaoHuanjie");

		</script>

	</head>

	<body>

	</body>

</html>

说明：在浏览器中运行上面代码。会弹出一个对话框。对话框的内容为GaoHuanjie。

上面代码中运行的JavaScript脚本和“(function($){...})(jQuery)”是一样的。也就是说“(function($){...})(jQuery)”中的函数会自己主动被运行，那么到底该如何理解“(function($){...})(jQuery)”呢？“(function($){...})(jQuery)”实际上表示的是已处于调用状态的匿名函数：function($){...}是定义的匿名函数，參数为$（之所以将參数声明为$是为了不与其它库冲突）；为了调用该函数则在该匿名函数的后面添上了括号和实參（这里为jQuery），但又由于操作符的优先级，函数本身也须要用括号，所以又为匿名函数加入了括号。
        释疑解惑：

一、我运行以下代码为什么报错——jQuery is not defined：

<html>

	<head>

		<title>代码二</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<script type="text/javascript">

			(function($){

				alert($);

			})(jQuery);

		</script>

	</head>

	<body>

	</body>

</html>

嗯嗯。浏览器在解析上述js脚本时确实会出现故障，假如为jQuery加入英文双引號，再次使用浏览器运行上述脚本则不会出错。为什么不加就会出错呢，呵呵呵，事实上这里的jQuery还是一个变量。假设为上述代码引入jQuery库，再次使用浏览器运行上述代码则不会出现故障： 

<html>

	<head>

		<title>代码三</title>

		<script type="text/javascript" src="./jquery-1.6.2.js"></script>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<script type="text/javascript">

			(function($){

				alert($);

			})(jQuery);

		</script>

	</head>

	<body>

	</body>

</html>

【0分下载资源】

在引入jQuery库后之所以不会出错是由于jQuery库中定义了jQuery变量。

二、和$(function(){ })相比，(function($){...})(jQuery)的运行时机也是在网页DOM载入完成后才运行吗？

不是的，比方例如以下样例：

<html>

	<head>

		<title>代码四</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<script type="text/javascript">

			(function(){

				alert(document.getElementById("name").value);

			})();

		</script>

	</head>

	<body>

		<input type="hidden" id="name" name="name" value="GaoHuanjie" />

	</body>

</html>

上述样例在浏览器中运行的时候会报错。究其原因(function(){...})()函数的运行时机并非在DOM载入完成后才运行，而是随着页面自上而下来运行，假设将其改成例如以下代码则再次使用浏览器运行脚本则不会出现故障： 

<html>

	<head>

		<title>代码五</title>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	</head>

	<body>

		<input type="hidden" id="name" name="name" value="GaoHuanjie" />

		<script type="text/javascript">

			(function(){

				alert(document.getElementById("name").value);

			})();

		</script>

	</body>

</html>

一句话：“$(function(){ });”用于存放操作DOM对象的代码，运行当中代码时DOM对象已存在；“(function(){})(jQuery);”用于存放开发插件的代码，运行当中代码时DOM不一定存在。

Jquery—Jquery中的(function($){...})(jQuery)的更多相关文章

  1. Jquery中的(function($){...})(jQuery)

    当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...

  2. jQuery Mobile 中创建按钮

    在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...

  3. Jquery学习笔记：获取jquery对象的基本方法

    jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...

  4. jQuery（1）——了解jQuery

    jQuery 终于开始了jQuery的学习了,好开心,虽然感觉JavaScript并没有学好,尴尬.木事,咋们慢慢来.fighting [jQuery简介] jQuery是继Prototype之后又一 ...

  5. jQuery插件中的this指的是什么

    在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...

  6. jquery ui 中的插件开发

    1  $.widget() 必须引用 <script src=")" type="text/javascript"></script> ...

  7. 详解jquery插件中;(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...

  8. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. [CODE FESTIVAL 2016]Problem on Tree

    题意:给一棵树,对于一个满足以下要求的序列$v_{1\cdots m}$,求最大的$m$ 对$\forall1\leq i\lt m$,路径$(v_i,v_{i+1})$不包含$v$中除了$v_i,v ...

  2. hihocoder 1522 : F1 Score

    题目链接   时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和他的小伙伴们一起写了很多代码.时间一久有些代码究竟是不是自己写的,小Hi也分辨不出来了. 于是他实现 ...

  3. Linux下同一网段内的IP中两台主机通信不经过路由器（ARP）（转）

    答案一:同一网段A与B通信,不需要路由器介入. A直接广播ARP request 到广播域,B处于同一广播域,可以接收到ARP request,B用单播方式直接告诉A自己的MAC B 地址.A收到B的 ...

  4. Pylons Controller里面Session.commit()总是出现rollback

    Pylons Controller里面执行修改数据库表,总是不成功. 然后通过各种手段: 1.js打印返回值 2.不修改表单提交和修改表单提交,结果比较: 3.通过在Pylons Controller ...

  5. KD100遥控生成仪

    KD100是KEYDIY公司开发的一个强大的车用/民用遥控器生成工具,所生成的遥控器都具备不重码,质量稳定的特点. 通过采用英飞凌和NXP等公司开发的超级芯片,KD100巧妙的解决了各类型遥控器的兼容 ...

  6. 【转】2012年6月26 – PPS网络电视PHP工程师最新面试题

    每一次面试都是一场较量,和面试官,更是和你自己! 前言:虽然面试职位是PHP工程师,但题目仅绝非限于PHP,甚至都没有多少PHP的题!inner peace!希望能给你带了一丝帮助. PPS网络电视面 ...

  7. POJ2352【树状数组】

    个人NO.1 一开始题意理解有错. 一星星左下边有N颗星星,那它的等级就是N. 一开始理解必须X,Y两个坐标都小于,后来根据样例看了一下只要左下方即可,X,Y坐标都小于等于即可,但不包括星星本身. # ...

  8. FIS3配置fis-conf.js

    设置规则的配置接口: fis.match(selector, props); 1.添加md5戳:对 js.css.png 图片引用 URL 添加 md5 戳: fis.match('*.{js,css ...

  9. 用Latex写IEEE论文

    如果在搞科研,想在IEEE上发表文章,那么就不得不用IEEE的论文模板,分为doc版本和Tex版本.Tex是高德纳·纳什所写,大牛级的任务,写过<计算机程序设计艺术>,曾经是美国最年轻的科 ...

  10. Robot Framework 安装及环境配置

    Robot Framework 安装及环境配置 Robot Framework 介绍 Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以 ...