1:获取所有的<p>
元素,对<p>
元素继续循环,因为获取的是数组对象,给每个<p>
元素添加行为事件
var items=document.getElementsByTagName("p");
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//do something
}
}
2:根据表格id获取表格,在表格内获取<tbody>
元素,在<tbody>
元素下获取<tr>
元素,循环输出获取的<tr>
元素,对元素的索引值除以2取模,然后根据奇偶设置不同的背景色。
var item=docuement.getElementById("tb");
var tbody=item.getElementsByTagName("tbody")[0];
var trs=tbody.getElementByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="#888";
}
}
3:新建一个空数组,获取所有name为”check”的多选框,循环判断多选框是否被选中,如果被选中则添加到数组里,获取输出按钮,然后为按钮添加onclick事件,输出数组长度即可。
var btn=document.getElementById("btn");
btn.onclick=function(){
var array=new Array();
var items=document.getElementsByName("check");
for(i=0;i<items.length;i++){
if(items[i].checked){
array.push(items[i].value);
}
}
alert(array.length);
}
基本选择器:
#id $("#test")选取id为test的元素
.class $(".test")选取所有class为test的元素
element $("p")选取所有的<p>元素
$("div,span,p.myClass") 选取所有的<div>,<span>和拥有class为myClass的<p>标签的一组元素
层次选择器:
$("ancestor descendant") $("div span")选取<div>里面所有的<span>元素
$("parent>child") $("div >span")选取<div>元素下元素名为<span>的子元素
$("prev+next") $(".one+div")选取class为one的下一个<div>同辈元素
$("#two~div")选取id为two的元素后面的所有<div>同辈元素
后面两个用得少,因为在jQuery里可以用更加简单的方法代替
$(".one+div") $(".one").next("div");
$("prev~div") $("#prev").nextAll("div");