jquery入门—选择器实现隔行变色实例代码
2023-06-13 09:14:43 时间
1、JQuery选择器继承了CSS、path语音的部分语法,允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。
2、JQuery选择器与JavaScript相比,具有代码简单、完善的检测机制的优势。
3、使用JQuery选择器实现隔行变色,示例代码如下:
复制代码代码如下:
2、JQuery选择器与JavaScript相比,具有代码简单、完善的检测机制的优势。
3、使用JQuery选择器实现隔行变色,示例代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>使用JQuery实现隔行变色</TITLE>
<METANAME="Generator"CONTENT="EditPlus">
<METANAME="Author"CONTENT="">
<METANAME="Keywords"CONTENT="">
<METANAME="Description"CONTENT="">
<styletype="text/css">
body{font-size:12px;text-align:center}
#tbStu{width:260px;border:solid1px#666;background-color:#eee}
#tbStutr{line-height:23px}
#tbStutrth{background-color:#ccc;color:#fff}
#tbStu.trOdd{background-color:#fff}
</style>
<scriptlanguage="javascript"type="text/javascript"src="jquery-1.8.3.min.js">
</script>
<scripttype="text/javascript">
$(function(){
$("#tbStutr:nth-child(even)").addClass("trOdd");
})
</script>
</HEAD>
<BODY>
<tableid="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>
效果图如:
4、使用JavaScript实现隔行变色的代码如下:
<scripttype="text/javascript">
window.onload=function(){
varoTb=document.getElementById("tbStu");
for(vari=0;i<oTb.rows.length-1;i++){
if(i%2){
oTb.rows[i].className="trOdd";
}
}
}
</script>
JQuery实现隔行变色代码:
</script>
<scripttype="text/javascript">
$(function(){
$("#tbStutr:nth-child(even)").addClass("trOdd");
})
</script>
两者相比,明显JQuery代码更简单。
相关文章
- JQuery中closest、parent、parents、parentsUntil的区别
- struts2:使用JQuery、JSON和AJAX处理请求详解编程语言
- jQuery实现发送短信验证码后60秒倒计时详解编程语言
- jquery swipper插件的一些弊端详解编程语言
- jquery翻页turnjs简单实例详解编程语言
- JQuery插件模板制作jquery插件的朋友可以参考下
- 跟着JqueryAPI学Jquery之一选择器
- 初识JQuery实例一(first)
- 30个精美的jQuery幻灯片效果插件和教程
- jquery显示和隐藏div特效实例
- jQuery的slideToggle方法实例
- jquery验证表单中的单选与多选实例
- jquery实现多级下拉菜单的实例代码
- jquery检测元素是否存在的实例代码
- jQuery:delegate中select()不起作用的解决方法(实例讲解)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- 页面加载完成后再执行JS的jquery写法以及区别说明
- jquery原创弹出层折叠效果点击折叠弹出一个层
- 在myeclipse中如何加入jquery代码提示功能
- Jquery焦点图实例代码
- jquery队列函数用法实例
- PHP+jquery+ajax实现即时聊天功能实例
- 24款热门实用的jQuery插件推荐
- jQuery创建DOM元素实例解析