JS/jQuery选择器篇

原生JS选择器有getElementById、getElementsByName、getElementsByTagName和getElementsByClassName这四个

1、getElementById  通过Id来获取元素

document.getElementById(elementID)  

2、getElementsByName  通过name属性获取元素

document.getElementsByName(elementName);

3、getElementsByTagName 通过元素名称（标签）获取元素

document.getElementsByTagName (tagname);//div,p,span

4、getElementsByClassName  通过类样式名称获取元素

document.getElementsByClassName(ClassName);//.box

 

HTML5新增选择器：  querySelector() 、querySelectorAll()  

1、querySelector()     根据选择器获取元素

document.querySelector(selectors);  //选择器可以是： id, 类, 类型, 属性, 属性值等来选取元素。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素

2、querySelectorAll()    根据选择器获取元素

document.querySelectorAll(selectors); //选择器可以是： id, 类, 类型, 属性, 属性值等来选取元素。

querySelectorAll()  返回所匹配到的所有元素

 

jQuery选择器

1、直接选择器

$(selectors)  //selectors可以是id、className、TagName

2、交集选择器

$("标签名.类样式名字")

3、并集选择器

$("标签名字,.类样式名字，#id选择器")   //用逗号间隔

4、层次选择器
$("选择器 选择器");//$("#dv span")获取的是div这个父级元素中所有span标签
$("选择器>选择器");//获取的是div这个父级元素中直接的子元素
$("选择器~选择器");//div这个父级元素中后面所有的span兄弟元素
$("选择器+选择器");//获取的是div后面直接的兄弟元素（中间不能隔别的标签）

5、eq选择器

$("li:eq(index)") //index为下标，表示下标为index的

6、gt选择器
$("li:gt(index)")  //index为下标，表示大于index的

7、lt选择器
$("li:lt(index)")  //index为下标，表示小于index的

8、奇偶选择器

odd:  下标为奇数//$("li:odd")
even：下标为偶数//$("li:even")