在这系列视频中，我想明确一点：我们都不应该反感原生 JavaScript。“原生”指的是“纯粹”或“本机”的 JavaScript。在浏览器中运行的 JavaScript，不使用任何框架、库或其他任何东西。事实上，如果这不是显而易见的，jQuery 本身就是用原生 JavaScript 编写的。它必须如此，才能正常工作。我相信它内部有时会调用自己的方法，但本质上“它仅仅是 JavaScript”。
作为经验法则，如果我正在开发一个使用少量 JavaScript 来完成一些小任务的网站（例如隐藏/显示一些内容），我会倾向于不使用 jQuery 之类的库。超出这个范围，库就会物超所值。事实上，我从未做过任何非平凡的网站，没有使用 jQuery。
无论你是在使用还是没有使用 jQuery 的网站上工作，学习至少原生 JavaScript 的基础知识都是一件好事。我非常喜欢这篇 NetTuts+ 文章，它展示了等效方法（以及另一篇不错的文章）。我会经常参考这篇。
$('a').on('click', function() { });本质上是这个
[].forEach.call( document.querySelectorAll('a'), function(el) {
el.addEventListener('click', function() { }, false);
});在视频开始时，我们有一个这样的按钮
<button id="press">Button</button>正如我们现在反复做的那样，我们得到了对它的引用，就像这样
$("#press");要在原生 JavaScript 中获取该元素，我们可以
document.getElementById("press");这些东西并不完全等效，因为 jQuery 版本实际上是一个 jQuery 对象，这意味着它可以做所有那些特殊的 jQuery 操作（例如每一个 jQuery 方法）。但它确实与以下完全相同
$("#press")[0];重要的是要知道，当我们拥有对元素的引用时，我们拥有关于它的各种有用信息。请原谅这一大块内容，但强调这一点是值得的。以下只是一些我们从按钮引用中获得的信息（来自 Google Chrome DevTools）
accessKey: ""
attributes: NamedNodeMap
autofocus: false
baseURI: "http://s.codepen.io/pen/secure_iframe?turn_off_js=&mobile=false"
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 23
clientLeft: 2
clientTop: 0
clientWidth: 58
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
disabled: false
draggable: false
firstChild: text
firstElementChild: null
form: null
formAction: ""
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
hidden: false
id: "press"
innerHTML: "Button"
innerText: "Button"
isContentEditable: false
labels: NodeList[0]
lang: ""
lastChild: text
lastElementChild: null
localName: "button"
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: script
nextSibling: text
nodeName: "BUTTON"
nodeType: 1
nodeValue: null
offsetHeight: 23
offsetLeft: 0
offsetParent: body
offsetTop: 0
offsetWidth: 62
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
outerHTML: "<button id="press">Button</button>"
outerText: "Button"
ownerDocument: document
parentElement: body
parentNode: body
prefix: null
previousElementSibling: null
previousSibling: text
pseudo: ""
scrollHeight: 23
scrollLeft: 0
scrollTop: 0
scrollWidth: 58
shadowRoot: null
spellcheck: true
style: CSSStyleDeclaration
tabIndex: 0
tagName: "BUTTON"
textContent: "Button"
title: ""
translate: true
type: "submit"
validationMessage: ""
validity: ValidityState
value: ""
webkitPseudo: ""
webkitRegionOverset: "undefined"
webkitShadowRoot: null
webkitdropzone: ""
willValidate: true
__proto__: HTMLButtonElement在视频中，我们提到了使用 tagName，这在你需要确定是否在事件中查看了正确的元素时会很有用（有时事件会在嵌套元素上触发，你需要确保）。
我们还看了一些“老式”的事件绑定，例如设置 onclick 属性。它有问题，因为很容易覆盖。使用 jQuery，我们甚至不必考虑这些东西，因为它的事件绑定方法不会覆盖其他方法。赞美良好的 API 设计。
关于查找元素，还有 getElementsByClassName、querySelector 和 querySelectorAll（它们甚至存在是因为像 jQuery 这样的库），它们都值得了解。
你可以从 jQuery 本身学习原生 JavaScript！Paul Irish 有一些关于他从 查看 jQuery 源代码 中学到的知识的视频。