background preloader

jQuery

Facebook Twitter

Backbone.js.

Functionality

Core. Selecting & Traversal. Manipulation & CSS. Events. Resources. Learning. Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn. jQuery Deconstructed. Creating a jQuery like chaining API - Buymeasoda. I was curious how jQuery created it's chaining API, wrapping up the matched DOM nodes in the return object.

Creating a jQuery like chaining API - Buymeasoda

It's a nice pattern that would be useful to use in other scripts. When called, the jQuery object returns an object built using the constructor invocation pattern. The jQuery methods that operate on the matched node set are exposed via the constructors prototype object, making them available through the prototype chain. The setup code also stores a reference to the prototype object in jQuery.fn, which makes it easy to add new methods later via jQuery.prototype or jQuery.fn, which refer to the same thing.

The jQuery constructor pattern Looking at the source code, and stripping out everything but the skeleton, we are left with: There are several layers here, including multiple reuses of the jQuery variable name within different scopes, and various prototype reference assignments. Here's a breakdown of the skeleton: (function( window, undefined ) { // ...}) Implementing our own chaining API. Organization of the jQuery Object. Help understanding jQuery's jQuery.fn.init Why is init in fn. How Closures Work in JavaScript: An Overview. Closures are a very powerful yet underused feature unique to of JavaScript (and other ECMAScript languages).

How Closures Work in JavaScript: An Overview

They essentially provide your code with private variables that other scripts can't access. This is accomplished by exploiting three interesting features (or "quirks") of JavaScript: JavaScript is executed in-placeFunctions can be self-executedVariables inside a function exist after a function completes Let's start by examining some JavaScript that doesn't use closures. Let's say your webpage has a button that counts how many times it was clicked: This code is fairly straight-forward and works just fine. Both functions are using the same global "count" variable, even if they were loaded in separate scripts.

Clousures solve this problem by exploiting those previously mentioned features. The key here is that incrementCount is a self-executing function, which take the form: Note the extra set of parens at the end. But the usefulness of closures in this case doesn't stop there. How does an anonymous function in JavaScript work. jQuery. Download. Compressed and uncompressed copies of jQuery files are available.

Download

The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file. The map file is not required for users to run jQuery, it just improves the developer's debugger experience. As of jQuery 1.11.0/2.1.0 the //# sourceMappingURL comment is not included in the compressed file. To locally download these files, right-click the link and select "Save as... " from the menu. The jQuery 1.x line had major changes as of jQuery 1.9.0.

Download the compressed, production jQuery 1.12.3 Download the uncompressed, development jQuery 1.12.3 Download the map file for jQuery 1.12.3 jQuery 1.12.3 release notes jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

Plugins