jQuery

最新推荐文章于 2025-08-06 16:42:26 发布
最新推荐文章于 2025-08-06 16:42:26 发布
阅读量911 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery function class javascript xhtml border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Steven6977/article/details/6485848
本文介绍了一种使用jQuery实现的简单而实用的鼠标悬停表格行高亮效果。通过链式调用的方法，实现了对表格行的美化，提高了用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jQuery是一个了不起的javascript库，它可以使我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得JavaScript更加有趣。

今天试着学习了一下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=utf-8" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){       //这个就是传说的ready
$(".stripe tr").mouseover(function(){
          //如果鼠标移到class为stripe的表格的tr上时，执行函数
$(this).addClass("over");}).mouseout(function(){
          //给这行添加class值为over，并且当鼠标一出该行时执行函数
$(this).removeClass("over");})          //移除该行的class
$(".stripe tr:even").addClass("alt");
        //给class为stripe的表格的偶数行添加class值为alt
});
</script>


<style type="text/css">
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>


</head>

<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
 

PS: 飘飘说我的table没有<thead>,我知错了...


</body>
</html>
这里有一个jQuery的技巧不得不提一下：jQuery的链式操作.$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})

在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作 

 

just学习
关注
jQuery选择器
m0_57774967的博客
06-16 4882
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery-3.6.4.js 和 jquery-3.6.4.min.js 【jquery-3.6.4包合集】
02-17
jquery-3.6.4.js 和 jquery-3.6.4.min.js 【jquery-3.6.4包合集】 jquery-3.6.4包合集下载 包含： jquery-3.6.4.js jquery-3.6.4.min.js jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，...
JQuery的引用
zwjl1017的博客
04-01 4203
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery 遍历对象
m0_67458498的博客
03-28 4398
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery在线引用
jiufu_的博客
07-15 5228
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5676
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 6071
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3608
jQuery的两种引入方式
前端 jQuery框架
m0_65731386的博客
05-23 2547
前端 jQuery框架
初始jQuery
热门推荐
优快云zhaojiale的博客
06-17 1万+
jQuery jQuery是一个JavaScript的库，封装JavaScript操作让JavaScript操作更简单 版本问题 jQuery–1x兼容IE6,7,8 2x，3x不兼容IE6,7,8 1x版本兼容好，但文件较大 2x，3x文件小，但兼容差 使用jQuery 下载jQueryhttps://jquery.com/download/ 在html文件中引入(和引入js文件的格式相同) 在script标签中写jQuery代码 入口函数的区别 入口函数：一共有四种写法，
jquery-3.6.1.js 和 jquery-3.6.1.min.js 【jquery-3.6.1包合集】
02-17
jquery-3.6.1.js 和 jquery-3.6.1.min.js 【jquery-3.6.1包合集】 jquery-3.6.1包合集下载 包含： jquery-3.6.1.js jquery-3.6.1.min.js jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，...
jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】
02-17
jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】 jquery-3.6.0包合集下载 包含： jquery-3.6.0.js jquery-3.6.0.min.js jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
vue3入门-概览讲解
曹定栓的博客
08-04 639
本文介绍了Vue3项目创建和基本结构，重点对比了Vue2选项式API和Vue3组合式API的差异。Vue3使用Vite作为构建工具，相比Webpack具有更快的启动和热更新速度。文章通过一个显示div和切换背景色的示例，展示了组合式API将相关逻辑集中管理的优势，并介绍了如何通过模块化拆分setup函数来提高可维护性。最后指出选项式API适合简单场景，而组合式API更适合复杂逻辑复用和TypeScript项目。
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 783
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
数论手机辅助：打造便捷高效的移动应用交互体验
最新发布
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
08-06 861
关键在于实现 WebView 弹窗的拖动大小功能，通过监听窗口的触摸事件，在触摸按下时记录初始的窗口大小和触摸位置，在触摸移动过程中根据触摸位置的变化计算新的窗口大小，并更新窗口的布局参数，从而实现窗口大小可随触摸操作动态改变。方法中，目前只是通过 Toast 提示接收到了要插入的文本，实际应用中可以根据需求进一步完善，比如利用 AccessibilityService 来实现真正的文本插入操作，将选中的文本模拟输入到当前聚焦的输入框中，从而实现更加智能化和便捷的交互体验。在 Android 端的。
electron-多线程
在全栈和前端徘徊的程序员
08-03 705
基于 Chromium 多进程架构：每个渲染器运行在独立的进程中，避免单个页面的崩溃影响整个应用Node.js 多线程能力：通过 worker_threads 模块实现真正的多线程执行：在渲染进程中使用浏览器标准的 Web Workers APIIPC 通信机制：通过消息传递在不同进程/线程间交换数据资源共享与隔离：各进程拥有独立的内存空间，通过 IPC 实现数据共享。
ElementUI常用的组件展示
2302_78879607的博客
08-03 450
有时也会嵌套抽屉使用，例如： 一般都加在第一列：找到展示表格数据的部分加进去即可，一般要考虑获得选中的内容 @selection-change=“handleSelectionChange”，当selection-change触发时（复选框发生改变），就会调用后面的函数
jQuery选择器详解
jQuery 文件选择器 jQuery 文件选择器是 jQuery 库的核心组件之一，占据了 jQuery 文档的很大一部分比例。选择器是 jQuery 的一种机制，用于在 HTML 文档中选择和操作元素。 在 jQuery 中，选择器可以分为两大类：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值