当你第一眼看到“(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. CodeM资格赛5

    早上起床太晚,最后没时间了.. 不是ac代码,下次题目在oj上线的时候再去做一下.. #include<iostream> #include<cstdio> #include& ...

  2. 使用Mysql慢查询日志对有效率问题的SQL进行监控

    输入命令:show variables like 'slow%' 可以发现 slow_query_log 为 OFF(默认),表示未开启慢查询日志 slow_query_log_file 为慢查询日志 ...

  3. CentOS 6.9设置阿里云源/163源

    阿里云: 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS ...

  4. Ext.form.ComboBox常用属性详解

    Ext.form.ComboBox常用属性详解 标签: Extjs js combo js 代码 var combo = new Ext.form.ComboBox({ store : new Ext ...

  5. Boost Converter

    Single Inductor Buck-Boost Converter in Tiny WCSP The TPS63036 is a non inverting buck-boost convert ...

  6. [转]C#中图片.BYTE[]和base64string的转换

    本文转自:http://blog.csdn.net/thebesttome/article/details/6870155 在C#中 图片到byte[]再到base64string的转换: Bitma ...

  7. mount umont

    如果想在运行的Linux下访问其它文件系统中的资源的话,就要用mount命令来实现. 2.      mount的基本用法是?格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有: ...

  8. MERGE新特性(UPDATE WHERE,DELETE WHERE,INSERT WHERE)

    MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查询的连接条件对另外一张表进行查询,连接条件匹配上的进行UPDATE,无法匹配的执 ...

  9. BigDecimal类型数据保留两位小数即百分比运算

    方法示例: DecimalFormat df = new DecimalFormat("0.00"); Object price = 2; Object price1 = 2.3; ...

  10. @使用javap反编译Java字节码文件

    在Sun公司提供的JDK中,就已经内置了Java字节码文件反编译工具javap.exe(位于JDK安装目录的bin文件夹下). 我们可以在dos窗口中使用javap来反汇编指定的Java字节码文件.在 ...