jQuery选择器(二)基本选择器+层次选择器 - 蓝蓝设计_UI设计公司

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

2018-5-1 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1:获取所有的<p>元素,对<p>元素继续循环,因为获取的是数组对象,给每个<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:根据表格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";
   }
}
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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);  
}
	
  • 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>标签的一组元素
	
  • 1
  • 2
  • 3
  • 4
  • 5

层次选择器:

$("ancestor  descendant") $("div span")选取<div>里面所有的<span>元素 $("parent>child") $("div >span")选取<div>元素下元素名为<span>的子元素 $("prev+next") $(".one+div")选取classone的下一个<div>同辈元素 $("#two~div")选取id为two的元素后面的所有<div>同辈元素

后面两个用得少,因为在jQuery里可以用更加简单的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


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


Powered by emlog 京ICP备12006971号-1 sitemap