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>
<script type="text/javascript" language="javascript">
window.onload=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>
</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>
<script type="text/javascript">
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
})
</script>
</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选择器定位页面元素的时候，无需考虑所定位的元素在页面是否存在，及时该元素不存在，浏览器也不提示出错信息，极大地方便了代码的执行效率。
分享到：
相关推荐
在上述给定文件信息中，我们看到了一个简单的jQuery应用实例，它通过在页面加载时弹出一个对话框，向用户展示“您好，欢迎来到jQuery世界”的问候语。这一过程不仅展示了jQuery的简洁性，同时也揭示了其与传统...
**jQuery应用开发实践指南示例代码** 在编程领域，jQuery是一个非常重要的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。《jQuery应用开发实践指南》是一本深入浅出介绍jQuery使用的书籍...
《jQuery应用实例详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。本篇文章将深入探讨jQuery在实际应用中的多种实例，帮助读者掌握并熟练运用jQuery，提升...
《jQuery应用技巧大全modified》是一份关于jQuery技术的详尽指南，主要涵盖了jQuery在实际开发中的各种实用技巧。本文将深入解析这些技巧，帮助开发者更好地理解和运用jQuery。 首先，jQuery的核心在于对页面元素的...
"简单jQuery加载等待转圈页面插件"就是为了解决这个问题而设计的，它能提供一个优雅的、可视化的等待提示，让用户知道后台正在忙碌并期待即将完成的操作。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档...
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
根据提供的文件信息，我们可以推断出这是一本关于jQuery应用开发的书籍——《jQuery应用开发实践指南》，并提供了两种下载方式：云盘下载与本地下载。下面将对jQuery及其应用开发进行详细介绍，并结合《jQuery应用...
**jQuery的简单应用** jQuery是一个高效、简洁且强大的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在"JQuery的简单应用"这个项目中，我们将探讨如何在Sql Server 2005...
"简单的jQuery图片相册插件"就是这样一个工具，特别适合应用于企业网站或商城网站的首页，作为轮播图来呈现产品信息或公司动态。下面将详细探讨jQuery图片相册插件的实现原理、核心功能以及如何在项目中应用。 ### ...
在本资源"简单的jQuery网页画板涂鸦代码.zip"中，包含了一个基于jQuery实现的简易网页画板功能。这个画板允许用户通过鼠标在页面上进行涂鸦，从而实现在线绘图的效果。以下是对该技术实现的详细解析： 首先，jQuery...
【标题】"简单的JQuery订餐系统"是一个基于JavaScript库JQuery实现的简易订餐应用程序。这个项目旨在帮助用户理解如何运用JQuery来构建交互性强、用户体验良好的前端应用。通过这个系统，我们可以学习到JQuery在网页...
《jQuery应用技巧大全》这本书是JavaScript开发者不可或缺的资源，它深入浅出地介绍了jQuery库的各种实用技巧和高级用法。jQuery作为一个广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画效果以及Ajax...
《jQuery 1.3.1.js的开发简单应用详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，因其简洁的API和强大的功能而深受开发者喜爱。本文将深入探讨jQuery 1.3.1.js这一版本的应用，帮助初学者理解和掌握其...
【jQuery的Ajax应用】 jQuery是JavaScript的一个库，它极大地简化了JavaScript的使用，包括处理Ajax交互。Ajax在jQuery中的应用让开发者能够实现无刷新的数据交换，提升了用户体验，减少了页面加载时间，同时也使得...
3. **动画效果**：jQuery的`.fadeIn()`, `.slideToggle()`, 和`.animate()`等方法使得创建复杂的动画效果变得简单。 4. **Ajax交互**：jQuery的`.ajax()`和`.getJSON()`函数用于实现异步数据请求，这在MVC中特别...
1. **选择器**：jQuery借鉴了CSS的选择器语法，使得选取DOM元素变得异常简单。如`$("#id")`用于选取ID为特定值的元素，`$(".class")`用于选取类名为特定值的所有元素。 2. **链式调用**：jQuery对象返回的是jQuery...
总的来说，"基于JQUERY的简单应用"可能涵盖如何在HTML页面中引入jQuery库，使用选择器选取元素，进行DOM操作，绑定事件，创建动画效果，以及进行Ajax交互等内容。这个压缩包中的"范淑娟 123012010016--前端test"可能...
在标题“vue基本环境+jquery ajax应用”中，我们可以理解为这个压缩包可能包含了一个基本的Vue开发环境，并展示了如何结合jQuery的AJAX功能来处理数据请求。 Vue的基本环境通常包括Vue的核心库、Vue CLI（命令行...
在这个"最简单的 jQuery 示例 - 拼猫游戏"中，我们可以深入理解 jQuery 的基本用法，并通过一个实际的游戏应用来实践这些知识。 首先，jQuery 的核心概念是选择器（Selectors），它允许我们轻松地选取 HTML 元素。...
《JavaScript实现：Connect the Dots——简单JQuery应用程序解析》 在编程领域，尤其是在Web开发中，JavaScript是一种不可或缺的语言，它的灵活性和强大的功能使得开发者能够创造出各种各样的交互式用户体验。今天...