jQuery provides an object iterator utility called $.each() as well as a jQuery collection iterator: .each(). These are not interchangeable. In addition, there are a couple of helpful methods called $.map() and .map() that can shortcut one of our common iteration use cases. link $.each()$.each() is a generic iterator function for looping over object, arrays, … Continue reading →

When creating new elements (or selecting existing ones), jQuery returns the elements in a collection. Many developers new to jQuery assume that this collection is an array. It has a zero-indexed sequence of DOM elements, some familiar array functions, and a .length property, after all. Actually, the jQuery object is more complicated than that. link … Continue reading →

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 →

.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 →

link Getters & SettersSome jQuery methods can be used to either assign or read some value on a selection. When the method is called with a value as an argument, it’s referred to as a setter because it sets (or assigns) that value. When the method is called with no argument, it gets (or reads) … Continue reading →

You can check or uncheck a checkbox element or a radio button using the .prop() method: 1 2 3 4 5 // Check #x$( “#x” ).prop( “checked”, true ); // Uncheck #x$( “#x” ).prop( “checked”, false );

You can determine whether an element is collapsed or not by using the :visible and :hidden selectors. 1 2 3 var isVisible = $( “#myDiv” ).is( “:visible” ); var isHidden = $( “#myDiv” ).is( “:hidden” ); If you’re simply acting on an element based on its visibility, just include :visible or :hidden in the selector … Continue reading →

You can enable or disable a form element using the .prop() method: 1 2 3 4 5 // Disable #x$( “#x” ).prop( “disabled”, true ); // Enable #x$( “#x” ).prop( “disabled”, false );

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 →

Use the source as your documentation. Bookmark the source code and refer to it often.