Publishing jQuery plugins to npm involves several steps to ensure that your plugin is properly packaged, documented, and easily installable for other developers. Here’s a step-by-step guide on how to publish your jQuery plugin to npm: link 1. Create Your jQuery PluginWrite your jQuery plugin code and make sure it follows best practices. Include comments … Continue reading →

Select elements typically have two values that you want to access. First there’s the value to be sent to the server, which is easy: 1 2 $( “#myselect” ).val();// => 1 The second is the text value of the select. For example, using the following select box: 1 2 3 4 5 6 7 <select … Continue reading →

Because jQuery uses CSS syntax for selecting elements, some characters are interpreted as CSS notation. In order to tell jQuery to treat these characters literally rather than as CSS notation, they must be escaped by placing two backslashes in front of them. See the Selector documentation for further details. 1 2 3 4 5 6 … Continue reading →

.hasClass() (added in version 1.2) handles this common use case: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 $( “div” ).click(function() { if ( $( this ).hasClass( “protected” ) ) { $( this ) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 … Continue reading →

A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation: 1 $( “#foo” )[ 0 ]; // Equivalent to document.getElementById( “foo” ) The second … Continue reading →

If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object. 1 2 3 var myDomElement = document.getElementById( “foo” ); // A plain DOM element. $( myDomElement ).find( “a” ); // Finds all anchors inside the DOM element. Many people … Continue reading →

Either the :eq() selector or the .eq() method will allow you to select the proper item. However, to replace the text, you must get the value before you set it: 1 2 3 4 5 6 7 8 9 // This doesn’t work; text() returns a string, not the jQuery object:$( this ).find( “li a” … Continue reading →

This code selects an element with an ID of “myDivId”. Since IDs are unique, this expression always selects either zero or one elements depending upon whether or not an element with the specified ID exists. 1 $( “#myDivId” ); This code selects an element with a class of “myCssClass”. Since any number of elements can … Continue reading →

Use the .length property of the jQuery collection returned by your selector: 1 2 3 4 5 if ( $( “#myDiv” ).length ) { $( “#myDiv” ).show(); } Note that it isn’t always necessary to test whether an element exists. The following code will show the element if it exists, and do nothing (with no … 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 →