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 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
Javascript 类型转换方法
Oct 24 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 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无限分类源码分享(思路不错)
2011/10/13 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
一个实用的php验证码类
2017/07/06 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
档案接收函范文
2014/01/10 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
促销活动方案模板
2014/02/24 职场文书
电焊工岗位职责
2014/03/06 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
公司车辆管理制度
2015/08/04 职场文书
小学教师教学随笔
2015/08/14 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL