当你第一眼看到“(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. 面试中常问的有关随机选取k个数的总结

    1.在半径为1的圆中随机选取一点. 2.给定一个未知长度的整数流,如何随机选取一个数 3.给定一个数据流,其中包含无穷尽的搜索关键字(比如,人们在谷歌搜索时不断输入的关键字).如何才能从这个无穷尽的流 ...

  2. servlet中文乱码问题

    通过response对象向页面输出内容时遇到的乱码问题可分为两种情况 1.字节流 字节流输出时可以通过设置响应头"Content-Type"的值为"text/html;c ...

  3. Devexpress

    1.隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=Table.Rows[gri ...

  4. 通过NFS（nfsroot）启动linux系统

    Mounting the root filesystem via NFS (nfsroot) 英文原文位于inux内核源代码中的"Documentation/filesystems/nfs/ ...

  5. Android Intent Flags

    Intent,顾名思义,即意图,通常用它来启动一个应用程序组件( Activity, Service, 或者 BroadCast Receiver ).在启动一个新的 Activity 时,可以通过给 ...

  6. Android之Json的学习

    json数据包含json对象,json数组,对象是{ },数组是[ ], 数组里面还可以包含json对象,json对象之间是用逗号(,)隔开 形式如下: { "languages" ...

  7. 内存不足时，调用ajax报的错

    在error中遍历出来的异常   很难见

  8. Unity3D UGUI之DoTweenAnimation脚本控制动画方法

    DOTweenAnimation脚本: Loops循环:-1时即永久循环播放. Loops Type 是选择播放模式. Ease属性里有很多,暂时只知道Linear的效果,其他有待单独写. ID下面可 ...

  9. Swift库运行崩溃

    报错如下: 解决方法: 退出 Xcode 找到 DerivedData 文件夹 删除 (路径: ~/Library/Developer/Xcode/DerivedData) 删除 com.apple. ...

  10. 谢欣伦 - OpenDev原创例程 - 网络摄像机WebCamera

    Win7没有预装摄像头软件,打开摄像头通常需要第三方软件来完成.第三方软件,好的要收费,免费的又没几款,其中功能完整的寥寥可数.正好我在做一个数字摄像头视频捕获的功能,经过两周的整理优化,我做了一个简 ...