"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

1. id
2. className / attributes
3. tagName
4. 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