一、鼠标事件

　　mouseover(function(){}); 鼠标移动到目标事件

　　mouseout(function(){}); 鼠标离开目标的事件

二、具体应用代码

<body>

    <h3>Books Info:</h3>

    <table id="table">

        <tr>

            <td>书名</td>

            <td>价格</td>

            <td>描述</td>

        </tr>

        <tr>

            <td>《海的女儿》</td>

            <td>11.00</td>

            <td>悬崖上的金鱼姬，海里的女儿</td>

        </tr>

    </table>

</body>

<script type="text/javascript">

    $(function(){

        $("#table").find("tbody>tr:even")   //偶数行的操作

          .mouseover(function(){

              $(this).css("background-color","#9AAAC7");

        }).mouseout(function(){

              $(this).css("background-color","#f9f9f9");

        }).end()

        .find("tbody>tr:odd")   //奇数行的操作

        .mouseover(function(){

                $(this).css("background-color","#9AAAC7");

          }).mouseout(function(){

                $(this).css("background-color","#e5e9f0");

          });

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

</script>

jquery table的隔行变色 鼠标事件的更多相关文章

  1. jQuery table tr隔行变色，鼠标移入移出变色，鼠标点击变色

    .trover { background: #f9f9f9; } .trclick { background: #c4e8f5; } .treven{ background:#CCFFCC; } .t ...

  2. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  3. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  4. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  5. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  6. table表格隔行变色

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery选择器实现隔行变色

    <script type="text/javascript"> $(function(){ $("#tableName tr:nth-child(even)& ...

  8. 隔行变色&&鼠标移入变色

    <html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...

  9. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

随机推荐

  1. selenium webdriver(2)---页面对象定位

    webdriver的元素定位很灵活,提供了多种定位方式: Id LinkText PartialLinkText Name TagName Xpath ClassName CssSelector 这些 ...

  2. 编程之美 两个叶子的节点之间 最大距离 变种 leecode

    提交地址: https://oj.leetcode.com/problems/binary-tree-maximum-path-sum/ 说一下思路http://www.cnblogs.com/mil ...

  3. Bzoj 3173: [Tjoi2013]最长上升子序列 平衡树,Treap,二分,树的序遍历

    3173: [Tjoi2013]最长上升子序列 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1183  Solved: 610[Submit][St ...

  4. Unity3D跨平台时partial分部方法的使用

    最近看到项目中插件的一部分逻辑,发现问题多多,可读性很差,并且容易出错,于是随手整理了下逻 辑.Unity3D的插件逻辑,因为要考虑到针对各平台的移植,因此会大片的出现#if/#endif等条件编译, ...

  5. ThreadLocal 和Synchronized

    并发都用到, 两个都是解决了线程并发问题,区别呢? Synchronized  同步机制, 共有变量被多个线程使用,会出现线程不安全,所以,加锁,锁机制很多种,例如Synchronized, lock ...

  6. 【剑指Offer学习】【面试题40：数组中仅仅出现一次的数字】

    题目:一个整型数组里除了两个数字之外.其它的数字都出现了两次,请敲代码找出这两个仅仅出现一次的数字. 要求时间复杂度是O(n),空间复杂度是O(1). 举例说明 比如输入数组{2, 4, 3, 6, ...

  7. NuGet的使用和服务搭建

    问题的由来 最近部门,在开发的时候遇到一个问题,现在有项目A B C三个项目,项目B和C分别提供了组件库由项目A直接引用.那么每次开打项目A获取最新后,同时还得打开项目B C获取最新然后编译一次.抛开 ...

  8. 用nginx图片缓存服务器

    图片的存储硬件 把图片存储到什么介质上? 如果有足够的资金购买专用的图片服务器硬件或者 NAS 设备,那么简单的很: 如果上述条件不具备,只想在普通的硬盘上存储,首先还是要考虑一下物理硬盘的实际处理能 ...

  9. linux文件的隐藏属性:chattr

    1. 文件的隐藏属性 linux除了9个权限外,还有些隐藏属性, 使用chattr命令来设置. 使用方法: $ chattr +-=[ASacDdIijsTtu] + : 添加一个特殊參数 - :   ...

  10. android 65 文件访问权限

    package com.itheima.createfile; import java.io.File; import java.io.FileNotFoundException; import ja ...