<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. Ember.js - About

    Ember.js - About More Productive Out of the Box.   Write dramatically less code with Ember's Handleb ...

  2. 安全威胁无孔不入:基于Linux系统的病毒(转)

    虽然在Linux里传播的病毒不多,但也是存在一些.我从一些安全网站搜集了一些资料. 1.病毒名称: Linux.Slapper.Worm 类别: 蠕虫 病毒资料: 感染系统:Linux 不受影响系统: ...

  3. Jquery文本框小例(必填框)

    <script src="../JavaScript/jquery-2.0.2.min.js"></script> <script type=&quo ...

  4. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

  5. 多屏广告技术调研 & 广告基础介绍

    之前做的多屏广告产品调研,并简单介绍了一些基础广告知识.见ppt:多屏广告技术调研

  6. 基于visual Studio2013解决C语言竞赛题之1086任务分配

        题目 解决代码及点评 /************************************************************************/ /* ...

  7. NLP | 自然语言处理 - 标注问题与隐马尔科夫模型(Tagging Problems, and Hidden Markov Models)

    什么是标注? 在自然语言处理中有一个常见的任务,即标注.常见的有:1)词性标注(Part-Of-Speech Tagging),将句子中的每一个词标注词性,比如名词.动词等:2)实体标注(Name E ...

  8. View实现涂鸦、撤销以及重做功能

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  9. Effective C++_笔记_条款12_复制对象时勿忘其每一个成分

    (整理自Effctive C++,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 编译器会在必要时候为我们的classes创建copying函数, ...

  10. C++晋升之std中vector的实现原理(标准模板动态库中矢量的实现原理)

    我们实现的数据结构是为了解决在执行过程中动态的开辟空间使用(比如我们不停的输入,输入的多少我们不确定) 假设当你看到这篇文章的话,就当作是零食咀嚼,营养没有有BUG,能够直接看我博客中文章:CPU对内 ...