"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

Made with Slides.com