初探jQuery：简化JavaScript编程-优快云博客

引入即可：<script src="你的实际路径/jquery-1.2.6.min.js" type="text/javascript"></script>

下面是我写的第一个jquery程序:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$('p').click(function(){
alert("hello jQuery!");
})
});
</script>
</head>
<body>
<div id="container">
<p>点击这里</p>
</div>
</body>
</html>

解释一下这个简单的jQuer小程序：

首先看到的是$(document),意思是获取整个网页文档对象（类似的于window.document）,$(document).ready意思就是说，获取文档对象就绪的时候.这个功能用简单的javascript,window.onload()同样能实现,但是当我们用window.onload函数执行的时候，要等所有东西已经载入，包括图像和横幅等等。我们知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到 window.onload()执行的代码效果，这样就花费了很长的等待时间。
再者$('p')是指获取网页中所有这p标签，如果是用$('#p')是指获取元素ID；$('p').click是指获取到的页面中所有p标签的单击事件；单击执行包含的函数事件。
以上程序执行的结果是点击：点击这里字样时会弹出一个对话框显示hello jQuery!
总结来说：$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单说,这个方法完全是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用所绑定的函数.

使用jQuery实现自己想的代码结构就是：
$(document).ready(function(){
// 你的代码
});

至此我们了解了一下jQuery!

刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

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

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

选择器是jQuery最重要的部分之一，在jQuery中对事件处理，DOM操作和Ajax操作都依赖于选择器，熟练使用选择器，不仅能简化代码，还可以达到事半功倍的效果。

在说jQuery之前我们也可以回忆一下CSS的选择器，我想这对我们还算是比较熟悉，分别有：标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择符....等等选择器,具体语法说明在这里就不说了。而我们要说了jQuery中的选择器完全继承了CSS的风格，不过jQuery选择器适应通用性更好，CSS中很多选择器IE不支持，但jQuery支持常用的浏览器。

$的选择器部分，凡是运用符号：$，其返回值都是一个object。

下面分类别的简单介绍一下jQuery选择器：

1、基本选择器:通过标签元素id、class、标签名等来查找DOM元素

$("#id名")，如$("#test")是选取了id为test的标签节点

$("标签名")，如$("p")是选取了所有的P标签节点

$(".class名")，如$(".test")是选取了所有class为test的标签节点

$("*"),如$("*")是选取所有的标签元素

$("标签名1,标签名2,...")，如$("div,span,p.myClass")是选取所有<div>,<span>和拥有class为myClass的<p>的一线标签元素。

2、层次选择器:通过DOM元素的层次关系来获取特定元素，包括后代元素、子元素、相依元素、兄弟元素等。

$("标签名标签名")，如$("div span")选取<div>里所有的<span>元素

$("parent child")，如$("div>span")选取<div>元素下元素名是<span>的子元素

$('prev+next')等价$('prev').next('next')，如$('.one+div')等价$('.one').next('div')是选取class为one的下一个<div>标签元素