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

最新推荐文章于 2020-06-10 14:15:04 发布
最新推荐文章于 2020-06-10 14:15:04 发布
阅读量209 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hkgtwed/article/details/39026155
版权
当你第一眼看到“(function($){...})(jQuery)”的时候，你有什么感觉？呵呵呵，我当时还是止不住的从心底里骂了一句——操，这他妈什么劳什子。时过境迁，对于现在无比倚重Jquery的我，自感当时的自己是那么的无知，今天忙里偷闲，解释一下究竟“(function($){...})(jQuery)”该怎样理解：

        代码一：

[html] view plain copy print ?
  1. <html> 
  2.     <head> 
  3.         <title>代码一</title> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.         <script type="text/javascript"> 
  6.             (function(name){ 
  7.                 alert(name); 
  8.             })("GaoHuanjie"); 
  9.         </script> 
  10.     </head> 
  11.     <body> 
  12.  
  13.     </body> 
  14. </html>  
<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] view plain copy print ?
  1. <html> 
  2.     <head> 
  3.         <title>代码二</title> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.         <script type="text/javascript"> 
  6.             (function($){ 
  7.                 alert($); 
  8.             })(jQuery); 
  9.         </script> 
  10.     </head> 
  11.     <body> 
  12.  
  13.     </body> 
  14. </html>  
<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] view plain copy print ?
  1. <html> 
  2.     <head> 
  3.         <title>代码三</title> 
  4.         <script type="text/javascript" src="./jquery-1.6.2.js"></script> 
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  6.         <script type="text/javascript"> 
  7.             (function($){ 
  8.                 alert($); 
  9.             })(jQuery); 
  10.         </script> 
  11.     </head> 
  12.     <body> 
  13.  
  14.     </body> 
  15. </html>  
<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] view plain copy print ?
  1. <html> 
  2.     <head> 
  3.         <title>代码四</title> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.         <script type="text/javascript"> 
  6.             (function(){ 
  7.                 alert(document.getElementById("name").value); 
  8.             })(); 
  9.         </script> 
  10.     </head> 
  11.     <body> 
  12.         <input type="hidden" id="name" name="name" value="GaoHuanjie" /> 
  13.     </body> 
  14. </html>  
<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] view plain copy print ?
  1. <html> 
  2.     <head> 
  3.         <title>代码五</title> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5.     </head> 
  6.     <body> 
  7.         <input type="hidden" id="name" name="name" value="GaoHuanjie" /> 
  8.         <script type="text/javascript"> 
  9.             (function(){ 
  10.                 alert(document.getElementById("name").value); 
  11.             })(); 
  12.         </script> 
  13.     </body> 
  14. </html>  
<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不一定存在。

