Welcome to my first of a series of website coding language related top five lists. I’m going to start us off with some functions from jQuery that you may or may not know. There is no particular order to this list, just a set of what I consider interesting and potentially useful functions in jQuery.  Let’s get started!


trim()

What it does

Trim is a super simple function that removes any leading or trailing whitespace from a string

How to use it

» Read More: jQuery docs

In Action

fadeToggle()

What it does

Toggles the visibility of an element with a fading effect. The function also accepts parameters for duration of the fading effect, the easing function to be used furing fading, as well as a callback function for when the effect is complete. You may want to use this function because it takes care of issues with trying to fade in or out while the opposite effect is still not complete.

How to use it

» Read More: jQuery docs

In Action

I toggle

delay()

What it does

Delay simply halts the execution of an animation until x milliseconds has passed, where x is the one and only parameter. NOTE: This function does NOT halt the execution of anything other than jQuery effects and animations, if you need to half execution of other code, use the old setTimeout function

How to use it

» Read More: jQuery docs

In Action

is

What it does

The “is” functions as a incredibly convenient way to check an element against a criteria.  That criteria is some other selector.

How to use it

$(<<selector>>).is(<<selector>>);

That’s it! And remember, selector can be any jQuery selector, regardless of the browser compatibility for CSS selectors.

» Read More: jQuery docs

In Action

Let’s say you have the following elements…

You can then use the following code to provide meaningful feedback about the DOM.
$(“.insideDiv”).is(“.active”)
Returns true in this case because the ‘active’ class is present in the element selected by ‘insideDiv’ class selector.
$(“#cb_01”).is(“:checked”)
Returns true or false depending on whether that checkbox element has been clicked. This is preferred over checking for the checked attribute on the input.

on()

What it does

I hear you out there, asking why in the world the ‘on’ function would be included in a list of functions you may not know. The truth is, however, even though almost any novice jQuery programmer has used the ‘on’ function, they have probably not used it in the way I will describe, and it’s a pretty darn useful way.

How to use it

$(<<container>>).on(<<event>>,<<element>>,<<function>>);

The big difference here is that the first selector is a container and the element within the parameters is the element to receive the click event.  So what’s the big deal? This is the way to replace the deprecated “live” function from previous versions of jQuery.  If you choose an ever present container element, the children will always have the function called on the event handler, even if they are added or removed asynchronously.  The simplest way to replace the live function is to migrate from…

… to …

» Read More: jQuery docs

In Action

Here we just placed some container divs to fill with items.
Let’s add them with some jQuery.

The next step is adding in our functions to see what happens with two different versions of the on function.

And we end up with the following…

Using regular on

Click Me!

Using body selector

Click Me!

Leave a Reply