jQuery Browser Support
1.12.4 (WordPress) - Support for IE6+
15
3.2.1 (Current) - Support for IE9+
Slide 16
Slide 16 text
Fancy Frameworks and
Libraries
Slide 17
Slide 17 text
You Might Not Need
jQuery…
Slide 18
Slide 18 text
How Can I Start?
Slide 19
Slide 19 text
DOM
Slide 20
Slide 20 text
Selecting DOM Elements
$( ‘.some-selector #here’ )
Slide 21
Slide 21 text
Selecting DOM Elements
document.getElementById()
document.querySelector()
document.querySelectorAll()
- Get one element by ID selector
- Get one element by CSS-like selector
- Get all elements by CSS-like selector
Slide 22
Slide 22 text
Selecting DOM Elements
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
- Get all elements by class selector
- Get all elements by name attribute
- Get all elements by HTML tag
Slide 23
Slide 23 text
Creating DOM Elements
document.createElement()
element.cloneNode()
element.appendChild()
- Create an element by passing it an HTML tag
- Clone an element
- Append a child
Slide 24
Slide 24 text
More DOM Topics
Traversing the DOM
Form Manipulation
Styles
element.parentNode.firstChild
getSiblings( element )
element.value
element.style.backgroundColor = ‘red’
Slide 25
Slide 25 text
Events
Slide 26
Slide 26 text
addEventListener
Similar to .on(), .click(), etc. in jQuery
element.addEventListener( ‘click’, function() {
// Do something
} );
Slide 27
Slide 27 text
AJAX
Slide 28
Slide 28 text
XMLHttpRequest (XHR)
is
UGLY
Slide 29
Slide 29 text
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 &&
xhr.status == 200 ) {
// Do something
}
}
xhr.open( ‘GET’, ‘/wp-json/wp/v2/posts’, true );
xhr.send();
Slide 30
Slide 30 text
Fetch API
Supported in major browsers, but no IE11
davidwalsh.name/fetch
fetch( '/wp-json/wp/v2/posts', {
method: ‘GET'
} )
.then( function( response ) {
// Do something
} )
.catch( function( error ) {
// Do something
} );
Slide 31
Slide 31 text
Live Coding!
github.com/nateconley/vanilla-js
Slide 32
Slide 32 text
Learn More
• JavaScript 30 - wesbos.com/javascript30
• Plain JS - plainjs.com
• JavaScript for WordPress - javascriptforwp.com
• You Might Not Need jQuery -
youmightnotneedjquery.com
Slide 33
Slide 33 text
Learn More
• From jQuery to JavaScript - code.tutsplus.com/
tutorials/from-jquery-to-javascript-a-reference--
net-23703
• Sans jQuery - gist.github.com/joyrexus/7307312
• Wes Bos Resources - wesbos.com/learn-javascript/
• Parallax Done Right - medium.com/@dhg/parallax-
done-right-82ced812e61c