Publishing jQuery Plugins to npm

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

$( 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

Iterating over jQuery and non-jQuery Objects

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

The jQuery Object

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

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

Advanced Plugin Concepts

link Provide Public Access to Default Plugin SettingsAn improvement we can, and should, make to the code above is to expose the default plugin settings. This is important because it makes it very easy for plugin users to override/customize the plugin with minimal code. And this is where we begin to take advantage of the … Continue reading

Handling Events

jQuery provides a method .on() to respond to any event on the selected elements. This is called an event binding. Although .on() isn’t the only method provided for event binding, it is a best practice to use this for jQuery 1.7+. To learn more, read more about the evolution of event binding in jQuery. The … Continue reading

Introducing Events

link IntroductionWeb pages are all about interaction. Users perform a countless number of actions such as moving their mice over the page, clicking on elements, and typing in textboxes — all of these are examples of events. In addition to these user events, there are a slew of others that occur, like when the page … Continue reading

Triggering Event Handlers

jQuery provides a way to trigger the event handlers bound to an element without any user interaction via the .trigger() method. link What handlers can be .trigger()’d?jQuery’s event handling system is a layer on top of native browser events. When an event handler is added using .on( “click”, function() {…} ), it can be triggered … Continue reading

Getting Started with jQuery UI

link What is jQuery UI?jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how jQuery UI works. Follow along below to get started. link Start by Checking … Continue reading