"Must have a sound understanding of programming in JavaScript that extends beyond jQuery"
Consider polyfills instead
- picturefill - <picture>
- webcomponentsjs - Web Components
- github/fetch - fetch()
Finding Elements
Element selection
jQuery vs. the DOM API
- id
- className / attributes
- tagName
- descendants
...5. ancestors
$.fn.closest
vs
Element.prototype.closest
What about jQuery's "special" selectors?
// jQuery
$('div:first')
// DOM API
document.querySelector('div')
// jQuery
$(':button')
// DOM API
document.querySelectorAll('BUTTON, INPUT[type="button"]')
// jQuery
$(':password')
// DOM API
document.querySelectorAll('INPUT[type="password"]')An adequate replacement for $(...)
$ = function(selectorString) {
return document.querySelectorAll(selectorString)
}DOM Manipulation
"The DOM is a Mess"
John Resig - 2009
Moving elements
- $.insertBefore, $.append
- insertBefore, appendChild
Creating elements
- $(...)
- Document.createElement
- Element.insertAdjacentHTML
Showing & hiding elements
is easy and fast w/out $
Ajax Requests
$.ajax() vs. fetch()
Calling a REST API
jQuery vs native
DOM Events
The basics
Custom vs. native events
The basics - pt. 2
Bubbling vs. capturing
Firing & handling
- $.on / $.off
- addEventListener / removeEventListener
- $.trigger
- dispatchEvent, click(), blur(), focus(), etc
Use whatever you want
Just don't get lost in abstractions
@RayNicholus
rnicholus