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不一定存在。
Jquery中的(function($){...})(jQuery)的更多相关文章
- Jquery—Jquery中的(function($){...})(jQuery)
当你第一眼看到"(function($){...})(jQuery)"的时候.你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句--操,这他妈什么劳什子.时过境迁,对于如今无 ...
- JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery中的end()
要说end(),我们就不得不说prevObject. 在jQuery中,每个jQuery对象都有一个prevObject属性 var $p = $('p'); 这个属性是做什么的呢? jQuery内部 ...
- jQuery中$(function(){})与(function($){})(jQuery)的区别
首先,这两个函数都是在页面载入后执行的函数,其中两者的区别在于: 在jQuery中$(function(){})等同于jQuery(function(){}),另一个写法为jQuery(documen ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 解决jQuery中美元符号（$）命名与别的js脚本库引用冲突方法
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...
- jQuery中 $ 符号的冲突问题
jQuery中 $ 符号的冲突问题是常见问题之一. 在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码.当同一页面引用了jQuery多个版本 ...
随机推荐
- 关于2016.12.12——T1的反思：凸包的意义与应用
2016.12.12 T1 给n个圆,保证圆圆相离,求将圆围起来的最小周长.n<=100 就像上图.考场上,我就想用切线的角度来做凸包.以圆心x,y排序,像点凸包一样,不过用两圆之间的下切线角度 ...
- 解决jquery新加入的元素没有绑定事件问题
在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果 ...
- bzoj2743离线+树状数组
奇葩染色,对于每一个点关心的是前前个同颜色的位置,但是处理方法相同 离线比较神奇,按照右端点排序,然后每次用的是左端点,就不用建可持久化树状数组(什么鬼)了 区间修改+单点查询 果断差分以后用树状数组 ...
- weex image
weex 的image用来渲染图片, 可以使用img作为它的别名. 需要注意的是,他的长度可宽度必须指定, 不然它是不会工作的. 它没有任何的子组件. 有两个属性: src 用来指定图片的地址图片. ...
- vue 学习笔记
使用vue框架做了一个项目,在这个过程中,摸索学习了vue,把过程学习到技术整理放在这里,供以后查看.
- 【PostgreSQL】PostgreSQL添加新服务器连接时，报错“Server doesn't listen ”，已解决。
PostgreSQL添加新的服务器连接时,报错:
- 网络问卷调查js实现代码
昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...
- DBUtils 笔记
一.DBUtils介绍 apache 什么是dbutils,它的作用 DBUtils是java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作.可 ...
- window.onload与$(document).ready()的区别
对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...
- poj2718-Smallest Difference(枚举全排列)
一,题意: 给出最多10个数字,将它们划分为两个整数,求差值最小的值(除非只有一位数,否则不允许出现先导0) 很显然如果总共有n个数,必然有一个整数长n/2,另一个长n-n/2.二,思路: 利用nex ...