当你第一眼看到“(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. 关于null值的排序

    关于空值null的排序问题   Oracle排序中NULL值处理的五种常用方法: 1.缺省Oracle在Order by 时缺省认为null是最大值,所以如果是ASC升序则排在最后,DESC降序则排在 ...

  2. Asia Hong Kong Regional Contest 2016

    A. Colourful Graph 可以在$2n$步之内实现交换任意两个点的颜色,然后就可以构造出方案. #include <bits/stdc++.h> using namespace ...

  3. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  4. Hadoop各商业发行版之比较

    Hadoop的发行版除了社区的Apache hadoop外,cloudera,hortonworks,mapR,EMC,IBM,INTEL,华为等等都提供了自己的商业版本.商业版主要是提供了专业的技术 ...

  5. xml.etree.ElementTree对CDATA的输出

    xml.etree.ElmentTree不支持CDATA 的输出,但是支持Comment的输出.由于在项目中需要输出带有CDATA块的XML文本,参考Comment的做法,修改ElmentTree中的 ...

  6. 微信第三方平台定时接收component_verify_ticket

    背景: 获取第三方平台令牌(component_access_token),增加了component_verify_ticket参数.component_verify_ticket由公众平台每隔10分 ...

  7. 最小生成树 prime + 队列优化

    存图方式 最小生成树prime+队列优化 优化后时间复杂度是O(m*lgm) m为边数 优化后简直神速,应该说对于绝大多数的题目来说都够用了 具体有多快呢 请参照这篇博客:堆排序 Heapsort / ...

  8. C++类型转换函数

    1.什么是类型转换函数 类型转换函数的作用是将一个类的对象转换成另一类型的数据. class testclass { private: int r; int m; public : testclass ...

  9. 关于Java8函数式编程你需要了解的几点

    函数式编程与面向对象的设计方法在思路和手段上都各有千秋,在这里,我将简要介绍一下函数式编程与面向对象相比的一些特点和差异. 函数作为一等公民 在理解函数作为一等公民这句话时,让我们先来看一下一种非常常 ...

  10. ios视频播放器，代码和界面分离

    最近业余时间整理的一个ios播放器,界面采用storyboard,以前几乎都是用代码布局,但是用过一个项目storyboard后,就感觉storyboard很靠谱,团队合作版本控制的问题解决其实很简单 ...