选择元素

$('[data-foo-bar="someval"]');

DOM API

// IE 8+
document.querySelectorAll('[data-foo-bar="someval"]');

DOM API和jQuery语法非常相似。

By Pseudo-class(伪类)

选择所有在指定表单中的当前无效(:invalid 伪类)字段。假设我们的表单 ID为”myForm”。

jQuery

$('#myForm :invalid');

DOM API

// IE 8+
document.querySelectorAll('#myForm :invalid');

Children(子元素)

选择一个特定元素的所有子元素。 假设我们的特定元素 ID为 “myParent”。

jQuery

 $('#myParent').children();

DOM API

// IE 5.5+
// NOTE: This will include comment and text nodes as well.
document.getElementById('myParent').childNodes;

…或者…

// IE 9+ (ignores comment & text nodes).
document.getElementById('myParent').children;

但是，如果我们只想找到特定的子元素呢？比如，有 “ng-click”属性的子元素？

jQuery

$('#myParent').children('[ng-click]');

…或…

$('#myParent > [ng-click]');

DOM API

// IE 8+
document.querySelector('#myParent > [ng-click]');

Descendants(后代元素)

找到#myParent下面所有”a”元素。

jQuery

$('#myParent A');

DOM API

// IE 8+
document.querySelectorAll('#myParent A');

Excluding Elements(排除元素)

选择所有<div>元素，排除那些有”ignore”样式类 <div>元素。

jQuery

$('DIV').not('.ignore');

…或者…

$('DIV:not(.ignore)');

DOM API

// IE 9+
document.querySelectorAll('DIV:not(.ignore)');

Multiple Selectors(多重选择)

选择所有<div>,<a>和<script>元素。

jQuery

$('DIV, A, SCRIPT');

DOM API

// IE 8+
document.querySelectorAll('DIV, A, SCRIPT');

See a Pattern?

如果我们专注于选择器的支持，并且不需要处理IE8以下的浏览器，我们只需用这个替代jQuery：

window.$ =function(selector){
var selectorType ='querySelectorAll';
 
if(selector.indexOf('#')===0){
        selectorType ='getElementById';
        selector = selector.substr(1, selector.length);
}
 
return document[selectorType](selector);
};

But I Want More!

对于绝大多数项目中，选择器支持到Web API就足够了。但是，如果你不幸需要支持IE7？在这种情况下，你可能需要一些第三方的代码来提供一些帮助。

当然，你仅仅需要引入jQuery，但当你只需要支持现在先进的选择器时，为什么用这么大的代码库呢？相反，尝试一下micro-library(微小的库)完全专注于元素选择。考虑，Sizzle，这恰好是jQuery使用的选择库。Selectivizr是另一种非常小的选择库，在很老的浏览器上也能支持CSS3选择器。