jQuery选择器(二)基本选择器+层次选择器

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");

jQuery选择器(二)基本选择器+层次选择器

猜你喜欢