当你第一眼看到“(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. Ajax浅学习

    写在前面:响应事件 function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, ...

  3. Windows服务安装

    运行cmd 输入:cd C:\Windows\Microsoft.NET\Framework\v4.0.30319  按回车 输入安装服务路径:如(installutil.exe D:\Project ...

  4. PHP：（ && ）逻辑与运算符使用说明

    第一次看到以下语句的写法大惑不解 ($mCfg['LockChinaIp']==1 && (int)$_SESSION['AdminUserId']==0 && sub ...

  5. CentOS利用postfix搭建邮件服务器

    之前我用nodemailer通过163邮箱来发送邮件,不过没过几天就一直ETIMEDOUT,不知道什么原因,想着还是自己搭一个来发邮件可能靠谱点(flag?) 安装postfix CentOS 7 自 ...

  6. fsockopen读取、发送cookie及注意事项 -代码示例

    function httpPost($url, $data,$cookieStr='') { $url_array = parse_url($url); $host = $url_array['hos ...

  7. slf4j的简单介绍

    SLF4J,Simple Logging Facade for JAVA,是一个十分简单的的日志facade,对于不同的日志框架做了一个封装. 对比common logging,Common logg ...

  8. java-通过JDBC操作数据库

    一.加载驱动 这里我们用Class.forname();来加载驱动,用此语句会提示排除异常. Class.forName("com.mysql.jdbc.Driver"); 括号中 ...

  9. pythonchallenge 解谜 Level 5

    第五关的确很坑爹... 不过,根据之前的思路,我想着是把信息放在了 “源码” 中. 翻了下源码.有用的东西在以下部分. <html><head> <title>pe ...

  10. 用itextsharp打印pdf示例

    学习了用itextsharp输出PDF文档,支持用XML定义文档,可定义多个数据源,简单的表达式,用于项目中效果还不错,其中PdfPageEvent类由包大人提供. 示例程序定义了一个简单的xml文件 ...