Jquery中的(function($){...})(jQuery)
当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子。时过境迁,对于现在无比倚重Jquery的我,自感当时的自己是那么的无知,今天忙里偷闲,解释一下究竟“(function($){...})(jQuery)”该怎样理解:
代码一:
1
2
3
4
5
6
7
8
9
10
11
12
|
<title>代码一</title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <script type= "text/javascript" > (function(name){ alert(name); })( "GaoHuanjie" ); </script> |
说明:在浏览器中运行上面代码,会弹出一个对话框,对话框的内容为GaoHuanjie。
上面代码中执行的JavaScript脚本和“(function($){...})(jQuery)”是一样的,也就是说“(function($){...})(jQuery)”中的函数会自动被执行,那么究竟该怎样理解“(function($){...})(jQuery)”呢?“(function($){...})(jQuery)”实际上表示的是已处于调用状态的匿名函数:function($){...}是定义的匿名函数,参数为$(之所以将参数声明为$是为了不与其他库冲突);为了调用该函数则在该匿名函数的后面添上了括号和实参(这里为jQuery),但又由于操作符的优先级,函数本身也需要用括号,所以又为匿名函数添加了括号。
释疑解惑:
一、我运行下面代码为什么报错——jQuery is not defined:
1
2
3
4
5
6
7
8
9
10
11
12
|
<title>代码二</title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <script type= "text/javascript" > (function($){ alert($); })(jQuery); </script> |
嗯嗯,浏览器在解析上述js脚本时确实会出现问题,假如为jQuery添加英文双引号,再次使用浏览器运行上述脚本则不会出错,为什么不加就会出错呢,呵呵呵,其实这里的jQuery还是一个变量,如果为上述代码引入jQuery库,再次使用浏览器运行上述代码则不会出现问题:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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> |
在引入jQuery库后之所以不会出错是因为jQuery库中定义了jQuery变量。
二、和$(function(){ })相比,(function($){...})(jQuery)的执行时机也是在网页DOM加载完毕后才执行吗?
不是的,比如如下例子:
1
2
3
4
5
6
7
8
9
10
11
12
|
<title>代码四</title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <script type= "text/javascript" > (function(){ alert(document.getElementById( "name" ).value); })(); </script> <input type= "hidden" id= "name" name= "name" value= "GaoHuanjie" > |
上述例子在浏览器中运行的时候会报错,究其原因(function(){...})()函数的执行时机并不是在DOM加载完毕后才执行,而是随着页面自上而下来执行,如果将其改成如下代码则再次使用浏览器运行脚本则不会出现问题:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html> <title>代码五</title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <input type= "hidden" id= "name" name= "name" value= "GaoHuanjie" > <script type= "text/javascript" > (function(){ alert(document.getElementById( "name" ).value); })(); </script> |
一句话:“$(function(){ });”用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在;“(function(){})(jQuery);”用于存放开发插件的代码,执行其中代码时DOM不一定存在。
Jquery中的(function($){...})(jQuery)的更多相关文章
- Jquery—Jquery中的(function($){...})(jQuery)
当你第一眼看到"(function($){...})(jQuery)"的时候.你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句--操,这他妈什么劳什子.时过境迁,对于如今无 ...
- JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery中的end()
要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部 ...
- jQuery中$(function(){})与(function($){})(jQuery)的区别
首先,这两个函数都是在页面载入后执行的函数,其中两者的区别在于: 在jQuery中$(function(){})等同于jQuery(function(){}),另一个写法为jQuery(documen ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 解决jQuery中美元符号($)命名与别的js脚本库引用冲突方法
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...
- jQuery中 $ 符号的冲突问题
jQuery中 $ 符号的冲突问题是常见问题之一. 在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码.当同一页面引用了jQuery多个版本 ...
随机推荐
- 巴特沃斯(Butterworth)滤波器 (2) - 双线性变换
这里接着上篇讲一下双线性变换Bilinear Transformation,它实现了模拟信号(连续域)与数字信号(离散域)之间的转换. 双线性变换公式如下: 反推可得到: 因此可以根据连续域传递函数推 ...
- 识别快递单号(2) - 加载图片到canvas
传送门: 识别快递单号(1) - 图像处理 转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html 上篇说到我 ...
- T-SQL Recipes之Separating elements
Separating elements Separating elements is a classic T-SQL challenge. It involves a table called Arr ...
- FileReader获取文件的base64编码
<input type="file" id="picFile" /> function readFile() { var obj = documen ...
- (RMQ版)LCA注意要点
inline int lca(int x,int y){ if(x>y) swap(x,y); ]][x]]<h[rmq[log[y-x+]][y-near[y-x+]+]])? rmq[ ...
- 1. Activiti 运行时表信息总结
Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. ACT_RE_*: 'RE'表示repository. 这个前缀 ...
- less杂记
less最管用的就是嵌套,让css关系很清晰,虽然增加代码量,我认为也是值得的,不用less的话会有些怀念嵌套的各种优势,但是层次太多,嵌套太长会让可读性变得很差,这点也是个问题. 1.less中的& ...
- SICAU教务系统登录密码加密算法的VB方式实现
关于一个算法.这个算法是SICAU教务系统在账号登录时采取的一个加密算法.算法的实现并不复杂. 具体如下: Function Form1pwdvalue(ByVal pwdvalue As Strin ...
- svn比对
svn版本管理, 先要把你项目添加到svn版本管理中,添加完之后,文件夹就有一个绿色的勾,已经被svn进程管理了. 文件夹里面,每一层级,都有一个.svn文件夹,这个很重要,就是靠这个存放原有的文件, ...
- webstorm快捷键
webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目.今天整理了一些webstorm比较实用的快捷键: Ctrl+/ 或 Ctrl+Shift+/ 注释(// ...