案例:用js和jQ实现表格隔行变色
js实现表格隔行变色
<style>
.tdCls01{
background-color:yellow;
}
.tdCls02{
background-color:greenyellow;
}
</style>
<script type="text/javascript">
window.onload=function(){
var trs = document.getElementsByTagName('tr');
for(var i =0;i<trs.length;i++){
if(i%2==0){
trs[i].className="tdCls01";
}else{
trs[i].className="tdCls02";
}
}
}
</script>
</head>
<body>
<table border="1px" width="250px" height="250" cellpadding"0" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
<tr>
<td>丽丽</td>
<td>19</td>
<td>160</td>
</tr>
<tr>
<td>丽丽</td>
<td>19</td>
<td>160</td>
</tr>
<tr>
<td>丽丽</td>
<td>19</td>
<td>160</td>
</tr>
<tr>
<td>丽丽</td>
<td>19</td>
<td>160</td>
</tr>
<tr>
<td>丽丽</td>
<td>19</td>
<td>160</td>
</tr>
<tr>
<td>丽丽</td>
<td>19</td>
<td>160</td>
</tr>
</table>
</body>
</html>
2.jQ实现页面加载的四种方式
// 利用JQ开始完成加载功能
// 方式1
$(alert('a'));
// 方式2 推荐
$(function(){
alert('b');
});
// 方式3
$(document).ready(function(){
alert('c');
});
// 方式4
jQuery(function(){
alert('d');
});
jQ实现表格隔行变色
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//页面加载
$(function(){
// 偶数行变色
$("tr:even").addClass("tdCls01");
//奇数行变色
$("tr:odd").addClass("tdCls02");
});
/*
$的作用
1. 可以作为页面加载效果
$(function(){
});
2.选择器
$("tr:even")
$("tr:odd")
3.将js的dom对象转为jQ对象
$(document.getElementById('id')).调用jQ的方法等操作
4.将字符串(这个字符串是html代码)变为jQ的对象
$('<div> <p></p></div>')
*/
</script>
js与jQ之间的转换
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//页面加载
$(function(){
// 1.js写法
//var row01 = document.getElementById('row01');
// 写法1:
// row01.style.backgroundColor = "yellowgreen";
// 写法2:
//row01.className = "tdCls01";
// 2.jQ写法
// 写法1:
//$("#row01").css("background-color","#ADFF2F");
// 写法2:
//$("#row01").addClass("tdCls01");
// 3.js和jQ能混用吗?
//$("#row01").style.backgroundColor="yellowgreen";
// 4.切记:千万不要将js和jQ混合使用
//console.log(document.getElementById('row01'));
//console.log($("#row01"));
// 5.js ---> jQ
// $(document.getElementById('row01')).addClass("tdCls02");
// 6.jQ ---> js
var row01 = $("#row01");
// row01[0].style.backgroundColor = "orange";
row01.get(0).style.backgroundColor = "yellowgreen";
// 7.隔行变色
var trs = document.getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
if(i % 2==0){
$(trs[i]).addClass("tdCls01");
}else{
$(trs[i]).addClass("tdCls02");
}
}
});
</script>