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程序：

$(document).ready(function(){   //等待dom元素加载完毕.

          alert("Hello World!"); //弹出一个框。

   });

运行后，测试结果如图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树中，

 、

、

 以及
的3个
• 子节点都是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">

      

          

          

          

          

          

              jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

              jQuery(function(){ //使用jQuery

                  jQuery("p").css("color","red"); //使用jQuery

                  $("pp").style.display = "none"; //这里的$符号是Prototype的方法

              });

          

      

      

          testpp

          

  test

      

  写法2：

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      

          

          

          

              jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

              jQuery(function(){ //使用jQuery

                  jQuery("p").css("color","red"); //使用jQuery

                  $("pp").style.display = "none"; //这里的$符号是Prototype的方法。

              });

          

          

          

      

      

          testpp

          

  test

      

  切记不要把顺序弄错！

  还有两种不使用.noConflict()来避免冲突常见方式。

  一种是如果你的jQuery(function(){…})内部不使用其它库的代码，通过如下形式构建代码，先引入jQuery，再引入其它库，之后，继续使用$作为jQuery的简写形式：

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      

          

          

          

          

          

              jQuery(function($){

                  $("p").css("color","red"); //函数内部的$还是jQuery的$。

              });

              $("pp").style.display = "none"; //函数外部的$是Prototype的$。

          

      

      

          testpp

          

  test

      

  另一种是利用闭包的特性，你在任意地方建立一个闭包，在其内部，可以既使用$作为jQuery的缩写，又不用担心冲突，通常jQuery的插件都是采用这种形式来写的。当然也是先引入jQuery，再引入其它库：

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      

          

          

          

          

          

              (function($){

                 $("p").css("color","red"); //函数内部的$还是jQuery的$。

              })(jQuery);            

              $("pp").style.display = "none"; //函数外部的$是Prototype的$。

          

      

      

          testpp

          

  test

      

  这是最简单的解决冲突的方法，当然还有其它方式，但换汤不换药。 

  jQuery 1.4 发布：15个新特性实例精讲