传统javascript写法
1.给表格偶数行添加背景色
<table id = panda>
<tbody>
<tr><td> 第一行第一列</td><td>第一行第二列</td></tr>
<tr><td> 第er行第一列</td><td>第er行第二列</td></tr>
<tr><td> 第san行第一列</td><td>第san行第二列</td></tr>
<tr><td> 第si行第一列</td><td>第si行第二列</td></tr>
<tr><td> 第wu行第一列</td><td>第wu行第二列</td></tr>
<tr><td> 第liu行第一列</td><td>第liu行第二列</td></tr>
</tbody>
</table>
function panda(){
var item = document.getElementById("panda");//根据id获取table
var tbody = item.getElementsByTagName("tbody")[0];//获取表格第一个tbody元素
var trs = tbody.getElementsByTagName("tr");//获取tbody下所有tr元素
for(var i =0;i<=trs.length;i++){//循环行
if(i%2==0){
trs[i].style.backgroundColor = "darkgreen";//给偶数行添加背景色深绿色
}
}
}2.jQuery基本选择器
id选择器、class选择器、标签名称（元素）选择器。。
页面代码
<head>
<script src = "jquery.js"></script>
<script src = "test.js"></script>
<style>
span{
width:140px;
height:140px;
margin:5px;
background:orchid;
border:#000 1px solid;
float :left;
font-size :17px;
font-family :verdana;
}
div.min {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
.one{
width:140px;
height:140px;
margin:5px;
background:greenyellow;
border:royalblue 5px solid;
float :left;
font-size :17px;
font-family :verdana;
}
.min{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 2px solid;
float :left;
font-size :17px;
font-family :verdana;
}
</style>
</head>
<body>
<div class= one id = one >
id为one、class为one的div
<div class =min>class 为min的div</div>
</div>
<div class = one id = two title = test>
id为two class为one title为test的div
<div class = min title=other>class为min title为other的div</div>
<div class = min title = test>class 为min title为test的div</div>
</div>
<div class =one >
<div class = min>class 为min的div</div>
<div class = min>class为min的div</div>
<div class = min>class 为min的div</div>
<div class = min></div>
</div>
<div class =one >
<div class = min>class 为min的div</div>
<div class = min>class为min的div</div>
<div class = min>class 为min的div</div>
<div class = min title=test> class为min title为test的div</div>
</div>
<div style = "display :none;" class = none>
style的display为none的div
</div>
<div class = hide>class 为hide的div</div>
<div>
包含input的type为hideen的div<input type =hidden size=8/>
</div>
<span id = mover>正在执行动画的span元素</span>
<button onclick="panda3()">点我 点我</button>
</body>
js代码 一个个尝试哦~
function panda3(){
//$("#one").css("background","green");//id选择器-获取一个元素
//$(".min").css("background","yellow");//类（class）选择器 获取一堆元素
//$("div").css("background",'#AAAAAA');//元素选择器 获取所有div元素
//$("*").css("background","antiquewhite");//匹配所有元素
$("span,#two").css("background","aqua");//组合选择器，获取所有id为two和span 元素
}