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

documenet.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);
};