hkgtwed
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入理解jquery的$.extend()、$.fn和$.fn.extend()
10-19
在jQuery中，`$.extend()`、`.fn`（即`jQuery.fn`）和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...
jQuery中$.each使用详解
10-24
主要介绍了jQuery中$.each使用详解,需要的朋友可以参考下
jQuery(function(){})与(function(){})(jQuery)的区别
weixin_30508309的博客
12-19 87
【http://eason26-li.iteye.com/blog/520188】开发jQuery插件时总结的一些经验分享一下。一、先看jQuery(function(){});全写为jQuery(document).ready(function(){});意义为在DOM加载完毕后执行了ready()方法。二、再看(function(){})(jQuery)；其实...
(function($) {...})(jquery);这种定义方式是什么意思？
qq_21071965的博客
05-12 797
1.什么意思？ 2.能够完成什么功能？ 问题补充： 非常感谢你的回答，但是还有一些地方不太清楚比如： (function($) {...})(jquery);中 (function($) {...})是个对象那(jquery);是什么？ 如果jquery是参数那么(jquery)他的方法体在那？不需要吗？juery是什么 你的回答非常详细了，如果不给点分都不好意思了。 我刚刚接触j
jquery语法学习04（(function(){})()概念与一些静态函数的用法）
时意
08-06 221
快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了快下班了 1）var 变量=$.trim(参数); 去掉左右空格 2）var 变量=$.isArray(参数); 是不是数组； 3）var 变量=$.isWindow(参数); 是不是window对象 4）var 变量=$.isFunction(参数); 是不是一个函数对象 上...
jq中jQuery(function(){ })与(function(){})(jQuery) 的区别
weixin_38098192的博客
04-09 3916
jQuery(function(){ })：是$(document).ready(function(){})的简写，即在DOM加载完成时运行的代码 (function(){})(jQuery)：实际上是执行()(param)匿名方法，只不过传递了jquery对象，相当于 function aa($){} aa(jQuery) (function(){})(jQuery) 是初始化jq...
关于jquery的$(function(){})
@~莲坂果贸的博客
04-09 6240
Jquery实现$.fn.extend和$.extend函数
11-26
在jQuery库中，`$.fn.extend` 和 `$.extend` 是两个非常重要的功能，它们用于扩展jQuery的功能和对象。这两个函数虽然名字相似，但作用却截然不同。 首先，`$.fn.extend` 是用于扩展jQuery选择器对象的方法。当你...
浅谈jquery中的each方法$.each、this.each、$.fn.each
11-22
$.each([1,2,3,4],function(){ 　//$(this)==数组中的每一个数组（如果数组是对象，就是对象） }); 方法三 应有场景有点不一样 this.each(function(){ }) 扩展jQuery对象方法 应该是 j
jquery function 参数传递
pingnanlee的专栏
08-06 1万+
jquery的function函数中使用外部变量： //如何取得i的变量 for(i=0;i<3;i++) { $.get("/test.html", function(data){ alert(i) }); } //使用闭包： for(i=0;i<3;i++) { (function(index){ $.get("/test.html", function(dat
formToArray(true)-JQuery API
javaloveiphone的专栏
09-01 4554
formToArray(true) formToArray采集表单数据到一个可以传递到以下Ajax函数的对象数组:$.get, $.post, 或 load.  Each object in the array has both a 'name' and 'value' property. An example of an array for a simple login form might
jQuery(function($){...})与(function($){...})(jQuery)知识点分享
xiaozhen0610的博客
06-10 210
写jQuery插件时一些经验分享一下。一、推荐写法 jQuery(function($){ //coding }); 全写为 jQuery(document).ready(function($){ //coding }); 1、意义为在DOM加载完毕后执行了ready()方法。 2、$私有变量，与其他插件不冲突 二、不推荐写法 (function($){ //coding })(jQuery); 1、立即执行函数；相当于先申明一个函数，声明完后...
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解
王德封-逐浪
01-26 11万+
1、(function($) {…})(jQuery); 1）、原理： 这实际上是匿名函数，如下： function(arg){…} 这就定义了一个匿名函数，参数为arg 而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即： (function(arg){…})(param) 这就相当于定义了一个参数为arg的匿名函数，并且将pa
requirejs如何使用define定义一个模块
OceanSky的专栏
02-28 1万+
AMD规范全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。 require定义一个模块是通过 define function (name, deps, callback)完成的,第一个参数是定义模块名，第二个参数是传入定义模块所需要的依赖，第三个函数则是...
jQuery中$(function()与(function($)等的区别详细讲解
热门推荐
javazw123的专栏
03-02 11万+
(function($) {…})(jQuery);这里实际上是匿名函数，如下：function(arg){…}这就定义了一个匿名函数，参数为arg而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：(function(arg){…})(param)这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数而(function($){…})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery相当于fu
jQuery中$(function(){})与（function($){})(jQuery)、$(document).ready(function(){})等的区别讲解...
weixin_30340617的博客
09-29 225
1.（function($){...}）(jQuery); 　　（1）、原理： 　　 这实际上是匿名函数，如下： 　　　　function（arg）{...} 　　　　这就定义了一个匿名函数，参数为arg；而调用函数是，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即(function(arg){...})(param) 　　　　这就相当于定义了一个...
jquery中(function($){...})(jQuery)是什么
weixin_33755554的博客
04-22 319
调用函数 时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：(function(arg){...})(param)而(function($){...}) (jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery其实就等于var fn = function($){....};fn(jQuery);其实可以这么理解，不过要注意的是fn...
jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别及用法
weixin_34212762的博客
02-24 152
假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html   query是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载...
jQuery通过$.browser检测浏览器类型
然而，由于$.browser在较新版本的jQuery中已被废弃，推荐使用其他现代方法来检测浏览器类型，如`navigator.userAgent`字符串的直接匹配，或者使用更现代的特性检测库，如Modernizr。这种方法更加可靠且面向未来，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值