魔龙在世全文免费阅读:jQuery基础
jQuery:库类型说明
在Download jQuery区域,一共有三种类型的jQuery:库,分别是jQuery 1.2.6 (16kb, Minified and Gzipped)、jQuery 1.2.6(97kb, Uncompressed)和jQuery 1.2.6 (30kb, Packed),区别如表1-1所示:
表1-1 jQuery库类型对比表
名称
大小
说明
jQuery 1.2.6
(16kb, Minified and Gzipped)
16kb
经过gzip压缩,体积最小,为应用在产品、项目而准备的版本
jQuery 1.2.6
(97kb, Uncompressed)
97kb
完整无压缩版本,为测试,学习和开发而准备的版本
jQuery 1.2.6 (30kb, Packed)
30kb
经过Packer压缩,为不支持gzip的服务器而准备的版本
编写简单的jQuery代码
环境配置好后,你也许迫不及待的想试用一下jQuery。在我们开始编写第一个jQuery程序之前,先明确一点:在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,程序中的$符号都是jQuery的一个简写形式。
下面我们开始编写我们第一个jQuery程序:
运行后,测试结果如图1-8所示:
jQuery对象和DOM对象
1.4.1 简介DOM对象和jQuery对象
第一次学习jQuery,经常会搞不清楚哪些是jQuery对象、哪些是DOM对象,所以我们在这里重点讲一下。
1 . DOM对象
文档对象模型(DOM,Document Object Model)。
每一份DOM都可以表示一棵树。下面我们构建一个非常基本的网页:
图1-14 一个非常基本的网页
对应网页代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
例子1-4
你最喜欢的水果是?
- 苹果
- 橘子
- 菠萝
- 其他
我们可以构建上面网页结构的DOM树。如图1-15所示:
图1-15 把网页元素表示为文档树
在这棵DOM树中,
、
、
- 以及
- 子节点都是DOM元素节点。我们可以通过JavaScript中的getElementsByTagName来获取它们。像这样通过getElementById或者getElementsByTagName得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法,比如:
var domObj = document.getElementById("id"); // 获得DOM对象
var ObjHTML = 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;
特别要注意,用#id作为选择符取得的是jQuery对象而并非document.getElementById("id")所得到的DOM对象,两者并不等价。关于“#”选择符的运用,可以参考下一章。
从学习jQuery一开始就应当树立正确的观念,认识jQuery对象和DOM对象之间的区别,一旦能够跨越这道坎,之后学习jQuery之路就轻松多了。
1.4.2 jQurey对象和DOM对象的相互转换
在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格。
约定:如果一个获取的是jQuery对象,那么我们在变量前面加上$,如:
var $variable = jQuery 对象 ;
如果获取的是DOM对象,则这么定义:
var variable = DOM对象;
本书中的例子均会以这种方式呈现,以方便读者阅读。
l jQuery对象转成DOM对象
前面说了,jQuery对象不能使用DOM中的方法, 但如果你对jQuery对象所提供的方法不熟悉,或者jQuery没有封装你想要的方法,这时你不得不用一下DOM对象的时候,你该怎么办呢?
在这里提供两种方式来将一个jQuery对象转换成DOM对象:
[ index ] 和 .get( index ) ;
(1)jQuery对象是一个数组对象,可以通过 [index] 的方式,来得到相应的 DOM 对象。
比如:
var $cr = $("#cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
(2)另一种方式是jQuery本身提供的,通过.get(index) 方式,来得到相应的 DOM 对象。
比如:
var $cr = $("#cr"); // jQuery对象
var cr = $cr.get(0); // DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
l DOM对象转成jQuery对象
对于已经是一个DOM对象的,我们只需要用$( ) 把 DOM对象包装起来,就可以获得一个如假包换的jQuery对象了。比如:$( DOM对象) ;
var cr = 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:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
testpp
test
写法2:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
testpp
test
切记不要把顺序弄错!
还有两种不使用.noConflict()来避免冲突常见方式。
一种是如果你的jQuery(function(){…})内部不使用其它库的代码,通过如下形式构建代码,先引入jQuery,再引入其它库,之后,继续使用$作为jQuery的简写形式:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
testpp
test
另一种是利用闭包的特性,你在任意地方建立一个闭包,在其内部,可以既使用$作为jQuery的缩写,又不用担心冲突,通常jQuery的插件都是采用这种形式来写的。当然也是先引入jQuery,再引入其它库:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
testpp
test
这是最简单的解决冲突的方法,当然还有其它方式,但换汤不换药。jQuery 1.4 发布:15个新特性实例精讲
- 的3个