jQuery選擇器(二)基本選擇器+層次選擇器

2018-5-1    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

1:獲取所有的<p>元素,對(duì)<p>元素繼續(xù)循環(huán),因?yàn)楂@取的是數(shù)組對(duì)象,給每個(gè)<p>元素添加行為事件

var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){
    items[i].onclick=function(){ //do something  }
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2:根據(jù)表格id獲取表格,在表格內(nèi)獲取<tbody>元素,在<tbody>元素下獲取<tr>元素,循環(huán)輸出獲取的<tr>元素,對(duì)元素的索引值除以2取模,然后根據(jù)奇偶設(shè)置不同的背景色。

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";
   }
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3:新建一個(gè)空數(shù)組,獲取所有name為”check”的多選框,循環(huán)判斷多選框是否被選中,如果被選中則添加到數(shù)組里,獲取輸出按鈕,然后為按鈕添加onclick事件,輸出數(shù)組長(zhǎng)度即可。

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);  
}
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

基本選擇器:

#id  $("#test")選取id為test的元素 .class $(".test")選取所有classtest的元素 element $("p")選取所有的<p>元素 $("div,span,p.myClass") 選取所有的<div>,<span>和擁有classmyClass<p>標(biāo)簽的一組元素
    
  • 1
  • 2
  • 3
  • 4
  • 5

層次選擇器:

$("ancestor  descendant") $("div span")選取<div>里面所有的<span>元素 $("parent>child") $("div >span")選取<div>元素下元素名為<span>的子元素 $("prev+next") $(".one+div")選取classone的下一個(gè)<div>同輩元素 $("#two~div")選取id為two的元素后面的所有<div>同輩元素

后面兩個(gè)用得少,因?yàn)樵趈Query里可以用更加簡(jiǎn)單的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");
藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