jquery入门—选择器实现隔行变色实例代码


Posted in Javascript onJanuary 04, 2013

1、JQuery选择器继承了CSS、path语音的部分语法,允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。
2、JQuery选择器与JavaScript相比,具有代码简单、完善的检测机制的优势。
3、使用JQuery选择器实现隔行变色,示例代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> 使用JQuery实现隔行变色 </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<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> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<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>1001</td><td>张小明</td><td>男</td><td>320</td> 
</tr> 
<tr> 
<td>1002</td><td>李明旗</td><td>女</td><td>350</td> 
</tr> 
</tbody> 
</table> 
</BODY> 
</HTML>

效果图如:
jquery入门—选择器实现隔行变色实例代码 
4、使用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> 
<script type="text/javascript"> 
$(function(){ 
$("#tbStu tr:nth-child(even)").addClass("trOdd"); 
}) 
</script>

两者相比,明显JQuery代码更简单。
Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
javascript编程起步(第七课)
Feb 27 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
JQuery性能优化的几点建议
May 14 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
Javascript的闭包详解
Dec 26 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 #Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 #Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 #Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 #Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 #Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 #Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 #Javascript
You might like
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python对html过滤处理的方法
2018/10/21 Python
python tkinter组件使用详解
2019/09/16 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
毕业生自荐书模版
2014/01/04 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
2015年班组工作总结
2015/04/20 职场文书
暑期工社会实践报告
2015/07/13 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS