jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
如何搭建jQuery环境?
下载jQuery文件库及js文件,你可以在jQuery的官方网站上去下载,当前最新的版本是:jquery-1.7.1.min.js,下载地址是:http://jquery.com
用jQuery的前提,首先要在你的页面引用一个jQuery文件库:
<script type="text/javascript"src="/JavaScript/jquery-1.7.1.min.js"></script>这个就是我们网站的jQuery应用,其中src表示你的jQuery文件库存放位置,这里面的代码不要深究,其实就是用js封装的。自己也能封装。
jQuery与JavaScript相比优势有哪些?
1.代码更简洁。例题:实现页面数据的隔行变色功能。
用JavaScript实现如下:

<!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>使用JavaScript实现隔行变色</title> 

<style type="text/css" > 

body{ 

font-size:12px; text-align:center 

} 

#tbStu1{ 

width:260px; border:solid 1px #666; background-color:#eee 

} 

#tbStu1 tr{ line-height:23px} 

#tbStu1 tr th{background-color: #66FF00; color:#fff} 

#tbStu1 .trOdd{background-color: #FF0000; color:#fff} 

</style> 


[color=red]<script type="text/javascript" language="javascript"> 

window.οnlοad=function(){ 

var oTb=document.getElementById("tbStu1"); 

for(var i=0;i<oTb.rows.length-1;i++){ 

 if(i%2){ 

 oTb.rows[i].className="trOdd"; 

 } 

} 

} 

</script>[/color] 


</head> 


<body> 

<table id="tbStu1" cellpadding="0" cellspacing="0"> 

<tbody> 

<tr> 

 <th>学号</th> <th>姓名</th> <th>性别</th><th>总分</th> 

</tr> 

<!--奇数页 --> 

<tr> 

<td>1001</td><td>张小明</td><td>男</td><td>320</td> 

</tr> 

<!--偶数页 --> 

<tr> 

<td>1002</td><td>李明琪</td><td>女</td><td>350</td> 

</tr> 

<!--奇数页 --> 

<tr> 

<td>1003</td><td>高飞</td><td>男</td><td>310</td> 

</tr> 

<!--偶数页 --> 

<tr> 

<td>1004</td><td>刘燕</td><td>女</td><td>300</td> 

</tr> 

<!--奇数页 --> 

</tbody> 

</table> 


</body> 

</html> 

 用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>使用JavaScript实现隔行变色</title> 

<script language="javascript" type="text/javascript" src="../Jscript/jquery-1.7.1.min.js"></script> 

<style type="text/css" > 

body{ 

font-size:12px; text-align:center 

} 

#tbStu{ 

width:260px; border:solid 1px #666; background-color:#eee 

} 

#tbStu tr{ line-height:23px} 

#tbStu tr th{background-color: #66FF00; color:#fff} 

#tbStu .trOdd{background-color: #FF0000; color:#fff} 

</style> 


[color=red]<script type="text/javascript"> 

$(function(){ 

 $("#tbStu tr:nth-child(even)").addClass("trOdd"); 

}) 

</script>[/color] 

</head> 


<body> 

<table id="tbStu" cellpadding="0" cellspacing="0"> 

<tbody> 

<tr> 

 <th>学号</th> <th>姓名</th> <th>性别</th><th>总分</th> 

</tr> 

<!--奇数页 --> 

<tr> 

<td>1001</td><td>张小明</td><td>男</td><td>320</td> 

</tr> 

<!--偶数页 --> 

<tr> 

<td>1002</td><td>李明琪</td><td>女</td><td>350</td> 

</tr> 

<!--奇数页 --> 

<tr> 

<td>1003</td><td>高飞</td><td>男</td><td>310</td> 

</tr> 

<!--偶数页 --> 

<tr> 

<td>1004</td><td>刘燕</td><td>女</td><td>300</td> 

</tr> 

<!--奇数页 --> 

</tbody> 

</table> 


</body> 

</html>


显然用jQuery代码更加的简洁,简单执行的效果更高的优点。如上例题,虽然JavaScript代码可以实现最终的效果,但是循环页面的元素会影响打开的速度,并且代码较为复杂,而用jQuery(选择器)则可以快速的定位页面中的元素,并且设置该元素的相应属性,具有代码简单,执行效率高的优点。

2.完善的检测机制
在传统的JavaScript代码中,定位页面中元素时,如果页面中不存在该元素,那么浏览器将提示运行出错信息,影响后续代码的执行,因此在JavaScript中为了避免显示这样的出错信息,先要检测该元素是否存在,然后运行其属性或事件代码,从而导致代码的冗余,影响执行的效率。
在jQuery选择器定位页面元素的时候,无需考虑所定位的元素在页面是否存在,及时该元素不存在,浏览器也不提示出错信息,极大地方便了代码的执行效率。