jQuery

The Legend

Saving developers keystrokes, sanity and lives since 2006

What is jQuery?

jQuery is a popular JavaScript library that was first released in 2006.

At the time browser inconsistencies were rampant, and developer frustration was at an all time high as evidenced by a still deep seeded hatred of Internet Explorer

JavaScript comprehension was at an all time low and the main browsers of the time Internet Explorer, Firefox, Chrome and Safari had vastly different DOM APIs

Writing (and testing) cross-browser applications was f*king hard!

What is jQuery?

jQuery did five things wonderfully well:

Single methods to target ALL browsers
CSS Selectors to query DOM
Chaining methods
Simple methods for common repetitive tasks
Provided an interface to extend the core library

Cross-Browser Compatiblity

var myFunction=function(){
  //do something here
}
var el=document.getElementById('myId');

if (el.addEventListener) {
  el.addEventListener('click',myFunction,false);
} else if(el.attachEvent) {
  el.attachEvent('onclick',myFunction);
} else {
  el.click = myFunction;
}

Instead of this:

var myFunction=function(){
  //do something here
}

$('#myId').on('click', myFunction);

We got this:

CSS Selector Queries

var parent = document.getElementById('myId');
var targetChild;

for(var i = 0; i < parent.children.length; i++){
    if(parent.children[i].style.class = 'target' 
        && parent.children[i].tagName = 'span'){
            targetChild = parent.children[i];
    }
}

Instead of this:

var targetElement = $('#myId span.target');

We got this:

document.querySelector methods were not implemented across all browsers at the time.

The ability to query elements with greater specificity

jQuery Selector Engine: http://sizzlejs.com/

Chaining Methods

function myFunction(){
    //do stuff
}

function changeClassName(elem){
    elem.style.className = 'newClass';
}

function addClick(elem){
    if (el.addEventListener) {
      el.addEventListener('click',myFunction,false);
    } else if(el.attachEvent) {
      el.attachEvent('onclick',myFunction);
    } else {
      el.click = myFunction;
    }
}

var el=document.getElementById('myId');
changeClassName(elem);
addClick(elem);

Instead of this:

var myFunction=function(){
  //do something here
}

$('#myId').addClass('newClass').click(myFunction);

We got this:

This isn't jQuery magic but a well applied object pattern.

http://jsbin.com/wavigo/edit?js,console

Simple Methods for Repetitive Tasks

<script> 
    function toggle() { 
        if(document.getElementById('target').style.display == 'none') { 
            document.getElementById('target').style.display = 'block'; 
        }else{
            document.getElementById('target').style.display = 'none';
        }
    }
</script> 


 <div id="trigger"><a href="#" onclick="return show();">click here</a></div> 
    <div id="target" style="display:none;">some input in here plus the close button 
 </div>

Instead of this:

$('#trigger).click(function(){
    $( ".target" ).toggle();
});

We got this:

jQuery Functionality

Ajax
Attributes
Callbacks
CSS
Data
Deferred/Promises

Dimensions
Effects (Animations)
Events
Forms
Manipulation (DOM)
Traversal (DOM)

Ajax

Ajax methods are how we communicate with servers to get data without a full page reload.

Prior to AJAX this was a tedious process with inconsistent APIs between browsers

Attributes

With so much or our JavaScript interacting with the attributes on our HTML elements, jQuery provides a simple API for repetitive tasks.

Callbacks

We have so many callbacks happening in our applications that sometimes we have a need to manage them which is the purpose of the Callbacks object.

It allows us to have a central manager of our callback methods, know when they have fired, set context, maintain state, and add/remove callbacks from the list.

CSS

Like Attributes, we interact with our HTML elements often in changing/adding/removing both classes and properties of elements and inspecting their relation on the page.

The CSS methods give us an easy way to change CSS and discover size/position properties of our elements on a page easily.

Data

We often have a need to associate specific data with our HTML elements to make meaningful applications in the browser.

This can be a complex task of managing values with associated HTML elements.

The Data methods give us an easy way to store data "on" our HTML elements to be retrieved at a later time.

Deferred/Promises

In an Asynchronous world, we often have the need for synchronous behavior or "things" to only happen after other "things" are done.

Promises are an entire topic in themselves to be covered at another time, and there are more suitable Promise libraries available, but jQuery does offer the ability.

Dimensions

With CSS we often have padding and margins added to our elements and sometimes need to know the height/width of HTML elements with or without these properties.

The Dimensions functions provide an easy way to get this information.

Effects/Animation

Much of our User Experience(UX) is based on animating transitions which was fairly tedious to write as well as control as deferring behavior until after the transition was complete.

The Effects methods gives us an extensive set of methods available to easily target elements and their events as well as control duration of effects and providing callbacks to fire when an animation has finished.

Events

As previously noted, handling events across browsers was inconsistent, error prone and tedious but it is what drives so much of our applications on the web.

The Events functions give us full control for binding/unbinding events, namespacing events, providing anonymous functions for handling events, decorated event objects and window state triggers.

Forms

Forms can be tedious to manage, provide a good UX, retrieve data, and their natural behavior is to cause a full page request.

The Forms methods give us the ability to handle common events as users interact with our forms, managing form fields and their values through retrieval and serialization as well as form submission events to override default behavior.

Manipulation(DOM)

We have seen first hand how tedious creating/removing elements from the DOM can be and how common this behavior is in building web applications.

The Manipulation methods give us a broad set of functionality that makes common methods of altering the state of the DOM in our web applications in a concise and optimized way.

Traversal(DOM)

Similar to Manipulation, DOM traversal is a very common task but can also be tedious.

Traversal methods provide an extensive set of methods for traversing the DOM and finding HTML elements in relation to one another and not just from document root.

jQuery does an excellent job of understanding this need and the shortcomings of the DOM API in supporting this common use case.

The Future of jQuery

A lot of jQuery functionality is now offered through richer client-side frameworks targeted solely at SPAs.

With over 60% of web sites on the web still using jQuery it will continue to be a necessary tool for years to come.

It's a fantastic tool to use, but as any tool, use it when it meets the needs of the application, not the needs of the developer.

Resources

http://api.jquery.com/

http://stackoverflow.com/

http://oscarotero.com/jquery/