Will the real DOM manipulator 

please stand up

jQuery

From this

function getElementsByClass(searchClass,node,tag) {

	var classElements = new Array();

	if ( node == null )

		node = document;

	if ( tag == null )

		tag = '*';

	var els = node.getElementsByTagName(tag);

	var elsLen = els.length;

	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

	for (i = 0, j = 0; i < elsLen; i++) {

		if ( pattern.test(els[i].className) ) {

			classElements[j] = els[i];

			j++;

		}

	}

	return classElements;

}

Using jQuery for like...everything

Standing on our own

Let's talk browser support

Selecting stuff

var el = document.querySelector('#mySingleElement');console.log(el); // <div id=​"mySingleElement">​</div>​
var els = document.querySelectorAll('.els');console.log(els); // [div.els, div.els]

Looping stuff

var elsL = els.length;while(elsL--){    console.log(els[elsL]); // cool, but lets use array functions});

els.forEach(function(el){    console.log(el); // ace?});

Looping stuff

Uncaught TypeError: Object #<NodeList> has no method 'forEach'

Looping stuff

var _each = Array.prototype.forEach;
_each.call(els, function(el){
    console.log(el); // <div class="els"></div>
});

Event listeners

$('.els').on('click', function(){
    $(this).hide();
});

_each.call(els, function(el){
    el.addEventListener('click', function(){        this.style.display = 'none';    });}); 

Managing classes

jQuery

$('.els').on('click', function(){
    $(this).addClass('danger');});

JavaScript

_each.call(els, function(el){
    el.addEventListener('click', function(){        this.classList.add('danger', 'foo');        this.classList.remove('alert');        this.classList.toggle('show');
    });}); 

AJAX

Old, horrendous JavaScript way

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xhr = false;
        }
    }
}

AJAX

jQuery

$.ajax({    url: '/api/users/',    type: 'POST',    data: {        name: 'eduardo saverin',        job: 'CFO'    },    success: function(user){        console.log(user);    }});

AJAX

Nice, concise way

var xhr = new XMLHttpRequest();xhr.open('POST', '/api/users/', true);xhr.send({    name: 'eduardo saverin',    job: 'CFO'});xhr.onreadystatechange = function(){    if(xhr.readyState == 4){        console.log(xhr.responseText);    }}

AJAX

Another-JavaScript-AJAX-thingy-that's-not-so-horrible:

File Uploading

document.querySelector('#file-input').addEventListener('change', function(){    var file = this.files[0];    var formData = new FormData();    formData.append('file', file);        var xhr = new XMLHttpRequest;    xhr.open('POST', '/fileProcessor', true);    xhr.send(formData);});

Like, real use case stuff

Animating some tiles with jQuery

function setAnimationDelay() {    $( ".square" ).each(function( index ) {        var intValue = $(this).attr('data-anim-int')*1000;        $(this).text(intValue);        var el = this;
        setInterval(function() {            $(el).toggleClass('active');        },intValue);    });}
setAnimationDelay();

Like, real use case stuff

Animating some tiles with JavaScript (OMG SAME LINE COUNT BRO)

var _each = Array.prototype.forEach;
function setAnimationDelay(){    _.each.call(document.querySelectorAll('.square'), function(el){        var intValue = el.getAttribute('data-anim-int') * 1000;        el.innerHTML = intValue;        setInterval(function(){            el.classList.toggle('active');        }, intValue);    });}
setAnimationDelay();

This is all great, but like...why?

Constraints

It's easy to write unoptimised jQuery (* I have this in production)

$('.myEls').each(function(){    $(this).click(function(){        $('#myEl').addClass('danger').not(':first-child').slideDown();        $('#myEl').removeClass('success').not(':first-child').slideUp();
        $('#myEl').fadeIn('slow').not(':last-child').fadeOut();
    });});

Imagine trying to write all that in JavaScript?

This is all great, but like...why...again?

Reinventing the wheel?

Moment.js = Abstracts a specific part of JavaScript

jQuery = Covers a large part of JS, ie. loops -> control flow

With jQuery, I feel like I'm always "prototyping".

In it's defence: jQuery is the balls

• Performant
• Tested to the hilt
• Excellent community
• PLUGINS
• Low barrier to entry

When is it appropriate?

Most excellent resources

That's all folks!