js与jQuery选择器

基础的往往最重要，切记切记。

原生JS选择器

1、getElementById  通过Id来获取元素

document.getElementById(elementID);

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

document.getElementsByName(elementName);

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

document.getElementsByTagName (tagname);

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

document.getElementsByClassName(ClassName);

 

HTML5新增选择器

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

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

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

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

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

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

 

jQuery选择期器

1、直接选择器

$(select)  //select可以是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、奇偶选择器

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