黑马程序员技术交流社区

标题: 【郑州校区】JavaWeb04-HTML篇笔记(三) [打印本页]

作者: 谷粒姐姐    时间: 2018-5-7 09:55
标题: 【郑州校区】JavaWeb04-HTML篇笔记(三)
1.1 案例二:表格隔行换色的案例:1.1.1 需求:
对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果.
1.1.2 分析:1.1.2.1 技术分析:
【JQuery的选择器】
* 基本过滤选择器:
    * odd        :
    * even        :
【JQuery中添加和移除样式】
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法:
    * addClass();
    * removeClass();
1.1.2.2 步骤分析:
【步骤一】:引入jquery的js
【步骤二】:在页面加载的函数中,选择奇数行,添加样式
【步骤三】:在页面加载的函数中,选择偶数行,添加样式
1.1.3 代码实现:
[AppleScript] 纯文本查看 复制代码
<script>
$(function(){
/*$("tr:odd").addClass("odd");
$("tr:even").addClass("even");*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
JavaWeb01-HTML篇笔记(一)
JavaWeb01-HTML篇笔记(二)
JavaWeb01-HTML篇笔记(三)
JavaWeb01-HTML篇笔记(四)
JavaWeb01-HTML篇笔记(五)
JavaWeb02-HTML篇笔记(一)
JavaWeb02-HTML篇笔记(二)
JavaWeb02-HTML篇笔记(三)
JavaWeb03-HTML篇笔记(一)
JavaWeb03-HTML篇笔记(二)
JavaWeb03-HTML篇笔记(三)
JavaWeb03-HTML篇笔记(四)
JavaWeb03-HTML篇笔记(五)
JavaWeb03-HTML篇笔记(六)
JavaWeb03-HTML篇笔记(七)
JavaWeb04-HTML篇笔记(一)
JavaWeb04-HTML篇笔记(二)






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2