Data Methods

There's often data about an element you want to store with the element. In plain JavaScript, you might do this by adding a property to the DOM element, but you'd have to deal with memory leaks in some browsers. jQuery offers a straightforward way to store data related to an element, and it manages the … Continue reading

Using jQuery’s .index() Function

.index() is a method on jQuery objects that's generally used to search for a given element within the jQuery object that it's called on. This method has four different signatures with different semantics that can be confusing. This article covers details about how to understand the way .index() works with each signature. link .index() with … 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

Traversing

Once you've made an initial selection with jQuery, you can traverse deeper into what was just selected. Traversing can be broken down into three basic parts: parents, children, and siblings. jQuery has an abundance of easy-to-use methods for all these parts. Notice that each of these methods can optionally be passed string selectors, and some … 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

CSS, Styling, & Dimensions

jQuery includes a handy way to get and set CSS properties of elements: 1 2 3 4 5 // Getting CSS properties. $( "h1" ).css( "fontSize" ); // Returns a string such as "19px". $( "h1" ).css( "font-size" ); // Also works. 1 2 3 4 5 6 7 8 9 // Setting CSS properties. … Continue reading

Finding & Evaluating Plugins

One of the most celebrated aspects of jQuery is its extensive plugin ecosystem. From table sorting to form validation to autocompletion – if there's a need for it, chances are good that someone has written a plugin for it. The quality of jQuery plugins varies widely. Many plugins are extensively tested and well-maintained, but others … Continue reading

Using the classes Option

As of the 1.12 release, the jQuery UI widget factory includes a means of managing CSS class names through the classes option. This article will give you an overview of how the classes option works, and discuss what you can do with it. link Syntax overviewThe classes option is used to map structural class names … Continue reading

$ vs $()

Until now, we've been dealing entirely with methods that are called on a jQuery object. For example: 1 $( "h1" ).remove(); Most jQuery methods are called on jQuery objects as shown above; these methods are said to be part of the $.fn namespace, or the "jQuery prototype," and are best thought of as jQuery object … Continue reading

Widget Method Invocation

Widgets created with the widget factory use methods to change their state and perform actions after initialization. There are two ways widget methods can be invoked – through the plugin created by the widget factory, or by invoking the method on the element's instance object. link Plugin InvocationTo invoke a method using the widget's plugin, … Continue reading

Utility Methods

jQuery offers several utility methods in the $ namespace. These methods are helpful for accomplishing routine programming tasks. For a complete reference on jQuery utility methods, visit the utilities documentation on api.jquery.com. Below are examples of a few of the utility methods: link $.trim()Removes leading and trailing whitespace: 1 2 // Returns "lots of extra … Continue reading

Custom Effects with .animate()

jQuery makes it possible to animate arbitrary CSS properties via the .animate() method. The .animate() method lets you animate to a set value, or to a value relative to the current value. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // Custom effects with .animate()$( "div.funtimes" ).animate( { … Continue reading

Don’t Act on Absent Elements

jQuery won't tell you if you're trying to run a whole lot of code on an empty selection – it will proceed as though nothing's wrong. It's up to you to verify that your selection contains some elements. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 … Continue reading

Optimize Selectors

Selector optimization is less important than it used to be, as more browsers implement document.querySelectorAll() and the burden of selection shifts from jQuery to the browser. However, there are still some tips to keep in mind when selector performance becomes a bottleneck. link jQuery ExtensionsWhen possible, avoid selectors that include jQuery extensions. These extensions cannot … Continue reading

$( document ).ready()

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { … }) will run … Continue reading

About jQuery

Getting started with jQuery can be easy or challenging, depending on your experience with JavaScript, HTML, CSS, and programming concepts in general. In addition to these articles, you can read about the history of jQuery and the licensing terms that apply to jQuery projects. You can also make a donation to help the jQuery team … Continue reading

Detach Elements to Work with Them

The DOM is slow; you want to avoid manipulating it as much as possible. jQuery introduced detach() in version 1.4 to help address this issue, allowing you to remove an element from the DOM while you work with it. 1 2 3 4 5 6 7 8 var table = $( "#myTable" );var parent = … Continue reading

Append Outside of Loops

Touching the DOM comes at a cost. If you're appending a lot of elements to the DOM, you will want to append them all at once, rather than one at a time. This is a common problem when appending elements within a loop. 1 2 3 4 5 6 7 $.each( myArray, function( i, item … Continue reading

Events

jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function, this refers to the DOM element that initiated the event. For details on jQuery events, visit the Events documentation on api.jquery.com. The event handling function can receive an event object. This object can … Continue reading

Inside the Event Handling Function

Every event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the .preventDefault() method. However, the event object contains a number of other useful properties and methods, including: link pageX, pageYThe mouse position at the time … Continue reading