开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2010.03.12
jQuery:库类型说明
在DownloadjQuery区域，一共有三种类型的jQuery:库，分别是jQuery1.2.6(16kb,MinifiedandGzipped)、jQuery1.2.6(97kb,Uncompressed)和jQuery1.2.6(30kb,Packed)，区别如表1-1所示：
表1-1jQuery库类型对比表
名称
大小
说明
jQuery1.2.6
(16kb,MinifiedandGzipped)
16kb
经过gzip压缩，体积最小，为应用在产品、项目而准备的版本
(97kb,Uncompressed)
97kb
完整无压缩版本，为测试，学习和开发而准备的版本
jQuery1.2.6(30kb,Packed)
30kb
经过Packer压缩，为不支持gzip的服务器而准备的版本
编写简单的jQuery代码
环境配置好后，你也许迫不及待的想试用一下jQuery。在我们开始编写第一个jQuery程序之前，先明确一点：在jQuery库中，$就是jQuery的一个简写形式，比如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
下面我们开始编写我们第一个jQuery程序：
$(document).ready(function(){//等待dom元素加载完毕.
alert("HelloWorld!");//弹出一个框。
});
运行后，测试结果如图1-8所示：
jQuery对象和DOM对象
1.4.1简介DOM对象和jQuery对象
第一次学习jQuery，经常会搞不清楚哪些是jQuery对象、哪些是DOM对象，所以我们在这里重点讲一下。
1.DOM对象
文档对象模型(DOM，DocumentObjectModel)。
每一份DOM都可以表示一棵树。下面我们构建一个非常基本的网页：
图1-14一个非常基本的网页
对应网页代码如下：
例子1-4
- 苹果
- 橘子
- 菠萝
- 其他
我们可以构建上面网页结构的DOM树。如图1-15所示：
图1-15把网页元素表示为文档树
在这棵DOM树中，
、
、
- 以及
- 子节点都是DOM元素节点。我们可以通过JavaScript中的getElementsByTagName来获取它们。像这样通过getElementById或者getElementsByTagName得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法，比如：
vardomObj=document.getElementById("id");//获得DOM对象
varObjHTML=domObj.innerHTML;//使用JavaScript中的方法innerHTML
2.jQuery对象
那什么是jQuery对象呢？
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法。
比如：
$("#foo").html();//获取id为foo的元素内的html代码。.html()是jQuery里的方法。
这段代码等同于：
document.getElementById("id").innerHTML;
注意：jQuery对象将无法使用DOM对象的任何方法。比如$("#id").innerHTML、$("#id").checked之类的写法都是错误的。同样，DOM对象也不能使用jQuery的里方法，
比如document.getElementById("id").html()也会报错，
只能用document.getElementById("id").innerHTML;
从学习jQuery一开始就应当树立正确的观念，认识jQuery对象和DOM对象之间的区别，一旦能够跨越这道坎，之后学习jQuery之路就轻松多了。
1.4.2jQurey对象和DOM对象的相互转换
在讨论jQurey对象和DOM对象的相互转换之前，我们先约定定义变量的风格。
约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：
var$variable=jQuery对象;
如果获取的是DOM对象，则这么定义：
varvariable=DOM对象;
本书中的例子均会以这种方式呈现，以方便读者阅读。
ljQuery对象转成DOM对象
前面说了，jQuery对象不能使用DOM中的方法，但如果你对jQuery对象所提供的方法不熟悉，或者jQuery没有封装你想要的方法，这时你不得不用一下DOM对象的时候，你该怎么办呢？
在这里提供两种方式来将一个jQuery对象转换成DOM对象：
[index]和.get(index)；
（1）jQuery对象是一个数组对象，可以通过[index]的方式，来得到相应的DOM对象。
var$cr=$("#cr");//jQuery对象
varcr=$cr[0];//DOM对象
alert(cr.checked)//检测这个checkbox是否被选中了
（2）另一种方式是jQuery本身提供的，通过.get(index)方式，来得到相应的DOM对象。
varcr=$cr.get(0);//DOM对象
lDOM对象转成jQuery对象
对于已经是一个DOM对象的，我们只需要用$()把DOM对象包装起来，就可以获得一个如假包换的jQuery对象了。比如：$(DOM对象);
varcr=document.getElementById("cr");//DOM对象
var$cr=$(cr);//jQuery对象
转换后，就可以任意使用jQuery中的方法了。
通过以上提供的方法，我们可以任意的相互转换jQuery对象和DOM对象。最后再次强调下，DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法的，但jQuery对象提供了一套更加完善的工具用于操作DOM，可以参考第三章。
解决jQuery和其它库的冲突
如果你的项目中有多种JavaScript库，比如同时存在prototype.js和jquery.js。为了避免$对象的冲突，我们可以使用jQuery中的.noConflict()来解决冲突，需要注意引入JavaScript库的顺序。
写法1：
jQuery.noConflict();//将变量$的控制权让渡给prototype.js
jQuery(function(){//使用jQuery
jQuery("p").css("color","red");//使用jQuery
$("pp").style.display="none";//这里的$符号是Prototype的方法
test
写法2：
$("pp").style.display="none";//这里的$符号是Prototype的方法。
切记不要把顺序弄错！
还有两种不使用.noConflict()来避免冲突常见方式。
jQuery(function($){
$("p").css("color","red");//函数内部的$还是jQuery的$。
$("pp").style.display="none";//函数外部的$是Prototype的$。
另一种是利用闭包的特性，你在任意地方建立一个闭包，在其内部，可以既使用$作为jQuery的缩写，又不用担心冲突，通常jQuery的插件都是采用这种形式来写的。当然也是先引入jQuery，再引入其它库：
- 的3个