当你第一眼看到“(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. 【欧拉定理】BZOJ3884-上帝与集合的正确用法

    [题目大意] 求2^(2^(2^(2^(2^...)))) mod p. [思路] 蒟蒻在知道用欧拉做的前提下,对这题目瞪了好久没有明白,看了正解扑通一声跪下来orz直接搬运popoqqq大爷的吧反正 ...

  2. loj117 有源汇有上下界最小流

    link 题意&题解 code: #include<bits/stdc++.h> #define rep(i,x,y) for (int i=(x);i<=(y);i++) ...

  3. SpringMVC集成Swagger插件以及Swagger注解的简单使用

    一.简介 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新 .接口的方法,参数和模型 ...

  4. noip200805笨小猴

    试题描述: 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大!这种方法的具体描述如下:假设maxn是单词中出现次数最 ...

  5. MySQL -- 性能优化的最佳20+条经验

    FROM:http://www.cnblogs.com/shlhm/p/3235848.html ,学习学习~ 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库 ...

  6. python开发_IDEL(Python GUI)的使用方法

    在这篇blog"Python开发_python的安装"里面你会了解到python的安装. 安装后,我们希望能够运用python GUI来运行一些我们编写的程序,那么Python G ...

  7. Matlab 曲线绘制之线型和颜色 示例

    估计很多人会碰到,当绘制的曲线特别多的时候,需要用不同的颜色和线型区分开这些曲线.根据STC论文,自己整理了一个颜色和线型的例子,供大家直接使用,直接引用PlotStyle这个数据结构就可以了. 示例 ...

  8. 解决Could not open input file: think问题

    前几天做项目的时候,突然想用命令行创建TP5的控制器以及模型等 输入命令: >php think make:controller admin/Abc 报错如下: Could not open i ...

  9. glob函数的使用

    glob库函数用于Linux文件系统中路径名称的模式匹配,即查找文件系统中指定模式的路径.注意,这不是正则表达式匹配,虽然有些相似,但还是有点差别. glob函数原型       #include & ...

  10. [转] 上级向的十个iOS面试问题

    上级向的十个iOS面试问题 转自 http://onevcat.com/2013/04/ios-interview/ 不管对于招聘和应聘来说,面试都是很重要的一个环节,特别对于开发者来说,面试中的技术 ...