5 Simply Cool jQuery Functions Unveiled

Tuesday, January 18th, 2011

5 Simply Cool jQuery Functions Unveiled

jQuery is used by innumerable developers worldwide, and for good reason – it’s an excellent way of increasing the productivity of your JavaScript development. As such, I’ve decided to outline a few of its most useful functions. Each heading also links to the function’s jQuery API page.

1 .queue()

This handy function, as the name implies, allows you to queue actions to occur on an element or set of elements. By default, it uses the ‘fx’ queue, which is the default animation queue. This allows you to easily setup non-animation actions to occur in between animations. For example, fade an element out, then change its appearance, then fade it back in. Alternatively, you can specify a string representing a different queue, then you can make different sets of actions and animations occur simultaneously, still respecting their individual queues.

2 .load()

One of jQuery’s AJAX-related functions, .load() is used if you need to place the results of your AJAX call directly into an element. This allows you to place external content inline with a fire-and-forget function call. Of course, you still have the option to include a callback when the download completes, but it’s handy that you don’t have to set up dropping the contents onto the page in the callback.

3 .each()

This function should be familiar to anyone who’s used jQuery very much at all, but it’s so incredibly useful that I had to include it. .each() iterates over the elements in the collection it’s called from, and runs the specified function for each one, passing the index and DOM element as arguments to the function. The active DOM element is also the context for the function call, so it can be referenced with the “this” keyword.

4 .data()

This is another one that shouldn’t be unfamiliar to most jQuery developers. .data() allows storage and retrieval of arbitrarily named data on a specific element. This data can then be accessed by any other piece of script, so for example you could toggle an “active” flag on buttons when they’re clicked, then another function could loop through all the buttons on the page and highlight the active ones by applying CSS or adding a class.

5 .serialize()

This one’s primarily for use with AJAX. It takes the fields of the form you call it on and turns their name/value pairs into a query string. It’s a simple matter then to apply this query string to an AJAX call to either obtain confirmation of an action, or retrieve contents specific to the form data. Like a site search without a new page load, for example. You can serialize a collection of form fields, though it’s generally recommended to call serialize on the form itself.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like