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操作都依赖于选择器. 熟练地使用选 ...
随机推荐
- Spring注入静态变量(转)
今天碰到一个问题,我的一个工具类提供了几种静态方法,静态方法需要另外一个类的实例提供处理,因此就写出了这样的代码: Class Util{ private static XXX xxx; xxx = ...
- SQL SERVER 2008- 字符串函数
/* 1,ASCII返回字符表达式中最左侧字符的ASCII代码值 仅返回首字母的ASCII码值 parameter char或varchar returns integer */ SELECT ASC ...
- Swift - 发送消息（文本,图片,文件等）给微信好友或分享到朋友圈
通过调用微信提供的API接口,我们可以很方便的在应用中发送消息给微信好友,或者分享到朋友圈.在微信开发平台(https://open.weixin.qq.com)里,提供了详细的说明文档和样例.但由于 ...
- MsSqlServer bak文件数据导入
MsSqlServer bak文件数据导入 第一步首先在你的数据库中建立一个空数据库 选中新建的数据库 鼠标右键 任务 还原 数据库 这个时候会弹出这种一个框 之后选择原设备 会弹出 点击加入 找到 ...
- 某公司ASP.NET应聘上机试题
ASP.NET笔试题是ASP.NET程序员面试必须经历的,一般会叫你填两个表 1个是你的详细信息表 1个是面试题答卷 两个都要注意反正面是否都有内容不要遗漏,如果考你机试一般也有两种,就是程序连接数据 ...
- clear、REFRESH、free区别
clear可以清楚一个工作区或变量.但是如果该内表是带表头的,清空内表时需要在该内表后加[].例如:clear gt_tab[]. free可以清空带表头的内表但是不会清空这个带表头内表的表头,但是也 ...
- 一种H.264高清视频的无参考视频质量评价算法（基于QP和跳过宏块数）
本文记录一种无参考视频质量评价算法.这是我们自己实验室前两年一个师姐做的,算法还是比较准确的,在此记录一下. 注意本算法前提是高清视频.而且是H.264编码方式. 该方法主要使用两个码流里面的参数进行 ...
- 让XP系统支持GPT硬盘
转自 http://article.pchome.net/content-1324506-all.html 1XP系统还不过时 教你完美征服3TB硬盘回顶部 原作者:沈洁 随着高清1080p片源的普及 ...
- NIO框架之MINA源码解析（转）
http://blog.csdn.net/column/details/nio-mina-source.html http://blog.csdn.net/chaofanwei/article/det ...
- android apk反编译
★反编译所需工具 1.AXMLPrinter.jar 2.d2j-dex2jar.bat 3.查看Jar包的GUI工具 ★功能实现 ◇解压缩 apk文件其实就是一个MIME为zip的压缩包,可以用wi ...