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>php</li>
??<li>ruby</li>
??<li>python</li>
?</ul>
?<div id="content">
??<div>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].οnclick=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+版本更新 |
| 
