jQuery is not must for us--元素选取

元素选择

1 .ID
2 .class
3 .Tag
4 .Attributes
5 .伪类
6 .孩子选择器
7 .后代选择器
8 .排除选择器
9 .多组选择器

ID

jQuery

$("#myElement");

DOM API

document.getElementById("myElement");/*IE 8+*/document.querySelector('#myElement');

class

jQuery

$('.myElement');

DOM API

/*ie 9+*/document.getElementsByClassNmae('.myElement');/*ie 8+*/document.querySelectorAll('.myElement');

Tag

jQuery

$('div');

DOM API

document.getElementsByTagName('div');/**ie 8+/document.querySelectorAll('div');

Attribute[属性]

jQuery

$('[data-bar="red-bar"');

DOM API

/*ie 8+*/document.querySelectorAll('[data-bar="red-bar"');

伪类

jQuery

$('#myForm:invalid');

DOM API

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

孩子选择器

jQuery

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

DOM API

/*会返回注释和文本节点*/document.getElementById('parent').childNodes/*ie 9+ 忽略注释和文本节点*/document.getElementById('parent').children;

选择包含ng-click属性的子节点

jQuery

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

DOM API

document.querySelector('#parent > [ng-click]');

后代选择

jQuery

$("#parent a");

DOM API

document.querySelectorAll("#parent a");

排除选择

jQuery

$("div").not('.ignore');$('div:not(.ignore)');

DOM API

document.querySelectorAll('div:not(.ignore)');

多重选择

jQuery

$('DIV, A, SCRIPT');

DOM API

document.querySelectorAll('DIV, A, SCRIPT');

jQuery选择器模拟

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