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数组处理多个字符串的连接问题
Aug 20 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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读取html并截取字符串的简单代码
2009/11/30 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
pycharm 使用心得(五)断点调试
2014/06/06 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
单位委托书范本
2014/04/04 职场文书
品质标语大全
2014/06/21 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
工作简历的自我评价
2019/05/16 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android