a.表格隔行变色
//js
<script>
var oTable = document.getElementById(‘table‘);
var aTr = oTable.getElementsByTagName(‘tr‘);
//alert(aTr.length);
for(var i=0;i<aTr.length;i++){
if(i%2==1){
aTr[i].style.background="yellow";
}else{
aTr[i].style.background="#abcdef";
}
}
</script>
//jquery
<script>
/*$(‘#table tr:even‘).css(‘background‘,‘#abcdef‘);
$(‘#table tr:odd‘).css(‘background‘,‘yellow‘);*/
$(‘#table tr‘).filter(‘:even‘).css(‘background‘,‘#abcdef‘).end().filter(‘:odd‘).css(‘background‘,‘yellow‘);
</script>
b.tab标签页
//js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>原生js的tab标签页</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
body{
margin: 50px ;
}
#ul{
height: 30px;
margin-bottom: 10px;
}
#ul li{
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid #abcdef;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current{
background: #abcdef;
}
#content div{
width: 300px;
height: 200px;
border: 1px solid #abcdef;
display: none;
}
#content div.show{
display: block;
}
</style>
</head>
<body>
<ul id="ul">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>
<div id="content">
<div class="show">php。。。。。。介绍</div>
<div>ruby。。。。。。介绍</div>
<div>python。。。。。。介绍</div>
</div>
<script>
var ul = document.getElementById(‘ul‘);
var li = ul.getElementsByTagName(‘li‘);
var content = document.getElementById(‘content‘);
var div = content.getElementsByTagName(‘div‘);
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick=function(){
for (var i = 0; i < li.length; i++) {
li[i].className=‘‘;
div[i].style.display=‘none‘;
};
this.className=‘current‘;
div[this.index].style.display=‘block‘;
}
};
</script>
</body>
</html>
//jquery
<script>
$(‘#ul li‘).click(function(){
//1、点击li的时候要切换样式
//$(this).addClass(‘current‘).siblings().removeClass(‘current‘);
//2、根据li的索引值,来确定哪个div显示,其它div隐藏
//$(‘#content>div‘).eq($(this).index()).show().siblings().hide();
//$(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().children().eq($(this).index()).show().siblings().hide();
});
$(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().find(‘div‘).eq($(this).index()).show().siblings().hide();
});
</script>
1.优先使用id选择器
2.在class选择器前添加标签名
3.采用find(),而不使用上下文查找
4.强大的链式操作比缓存更快
5.从左至右的模型1.3+版本更新
|
|