<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. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  2. jQuery 选择器和JavaScript 选择器的技巧与异常原因

    jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...

  3. JavaScript（15）jQuery 选择器

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

  4. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  5. 第二章（jQuery选择器）

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

  6. JQuery选择器和DOM的操作-入门学习

    嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...

  7. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  8. 第二篇 jQuery 选择器

    2-1,2  table隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. jQuery选择器。 5.21 《深夜还在编码的你》

    (之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选 ...

随机推荐

  1. Android中获取网页表单中的数据

    MainActivity如下: package cn.testjavascript; import java.util.StringTokenizer; import android.os.Bundl ...

  2. 禁止页面复制功能 js禁止复制 禁用页面右键菜单

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script  t ...

  3. Adrnoid开发系列（二十五）：使用AlertDialog创建各种类型的对话框

    AlertDialog能够生成各种内容的对话框.可是每种对话框都会有这样的的结构: 类似下边这样的的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTA ...

  4. hadoop 学习入门 一 云计算之旅

    一. 什么是云计算: 云计算是分布式计算.网格计算.并行计算.效用计算.网络存储.负载均衡.虚拟化.网络计算等传统计算技术的融合体. 二. 云计算的核心技术: 1 编程模型 2 海量数据分布存储技术 ...

  5. 【VBA研究】VBA通过HTTP协议实现邮件轨迹跟踪查询

    作者:iamlasong 1.接口说明 通过互联网訪问,运单跟踪信息查询接口基于HTTP协议开发,接口为RESTFul风格的Web Service,信息交互过程为用户按我方提供的web service ...

  6. .atitit.web 推送实现解决方式集合(3)----dwr3 Reverse Ajax

    .atitit.web 推送实现解决方式集合(3)----dwr3 Reverse Ajax 1. 原理实现 1 2. Page  添加配置.添加回调函数dwr.engine.setActiveRev ...

  7. 初识Dubbo 系列之4-Dubbo 依赖

    依赖 必需依赖 JDK1.5+ 理论上Dubbo能够仅仅依赖JDK,不依赖于不论什么三方库执行,仅仅需配置使用JDK相关实现策略. 缺省依赖 通过mvn dependency:tree > de ...

  8. python 在 eclipse 上的编码配置问题

    Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...

  9. Thinkphp入门 四 —布局、缓存、系统变量 （48）

    原文:Thinkphp入门 四 -布局.缓存.系统变量 (48) [控制器操作方法参数设置] http://网址/index.php/控制器/操作方法 [页面跳转] [变量调节器] Smarty变量调 ...

  10. 中国本土管理咨询公司排名TOP50

    中国本土管理咨询公司排名TOP50 1. 北京正略钧策管理顾问有限公司 2. 北京和君咨询公司 3. 北大纵横管理咨询公司 4. 远卓管理顾问公司 5. AMT管理咨询公司 6. 华夏基石管理咨询有限 ...