Tech Blog

Handy Tips for jQuery Users

in Tricks/Web Design by

This article lists a few quick tips to the users of jQuery library in order to get a heads-up while working using jQuery. jQuery is the most popular JavaScript library used worldwide. JQuery is free, open-source software and is free to use for commercial applications. jQuery make it easier to traverse through a document, select DOM elements and generating animations and to handle the events. It also helps in developing Ajax applications and web applications. Following tips are on using jQuery in general and comes in handy for suitable use cases.

By: Phil Whitehouse

Saving local data in jQuery

The API is used to store the local data in jQuery. The API saves the data on the clients PC even after page refreshes and browser restarts. Hence it is one of the handy tools to use in order to help the page user to save form data and other sync information which user might make benefit out of. All the modern browsers support this feature.

The syntax is as follows:

localStorage.dataToSave = "This Is the data of the user which will be saved locally and protected against refreshes and reload of the page";

Delay() function to help save time for scripting

Changing the transitions is an important feature to create dynamic pages. It is most vital to get use to this function while generating animations in order to save time. For example, unless delay function is used, the time required for crating timeouts, manipulating parameter values, setting various variable thresholds, keeping track of the graphics running and stop, pause when appropriate would have taken a huge time.

// Delay function is used in the below code snippet
$('#elem1').animate({width:250}).delay(1000).animate({marginTop:200});

Finding Weight of a Page

The browser speed with respect to loading is indirectly proportional to the size of the page being downloaded. In order to keep an ‘eye’ on the data elements size, log parameter can be evaluated. All the redundant markups used and unwanted wrapping elements can be removed other than standard cleanup. The syntax for evaluating the log file is follows:

console.log( $('*').length );

The lesser the number, the faster will be the web page in the race.

It is important to stay with latest jQuery

Simple yet ignored advice is to jeep jQuery libraries updated. All the major bug s and performance tweaks come hand in hand to improve the overall scripting performance. Most fo the system bugs can be eliminated all together saving time and effort. The jQuery project is a place where a lot of fascinating innovation experience is expected. Hence, every release of the library should be utilized immediately to leverage the performance improvements and bug fixes.

Setting a Timer in jQuery

The timer is a invaluable tool for any person who needs to time the elements on the screen, so that the user can get a pleasant experience with the site even with a little advertisements and other quick links. The context might be different for other timer applications, but the way of assigning a delay is same for all use cases. The following code snippet provides an example for Timer function usage in jQuery which gives a delay of 300 milliseconds:

$(document).ready(function()
{
window.setTimeout(function()
{
// The user code can go here
//and here
}, 300);
});

The shared JQuery tips and tricks should always compliment the nice and cleverly organized coding style by the person using scripting tools. The simplified approach towards java scripting makes the jQuery a potential application for more time to come. Happy jQuerying!

Leave a Reply

Your email address will not be published.

*

Latest from Tricks

Go to Top