通过这个例子可以对jQuery的使用有个基本的认识，jQuery的事件句柄、选择器、基本语法结构，你可以复制这些代码运行感受一下。
在做第一个例子之前，你需要先到jQuery 1.3 正式版 下载 jQuery库，他是一个js的文件非常的小巧只有那么几十KB，然后就是把这个文件Copy到你的项目，用Script附加这个文件就可以了。
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Code
<!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 runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.red
{
background-color: Red;
}
.green
{
background-color: Green;
}
.blue
{
background-color: Blue;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("div").addClass("blue");
//$("#olID>li").addClass("green");
$("#olID>li").hover(
function() {
$(this).addClass("red")
},
function() {
$(this).removeClass("red")
});
$("#olID>li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ol id="olID">
<li>Terry.Feng.C</li>
<li>冯瑞涛</li>
<li>dddd.com</li>
</ol>
</div>
</form>
</body>
</html>
分享到：
相关推荐
本文将深入探讨“锋利的jQuery第三章例子”中涉及的关键知识点，通过分析提供的压缩包文件，我们可以了解jQuery在实际应用中的常见技巧和功能。 首先，我们来看“3-下拉框精简-显示全部.html”。这个例子展示了如何...
1. **JQuery实战第一讲：概述、环境准备及入门实例** - **概述**：jQuery的基本理念是“Write Less, Do More”，它提供了一套简化的API来操作HTML文档、处理事件、执行动画，并进行Ajax交互。 - **环境准备**：...
《锋利的jQuery第五章实例解析》 在深入探讨这些实例之前，首先理解jQuery的核心概念是至关重要的。jQuery是一款高效、简洁的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在jQuery的...
《锋利的jQuery第四章：事件处理》 在jQuery库中，事件处理是核心功能之一，它使得网页的交互变得更加简单和高效。本章节主要围绕jQuery中的事件绑定、事件冒泡以及多事件绑定等概念进行深入探讨。 1. **事件绑定...
这可以通过监听第一个下拉框的change事件，然后发送Ajax请求获取新的选项数据，最后更新第二个下拉框。自动补全功能常用于输入框，当用户输入时，后台会返回匹配的建议列表。这通常结合keyup事件和$.ajax()实现，...
1. `attr(name)`：获取第一个匹配元素的属性值。 2. `attr(name, value)`：为所有匹配元素设置属性值。 3. `removeAttr(name)`：移除匹配元素的指定属性。 四、事件处理（Event Handling） 1. `click(fn)`：为元素...
本主题聚焦于"jquery省市县三级联动的三个例子"，这是一种常见且实用的前端技术，常用于创建动态下拉菜单，如在地址填写时自动填充省、市、县（区）信息。这种功能在电子商务网站、地图服务和各种在线表单中广泛使用...
例如，如果一个表格的第一列都是类别名称，且连续几行的类别相同，那么可以合并这些行的第一列，以节省空间并使表格更易读。 为了实现动态的行列合并，我们可以监听表格的事件，如`click`或`change`，在用户操作后...
**jQuery第一个Demo详解** 在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本篇将深入解析“jQuery第一个Demo”，帮助初学者快速入门jQuery...
1. **快速入门**：介绍如何安装jqPlot，以及编写第一个图表的步骤。 2. **基本图表类型**：讲解如何创建折线图、柱状图、饼图和散点图。 3. **配置选项**：详述各种配置选项，如颜色、样式、轴设置等，以及如何调整...
《锋利的jQuery》是一本深受开发者欢迎的jQuery教程书籍，分为第一版和第二版，旨在深入解析jQuery库的使用技巧和内部工作机制。这个压缩包包含了书中所有示例和源码，对于正在学习jQuery或者想要深入理解jQuery的人...
《jQuery Mobile 快速入门 例子》 jQuery Mobile 是一个基于 jQuery 库的轻量级、触屏优化的框架，专为移动设备上的Web应用程序设计。...记得实践是检验真理的唯一标准，动手尝试编写你的第一个jQuery Mobile应用吧！
第一个例子可能是一个简单的文件管理系统。在这样的应用中，jQuery Tree可以展示目录和文件的层级关系。用户可以通过展开或折叠目录节点来浏览文件结构，点击文件节点则可以预览或编辑文件内容。这个例子涉及到的...
- 初始化分页视图：创建页码按钮，显示第一页。 - 事件处理：当用户点击页码按钮或进行其他交互时，触发Ajax请求，加载相应页的数据，并更新页面内容。 - 动态加载：根据用户滚动页面，实现“无限滚动”或“懒...
删除指定索引的选项，如删除第一个选项（索引为0）： ```javascript $("#mySelect option:eq(0)").remove(); ``` 添加新的`<option>`，可以使用`append()`方法： ```javascript $("#mySelect").append('...
这是一些jQuery livequery的小例子源码演示，我想对学习livequery是有一定帮助的，实例中一共包括三个演示文件： 第一个演示：livequery导致的超链接点击; 第二个演示：livequery匹配rel属性值中含有"friend"的A...
在探讨“jquery网页制作例子”这一主题时，我们聚焦于两个具体的jQuery代码示例，旨在通过实践加深对网页制作的理解。这两个示例均利用了jQuery的`load()`方法，但其应用场景与处理方式有所不同，从而提供了不同的...
此外，还有更复杂的组合选择器，如 `$(":input")` 选取所有表单元素，`$("div:first")` 选取第一个 `div` 元素。 ### 2. DOM 操作 jQuery 提供了丰富的 DOM 操作方法，例如 `append()` 和 `prepend()` 可以在元素...
- `.first()` 获取集合中的第一个元素。 - `.last()` 获取集合中的最后一个元素。 - `.filter(selector)` 过滤出符合指定选择器的元素。 - `.not(selector)` 排除符合指定选择器的元素。 ### 8. **组合使用** 在...
这段代码在页面加载完成后隐藏所有Tab内容，只显示第一个。当用户点击Tab链接时，它阻止默认的页面跳转，然后隐藏所有内容，显示与点击链接相对应的Tab内容。 4. **优化与扩展**：这个基本的例子可以进一步优化和...