当你第一眼看到“(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. POJ1716 贪心

    题目大意:在[0,10000]上给出n个区间,要求在区间选整数点,每个区间至少包含两个点,问至少要几个点.题目保证有解决方案. 题目分析: 我们做过在区间上至少包含一个点的题目.类似的方法,我们先排序 ...

  2. <form> 标签 // HTML 表单 // from 表单转换成json 格式

    <form> 标签   // HTML 表单    // from 表单转换成json 格式 form 表单,对开发人员来说是在熟悉不过的了,它是页面与web服务器交互时的重要信息来源 表 ...

  3. Codeforces Round #348 (VK Cup 2016 Round 2, Div. 2 Edition) D. Little Artem and Dance 模拟

    D. Little Artem and Dance 题目连接: http://www.codeforces.com/contest/669/problem/D Description Little A ...

  4. HDU 5656 CA Loves GCD dp

    CA Loves GCD 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5656 Description CA is a fine comrade w ...

  5. Codeforces Beta Round #4 (Div. 2 Only) D. Mysterious Present 记忆化搜索

    D. Mysterious Present 题目连接: http://www.codeforces.com/contest/4/problem/D Description Peter decided ...

  6. Codeforces Round #300 A. Cutting Banner 水题

    A. Cutting Banner Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/538/pro ...

  7. leetcode187. Repeated DNA Sequences

    https://leetcode.com/problems/repeated-dna-sequences/#/description   https://leetcode.com/problems/r ...

  8. CentOS6 下编译安装 MySQL 5.6.26

    CentOS6下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版本的5.6.26. 一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | ...

  9. Spring通过Gmail SMTP服务器MailSender发送电子邮件

    Spring提供了一个有用的“org.springframework.mail.javamail.JavaMailSenderImpl”类,通过JavaMail API 简化邮件发送过程.这里有一个项 ...

  10. ffmpeg的IO操作

    ffmpeg 可以通过IO操作将数据读取和存储在文件或网络中 作为数据的读取和写入地址,数据被存放在file,http, ffmpeg 不仅可以编解常用的音视频格式,还可以将数据导入/导出到各种媒介中 ...