jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<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实现隔行变色的更多相关文章
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- jQuery 选择器和JavaScript 选择器的技巧与异常原因
jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...
- JavaScript（15）jQuery 选择器
jQuery 选择器 选择器同意对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器同意通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器同意对 ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- 第二章（jQuery选择器）
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
- JQuery选择器和DOM的操作-入门学习
嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- 第二篇 jQuery 选择器
2-1,2 table隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jQuery选择器。 5.21 《深夜还在编码的你》
(之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选 ...
随机推荐
- EL显示List里嵌套map（Spring MVC3）返回的model
<c:forEach items="${requestScope.courseList}" var="cMap" varStatus="stat ...
- vim的ex模式用法
本文出自 http://blog.csdn.net/shuangde800 本文是在学习<使用vi编辑器, Lamb & Robbins编著>时在evernote写的其中一章笔 ...
- Swift - 委托（delegate）的介绍，及使用样例
1,委托的说明 委托(delegate)是Cocoa的一个术语,表示将一个对象的部分功能转交给另一个对象. 比如对象A希望对象B知道将要发生或已经发生某件事情,对象A可以把对象B的引用存为一个实例变量 ...
- JQuery - MD5加密
效果: JS代码: 命名为任意名称,一般为:Jquery.md5.js /** * jQuery MD5 hash algorithm function * * <code> * Calc ...
- perl 循环类选择器 ,爬取内容
jrhmpt01:/root/lwp/0526# cat 0526.txt <div class="TXD_sy_title"><span class=" ...
- 前端javascript框架之BackboneJS学习笔记
<!DOCTYPE html><html><head><meta charset="utf-8"><script src=&q ...
- EF具体用在什么类型的项目上
一般来说,使用EF框架,肯定会比直接使用ADO.NET,消耗的时间多一些. 因为使用ADO.NET直接把SQL语句传回数据库执行. 而使用EF框架的话,会把所用到的尸体,转换成相对应得SQL,然后再传 ...
- 研究一下TForm.WMPaint过程（也得研究WM_ERASEBKGND）——TForm虽然继承自TWinControl，但是自行模仿了TCustomControl的全部行为，一共三种自绘的覆盖方法，比TCustomControl还多一种
先擦除背景: procedure TCustomForm.WMEraseBkgnd(var Message: TWMEraseBkgnd); begin if not IsIconic(Handle) ...
- Mysql 5.1升级为mysql 5.6遇到的问题及解决方式
yum是不可行的.因为yum源没更新,我已经使用了163网易的源,但是还是不行.最新版仍然不是5.6.没办法,mysql分区是5.5之后的功能,要使用分区功能,就必须升级.. 去官网下载地址:http ...
- 编译Boost 详细步骤 适用 VC6 VS2003 VS2005 VS2008 VS2010
vs2008编译boost [一.Boost库的介绍] Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一.Boost库由C++标准委员会库 ...