简单的jQuery应用

最新推荐文章于 2024-07-24 16:20:17 发布

wenbing2610

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量76

点赞数

分类专栏： jQuery应用文章标签： jquery javascript ViewUI

本文链接：https://blog.csdn.net/wenbing2610/article/details/84160989

版权

jQuery应用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

wenbing2610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的jQuery应用

jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文...
复制链接

扫一扫

专栏目录