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选择器定位页面元素的时候,无需考虑所定位的元素在页面是否存在,及时该元素不存在,浏览器也不提示出错信息,极大地方便了代码的执行效率。