jQuery选择器

面试阿里的时候，被问到jQuery中的类怎么实现，当时觉得很简单，想当然地回答了document.getElementsByClassName()。直到今天才发现那是个悲剧的开始啊~

其实，jQuery的核心是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById()和getElementByTagName()。

注意：document.getElementsByClassName()是HTML5添加的方法。

以下内容引用于W3School。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

另外，介绍下Selectors API，它是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。Selectors API Level1的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏览器中，可以通过Document及Element类型的实例调用它们。目前已完全支持Selectors API Level1的浏览器有IE8+、Firefox3.5+、Safari3.1+、Chrome和Opera10+。

1. querySelector()方法

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//取得body元素
var body=document.querySelector("body");
//取得ID为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected  = document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img=document.body.querySelector("img.button");

2. querySelectorAll()方法

querySelectorAll()方法接收的参数也是一个CSS选择符，但返回的是素有匹配的元素而不仅仅是一个元素，返回的是一个NodeList的实例。

只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素。如果没有找到匹配的元素，NodeList就是空的。

//取得某<div>中所有<em>元素（类似于GetElementsByTagName("em")）
var ems=document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds=document.querySelectorAll(".selected");
//取得所有<p>元素的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

要取得返回的额NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法。

var i,len,strong;
for(i=0,len=storngs.lengthli<len;i++){
strong=strongs[i];  //or   srongs.item(i)
strong.className="important";
}