jQuery学习笔记一：jQuery基础

一、几种流行的JavaScript库的简介与对比：
1、Prototype

是最早成型的JavaScript库之一，对于JavaScript的内置对象（如String对象、Array对象等）做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看做是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代早，从整体上对于面向对象的编程思想把握不是很到位，导致其结构松散。但现在Prototype也在慢慢改进。
2、Dojo
Dojo的强大这处在于Dojo提供了很多其它JavaScript库所没有提供的功能。例如在线存储的API、生成图标的组件，基于SVG/VML的矢量图形库和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript库。并且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。但是自从Dojo的1.0.0版出现以后，情况有所好转，Dojo还是一个很有发展潜力的库。
3、YUI
YUI是由Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax应用等，同时还包括了几个核心的CSS文件。该库本身文档极其完备，代码编写也非常规范。
4、Ext JS
Ext JS简称为Ext，原来是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为界面扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，本身比较臃肿，所以用之前请先权衡利弊。另外，Ext并非完全免费，如果用于商业用途，需要付费获得授权许可。
5、MooTools
MooTools是一套轻量、简洁、模块和面向对像的JavaScript框架。MooTools的语法几乎跟Prototype一样，但是却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀，核心代码大小只有8KB。无论用到那个模块都可即时导入，即使是完整版大小也不超过160KB。MooTools完全彻底的面向对象的编程思想，语法简洁直观，文档完善，是一个非常不错的JavaScript库。
6、jQuery
jQuery是继Prototype后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。团队有3个核心人物：John Resig、Brandon Aaron和Jorn Zaefferer。jQery非常轻巧，采用Dean Edwards编写的Packer压缩后，大小不到30KB。如果使用Min版并且服务器端启用Gzip压缩后，大小只有18KB。

二、jQuery的简写形式：$
例如：$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。

 

三、DOM对象和jQuery对象
1、DOM(Document Object Model,文档对象模型)

每一份DOM都可以表示成一棵树。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素。DOM对象可以使用JavaScript中的方法，如：

var domObj=document.getElementById("id"); //获取DOM对象
var ObjHTML=domObj.innerHTML; //使用JavaScript中的方法——innerHTML

 

2、jQuery对象
jQuery对象就是通过jQuery包装DOM对象产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。例如：

$("#foo").html();//获取id为foo的元素内的html代码。.html()是jQuery里的方法
这段代码等同于：
document.getElementById("foo").innerHTML;

 

在jQuery对象中无法使用DOM对象的任何方法。使如

$("id").innerHTML和$("id").checked之类的写法都是错误的，可以用

$("#id").html()和$("id").attr("checked")之类的jQuery方法来代替。

同样DOM对象也不能使用jQuery里的方法。例如：

document.getElementById("id").html()也会报错，只能用

document.getElementById("id").innerHTML语句。

 

3、DOM和jQuery对象的相互转换

 约定：如果获取的对象是jQuery对象，那么在变量前面加上$，如果是DOM对象则不用。如

var $variable=jQuery对象；//jQuery对象
var variable=DOM对象；//DOM对象

 

1、jQuery对象转成DOM对象
jQuery提供两种方法将一个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是否被选中

 

2、DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象。方式为$(DOM对象)。如

var cr=document.getElementById("cr");    //DOM对象
var $cr=$(cr);                           //jQuery对象

 

转换后，可以任意使用jQuery中的方法。