当你第一眼看到“(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)的更多相关文章

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

    当你第一眼看到"(function($){...})(jQuery)"的时候.你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句--操,这他妈什么劳什子.时过境迁,对于如今无 ...

  2. JQuery -- Jquery 中的Ajax, Jquery解析xml文件

    1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...

  3. Jquery中日期插件jquery.datepick的使用

    jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...

  4. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. jQuery中的end()

    要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部 ...

  6. jQuery中$(function(){})与(function($){})(jQuery)的区别

    首先,这两个函数都是在页面载入后执行的函数,其中两者的区别在于: 在jQuery中$(function(){})等同于jQuery(function(){}),另一个写法为jQuery(documen ...

  7. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  8. 解决jQuery中美元符号（$）命名与别的js脚本库引用冲突方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  9. jQuery中 $ 符号的冲突问题

    jQuery中 $ 符号的冲突问题是常见问题之一.   在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码.当同一页面引用了jQuery多个版本 ...

随机推荐

  1. [资料分享]2016 黑马 Java 19期视频+Hadoop大数据实战视频

    下载链接: 链接:http://pan.baidu.com/s/1bToXK6 密码:7k43 解压密码: www.lthack.com 或者 2cifang.com 或者 2cifang.com_2 ...

  2. __autoload()尝试加载未定义的类

    在PHP5之前,如果需要使用一个类,只需要直接使用include/require将其包含进来即可.PHP5 以后提供了这样一个方法可以自动完成加载所需的类文件. 参见官网的例子: ./myClass. ...

  3. strong，weak, retain， assign的区别

    strong,weak, retain, assign的区别 strong与weak是由ARC新引入的对象变量属性 xcode 4.2(ios sdk4.3和以下版本)和之前的版本使用的是retain ...

  4. Android api SmsMessage类createFromPdu(byte[] pdu) is depracted(不推荐使用,过时的)

    我想实现一个,监听功能--当手机收到相关短信,触发一些时间,程序中 SmsMessage smsMessage = SmsMessage.createFromPdu((byte[]) obj); cr ...

  5. [BZOJ1997][HNOI2010] 平面图判定

    Description Input Output     是的..BZOJ样例都没给.     题解(from 出题人): 如果只考虑简单的平面图判定,这个问题是非常不好做的. 但是题目中有一个条件— ...

  6. 由overflow-x:scroll产生的收获

    我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...

  7. Reading C type declarations(引用http://unixwiz.net/techtips/reading-cdecl.html)

    Even relatively new C programmers have no trouble reading simple C declarations such as int foo[5]; ...

  8. CentOS7 编译安装 Nodejs (实测 笔记 Centos 7.0 + node 0.10.33)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...

  9. linux用户不在sudoers文件中

    *** is not in the sudoers file.  This incident will be reported."  (用户不在sudoers文件中--) 处理这个问题很简单 ...

  10. C\C++ 1A2B小游戏源码

    学了一段时间,心血来潮写了一个1A2B小游戏,很多人应该玩过,是一个挺有意思的益智小游戏,之前用易语言写过,现在又用C++重写了一下. 编译运行无错,整体程序设计思路为:进入循环,初始化游戏,读入一个 ...