jQuery选择器（一）

1. jQuery选择器之id选择器

id选择器：一个用来查找的ID，即元素的id属性 $("#id" )

id选择器是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。

注意：id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

 

2. jQuery选择器之类选择器

类选择器，顾名思义，通过class样式类名来获取节点$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选。

同样，jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。

 

3. jQuery选择器之元素选择器

元素选择器：根据给定（html）标记名称选择所有的元素$( "element" )

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持。

 

4. jQuery选择器之全选择器（*选择器）

通过传递*选择器来选中文档页面中的元素$( "*" )

抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到。

不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:

（1）IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的。

（2）getElementById的参数在IE8及较低的版本不区分大小写。

（3）IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A。

（4）IE8及较低的版本，浏览器不支持getElementsByClassName。

 

5. jQuery选择器之层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系：

子元素  后代元素  兄弟元素  相邻元素

 仔细观察层级选择器之间还是有很多相似与不同点：

（1）层级选择器都有一个参考节点；

（2）后代选择器包含子选择器的选择的内容；

（3）一般兄弟选择器包含相邻兄弟选择的内容；

（4）相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下。

附：以上内容整理自慕课网