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 →

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 →

Throughout the evolution of jQuery the means of event binding has changed for various reasons ranging from performance to semantics. As of jQuery v1.7 the .on() method is the accepted means of both directly binding events and creating delegated events. This article aims to explore the history of event delegation from jQuery v1.0 to the … Continue reading →

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 →

link Custom EventsWe’re all familiar with the basic events — click, mouseover, focus, blur, submit, etc. — that we can latch on to as a user interacts with the browser. Custom events open up a whole new world of event-driven programming. It can be difficult at first to understand why you’d want to use custom … Continue reading →

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 →

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 →

jQuery Mobile provides a set of touch-friendly UI widgets and an Ajax-powered navigation system to support animated page transitions. This guide will show you how you can build your first jQuery Mobile application. link Create a Basic Page TemplateTo get started, you can simply paste the template below in your favorite text editor, save, and … Continue reading →

link Theming OverviewjQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a “swatch”. The framework comes with two defined themes A and B (light and dark) which can be used readily, removed, or overwritten. link Default Theme Swatch Mapping for ComponentsIf no theme swatch … Continue reading →

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 →