Use Stylesheets for Changing CSS on Many Elements

If you’re changing the CSS of more than 20 elements using .css(), consider adding a style tag to the page instead for a nearly 60% increase in speed. 1 2 3 4 5 6 // Fine for up to 20 elements, slow after that:$( “a.swedberg” ).css( “color”, “#0769ad” ); // Much faster:$( “<style type=\”text/css\”>a.swedberg { … Continue reading

How to Create a Basic Plugin

Sometimes you want to make a piece of functionality available throughout your code. For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection. In this case, you may want to write a plugin. link How jQuery Works 101: jQuery Object MethodsBefore … Continue reading

Attributes

An element’s attributes can contain useful information for your application, so it’s important to be able to get and set them. link The .attr() methodThe .attr() method acts as both a getter and a setter. As a setter, .attr() can accept either a key and a value, or an object containing one or more key/value … Continue reading

Avoiding Conflicts with Other Libraries

The jQuery library and virtually all of its plugins are contained within the jQuery namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn’t get a clash between jQuery and any other library (like prototype.js, MooTools, or YUI). That said, there is one caveat: by default, jQuery … Continue reading

Using jQuery UI with AMD

**Note:** This documentation refers to functionality made available in jQuery UI 1.11. As of jQuery UI 1.11, all of the library’s source files support using AMD. This means that you can manage your jQuery UI dependencies without using Download Builder, and load jQuery UI’s source files asynchronously using an AMD loader such as RequireJS. In … Continue reading

Using jQuery UI with Bower

**Note:** This documentation refers to functionality made available in jQuery UI 1.11. Bower is a package manager for the Web. You can use Bower to download libraries like jQuery UI from the command line, without having to manually download each project from their respective sites. As an example, suppose we’re starting a new project and … Continue reading

Extending Widgets with the Widget Factory

jQuery UI’s widget factory makes it easy to build widgets that extend the functionality of existing widgets. Doing so allows you to build powerful widgets on top of an existing base, as well as make small tweaks to an existing widget’s functionality. Note: This article assumes some basic knowledge of what the widget factory is … Continue reading

How To Use the Widget Factory

While most existing jQuery plugins are stateless – that is, we call them on an element and that is the extent of our interaction with the plugin – there’s a large set of functionality that doesn’t fit into the basic plugin pattern. In order to fill this gap, jQuery UI has implemented a more advanced … Continue reading

Why Use the Widget Factory?

Writing jQuery plugins is as simple as adding a method to jQuery.prototype (more commonly seen as $.fn) and following some simple conventions like returning this for chainability. So why does the widget factory exist? And why is it hundreds of lines of code? In this document, we’ll walk through the benefits of the widget factory … Continue reading

Cache Length During Loops

In a for loop, don’t access the length property of an array every time; cache it beforehand. 1 2 3 4 5 6 7 var myLength = myArray.length; for ( var i = 0; i < myLength; i++ ) { // do stuff }