<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--什么是选择器？
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。
选择器的优势？
与传统的JavaScript获取页面元素和便携食物相比，jQuery选择器具有明显的优势，具体表现在一下两个方面：
*代码更简单
*完善的检测机制
-->
    <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></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:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<!--    使用javaScript实现隔行变色-->
<!-- 
<script type="text/javascript">
    window.onload = function () {
        var oTb = document.getElementById("tbStu");
        for (var i = 0; i < oTb.rows.length - 1; i++) {
            if (i % 2) {
                oTb.rows[i].className = "trOdd";
            }
        }
    }
</script>
-->

<!-- 使用jQuery选择器实现隔行变色-->
<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>001</td><td>张三</td><td>男</td><td>100</td></tr>
<tr><td>002</td><td>李四</td><td>女</td><td>100</td></tr>
<tr><td>003</td><td>王五</td><td>男</td><td>100</td></tr>
<tr><td>004</td><td>赵六</td><td>女</td><td>100</td></tr>
<tr><td>005</td><td>周七</td><td>男</td><td>100</td></tr>
<tr><td>006</td><td>王八</td><td>女</td><td>100</td></tr>
</tbody>
</table>
</body>
</html>

jQuery选择器实现隔行变色和使用javaScript实现隔行变色相关推荐

  1. php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...

  2. JavaScript（15）jQuery 选择器

    jQuery 选择器 选择器同意对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器同意通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器同意对 ...

  3. JavaScript强化教程——jQuery选择器

    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所 ...

  4. JavaScript及jQuery选择器(二)

    1.选择指定ID元素 对于选择DOM元素,javascript提供了以下两个方法: document.getElementById(): document.getElementsByTagName() ...

  5. 第二章（jQuery选择器）

    2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...

  6. 【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象

    文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...

  7. JQuery——选择器作业

    一.省市级连 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...

  8. Jquery 选择器大全 【转载】

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  9. jQuery选择器全集详解

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编 ...

最新文章

  1. Android Handler的使用!!!
  2. [转]获取Setup文件的运行路径
  3. VTK：将点转换为字形用法实战
  4. python基础list_python基础操作---list
  5. 招聘、招聘，我就这样被算法选中
  6. 【母亲节快乐】程序员的表达方式，了解一下？
  7. Android SharedPreferences最佳实践
  8. 【转载】VBA 读取EXCEL 行列总数
  9. AngularJS 学习笔记值post传值
  10. 软件测试 java_关于Java单元测试，你需要知道的一切
  11. Codeforces 436D Pudding Monsters
  12. C++ dlib实现人脸识别
  13. 双叉积——拉格朗日公式证明
  14. 功能测试的测试工作流程
  15. 在imitate中遇到的问题
  16. kf.qq.com.lol.html,英雄联盟安全信用星级,英雄联盟封号查询中心
  17. 网页链接如何做成html,html网页的超链接怎么添加？
  18. 完美破解StartUML软件
  19. 搭建基于 Vim 的 C++和 Python 开发环境[持续更新]
  20. 【牛客网-公司真题-前端入门篇】——58同城2021校招笔试-前端

热门文章

  1. java对于app版本号比较,Java对比APP版本号大小
  2. pcb结构链表_第2章 2-1进程与PCB
  3. comsat java_java-com.thoughtworks.xstream.converters.ConversionExce...
  4. 【带你重拾Redis】Redis过期策略 和 内存淘汰策略(key回收)
  5. 【Netty】ChannelHandler和ChannelPipeline
  6. 10年测试工程师首谈测试前景，如何25天进入滴滴大厂
  7. mysql可视化导入csv文件_我们如何将数据从.CSV文件导入MySQL表？
  8. 计算机的英语怎么写的英语怎么写,计算机英语怎么写
  9. matlab朴素贝叶斯手写数字识别_基于MNIST数据集实现手写数字识别
  10. mysql 7.4_CentOS 7.4 64位/ mysql