当你第一眼看到“(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. java-银行卡基本信息查询

    用于验证的请求接口: https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo= ...

  2. 让你的chrome开发工具console支持jquery

    首先执行以下代码: ;(function(d,s){d.body.appendChild(s=d.createElement('script')).src='http://code.jquery.co ...

  3. bzoj 4766: 文艺计算姬 -- 快速乘

    4766: 文艺计算姬 Time Limit: 1 Sec  Memory Limit: 128 MB Description "奋战三星期,造台计算机".小W响应号召,花了三星期 ...

  4. URAL 1997 Those are not the droids you're looking for 二分图最大匹配

    Those are not the droids you're looking for 题目连接: http://acm.timus.ru/problem.aspx?space=1&num=1 ...

  5. Scala入门：从HelloWorld开始【源码及编译】

    最近在学习Scala语言,虽然还没有完全学通, 但是隐约可以体会到Scala的简洁和强大. 它既能让程序员使用函数式编程, 也提供了全面的面向对象编程. 在刚刚开始读<Scala编程>的时 ...

  6. 读书笔记_Effective_C++_条款二十八：避免返回handlers指向对象内部成分

    举个例子: class Student { private: int ID; string name; public: string& GetName() { return name; } } ...

  7. Microcontroller measures resistance without an ADC

    Sensors automate most of the processes in industry. Most of these sensors, such as those for ammonia ...

  8. Spring Bean init-method 和 destroy-method实例

    在Spring中,可以使用 init-method 和 destroy-method 在bean 配置文件属性用于在bean初始化和销毁某些动作时.这是用来替代 InitializingBean和Di ...

  9. PHP：同一件事，有太多的方式

    背景 刚接触PHP,发现PHP做一件事有太多的方式,挺灵活的,这或许是PHP的一种设计哲学,也有可能是语言演化的结果,下面举几个例子. 几个例子 在web中嵌入PHP代码. <?php  ?&g ...

  10. zend studio配置调试(Xdebug方式)

    1.下载xdebug http://xdebug.org/download.php 我下的是PHP 5.4 VC9 (32 bit) [当前系统php是php5.4.14(win32)版本] 2.配置 ...