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程序:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ //等待dom元素加载完毕.
alert("Hello World!"); //弹出一个框。
});
</script>
</head>
<body>
</body>
</html>
运行后,测试结果如图1-8所示:
jQuery对象和DOM对象
1.4.1 简介DOM对象和jQuery对象
第一次学习jQuery,经常会搞不清楚哪些是jQuery对象、哪些是DOM对象,所以我们在这里重点讲一下。
1 . DOM对象
文档对象模型(DOM,Document Object Model)。
每一份DOM都可以表示一棵树。下面我们构建一个非常基本的网页:
图1-14 一个非常基本的网页
对应网页代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4</title>
</head>
<body>
<h3>例子1-4</h3>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
<li>其他</li>
</ul>
</body>
</html>
我们可以构建上面网页结构的DOM树。如图1-15所示:
图1-15 把网页元素表示为文档树
在这棵DOM树中,<h3> 、<p>、<ul> 以及<ul>的3个<li>子节点都是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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- 引入 Prototype -->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").css("color","red"); //使用jQuery
$("pp").style.display = "none"; //这里的$符号是Prototype的方法
});
</script>
</head>
<body>
<p id="pp">testpp<p>
<p>test<p>
</body>
</html>
写法2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").css("color","red"); //使用jQuery
$("pp").style.display = "none"; //这里的$符号是Prototype的方法。
});
</script>
<!-- 引入 Prototype -->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">testpp<p>
<p>test<p>
</body>
</html>
切记不要把顺序弄错!
还有两种不使用.noConflict()来避免冲突常见方式。
一种是如果你的jQuery(function(){…})内部不使用其它库的代码,通过如下形式构建代码,先引入jQuery,再引入其它库,之后,继续使用$作为jQuery的简写形式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
<!-- 引入 Prototype -->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("p").css("color","red"); //函数内部的$还是jQuery的$。
});
$("pp").style.display = "none"; //函数外部的$是Prototype的$。
</script>
</head>
<body>
<p id="pp">testpp<p>
<p>test<p>
</body>
</html>
另一种是利用闭包的特性,你在任意地方建立一个闭包,在其内部,可以既使用$作为jQuery的缩写,又不用担心冲突,通常jQuery的插件都是采用这种形式来写的。当然也是先引入jQuery,再引入其它库:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
<!-- 引入 Prototype -->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$("p").css("color","red"); //函数内部的$还是jQuery的$。
})(jQuery);
$("pp").style.display = "none"; //函数外部的$是Prototype的$。
</script>
</head>
<body>
<p id="pp">testpp<p>
<p>test<p>
</body>
</html>
联系客服