ThruZero - Resources

Articles

· LinkedIn Tech Talks: JQuery at LinkedIn [youtube.com]
· $.extend() and $.fn.extend() confusion [asimilia.wordpress.com]
As a general rule, you should extend the jQuery object for functions and the jQuery.fn object for methods. A function, as opposed to a method, is not accessed directly from the DOM.
· Codecademy [codecademy.com]
· jQuery Basics [jqfundamentals.com]
· Cheat Sheet [overapi.com]
· Paul Irish [paulirish.com]
- · 10 Things I Learned From the jQuery Source
- · 11 More Things I Learned From the jQuery Source

jQuery Alternatives

· Do You Really Need jQuery? [sitepoint.com]
In 2013, the top five browsers are closer than ever. The core JavaScript tenets of DOM traversal, manipulation, event handling, server communication and CSS effects are well implemented and documented. So why use a library when the problems it solves no longer exist?
^...
If you use a CDN, those routines will be delivered a lot faster than your own homegrown versions. And that assumes they haven't already been downloaded and cached when the user visited some other web site.
· Native JavaScript Equivalents of jQuery [sitepoint.com]
For example, querySelector and querySelectorAll vs $(). But, you lose parent, filter, find, etc.
· Build your own jQuery [github.com]
Special builds can be created that exclude subsets of jQuery functionality. This allows for smaller custom builds. Any module may be excluded except for core, and selector. As a special case, you may also replace Sizzle (when excluded, it's replaced by a rudimentary selector engine based on the browser's querySelectorAll).
· Vanilla JS [vanilla-js.com]
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Final size: 0 bytes uncompressed, 25 bytes gzipped. LOL -I will admit: I looked at the page and was very interested and got super excited until I looked at the code examples harder. Well played, internet... well played.

Reference

· jQuery Home [jquery.com]
- · API Documentation [api.jquery.com]
- · Plugins [plugins.jquery.com]
· JQuery UI [jqueryui.com]

jQuery Summary

Events

The document.ready Event

The JQuery document.ready event fires as soon as the DOM has loaded (which is before images have loaded). This function can be called multiple times (JQuery will chain them all together).

$(document).ready(function() {
console.log("DOM has loaded");
});

Alternate form:

$(function() {
console.log("DOM has loaded");
});

Bind to an Event Handler

How to bind an event handler to the "click" event.

// .click( handler(eventObject) )
$(document).ready(function() {
// register a click-event handler
$("_SELECTOR_").click(function(event) {
// log the id of the clicked element
console.log(event.target.id);
});
});

Handle an Event

How to get an attribute from the JQuery object that was clicked during a click event.

$(document).ready(function(){
// register a click-event handler
$("_SELECTOR_").click(function() {
// get the JQuery object for the clicked element, then get its class attribute
var styleClass = $(this).attr("class");
console.log(styleClass);
});
});