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不一定存在。

时间: 2024-10-26 20:37:04

Jquery中的(function($){...})(jQuery)的相关文章

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

jsp的代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd

JQuery中的$符号的作用----网摘

jQuery中的“$” 在jQuery中,最频繁使用的符号“$”.$提供了各种各样丰富的功能, 包括选择页面中的一个或是一类元素,作为功能函数的前缀,window.onload的 完善,创建页面的DOM节点等... 1.选择器 在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(ID选择器) ,而jQuery中的"$"作为选择器,同样是选择某一类或某一类元素,只不过jQuery提供了 更多更全面的选择方式.并且为用户处理了浏览器的兼容问题 CSS可以通过如下代码来

jQuery中的编程范式

浏览器前端编程的面貌自2005年以来已经发生了深刻的变化,这并不简单的意味着出现了大量功能丰富的基础库,使得我们可以更加方便的编写业务代码,更重要的是我们看待前端技术的观念发生了重大转变,明确意识到了如何以前端特有的方式释放程序员的生产力.本文将结合jQuery源码的实现原理,对javascript中涌现出的编程范式和常用技巧作一简单介绍.    1. AJAX: 状态驻留,异步更新      首先来看一点历史. A. 1995年Netscape公司的Brendan Eich开发了javacri

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

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu

jQuery中美元符号&quot;$&quot;的用法

jQuery中的“$” 在jQuery中,最频繁使用的符号“$”.$提供了各种各样丰富的功能, 包括选择页面中的一个或是一类元素,作为功能函数的前缀,window.onload的 完善,创建页面的DOM节点等... 1.选择器 在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(ID选择器) ,而jQuery中的"$"作为选择器,同样是选择某一类或某一类元素,只不过jQuery提供了 更多更全面的选择方式.并且为用户处理了浏览器的兼容问题 CSS可以通过如下代码来

jQuery入门(1)jQuery中万能的选择器

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应用 编写任何JavaScript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如 “拥有title属性并且值中包含test的<a>元素”,完成这些工作只需要编写一个jQuery选择器字符串, 学习jQuery选择器是学习jQuery最重要

jQuery中的end()

要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部维护着一个jQuery对象栈.每个遍历方法都会找到一组新元素(一个jQuery对象),然后jQuery会把这组元素推入到栈中. 可能上面这句话让人读起来有些茫然,不要紧,我们来一个例子: <!DOCTYPE html> <html lang="en"> <he

jQuery中 $ 符号的冲突问题

jQuery中 $ 符号的冲突问题是常见问题之一. 在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码.当同一页面引用了jQuery多个版本或者jQuery与某些其他js库产生冲突,控制台就会报错. 同一个页面多个版本冲突解决办法 你可能会问,为什么在一个页面上会引用多个版本的jQuery,只引用一个不就好了吗? 答案是:不行.一般要用到两个(或以上)版本的jQuery库的原因是:现有的网站已经用了旧版本的jQuery以及相关插件,直接将j

【学习笔记】jquery中的事件和动画

---恢复内容开始--- jquery中的事件 jquery用$(document).ready()方法来代替传统JavaScript的window.onload方法. window.onload方法在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后执行,通过 $(document).ready()方法注册的事件处理程序的DOM完全就绪时就可以被调用.此时,网页中的所有元素对jquery都是可以访问的. load()方法会在元素的onload事件中绑定一个处理函数,若绑定给windo