Bruno Abrantes

If you’re using jQuery along with another Javascript Framework (such as Prototype) which also implements the $ variable, you can give back control over it to whichever library first implemented it by using the following code (right after including jQuery):

jQuery.noConflict();

Now, instead of using $ to select jQuery objects, you will be able to use jQuery:

var el = jQuery("#myID");

However, typing jQuery every single time you want to select something gets old real quick, so you can use this trick when declaring noConflict():

var $j = jQuery.noConflict();

This reassigns the reference to the jQuery object to whichever variable you want. In this example, you can now use $j instead of jQuery as a selector. You’ll be (at least) 10 times more productive now!

Separating content from behaviour

When incorporating Javascript behaviour on your pages, you’ll probably want to take advantage of mouse events to trigger certain functions. The most obvious and common example is to display a small modal window when a user clicks a given link on the page. (…) more after the jump ›

It’s a very common question for people starting out with jQuery: How do I know if element X exists? There is no standard function for you to use, however, it’s really simple to write one yourself.

What you’ll probably try to do first is to perform a check on a jQuery object, like this:

//This won't work :(
if ( $("#myId") ) {
  //awesome code here
}

The reason this method doesn’t work is that when you use the $(), you’re asking for a jQuery object. You always get a jQuery object, even if it’s an empty one. Thus, the above code always returns true, and that’s just sad.

However, the object returned by jQuery will have an internal array filled with all the elements that do match your selector. You can access this internal list’s length using the .length property. This means that, if the length of your object is greater than zero, your element does indeed exist in the DOM. Putting that into code, we get:

//This works, yay!
if ( $("#myId").length > 0 ) {
  //awesome code here
}

Although the examples shown here only checked for the existence of an element with a certain ID attribute, you can obviously use this technique with any jQuery selector you wish.

If you build websites and enjoy coding according to Web Standards, then you’re probably aware that the XHTML 1.0 Strict specification leaves out a rather common attribute: target, which is used inside <a> tags to specify how the hyperlink should behave. With a value of “_blank“, the hyperlink would open in a new browser window (or tab), which is recommended if the link navigates away from the current site. (…) more after the jump ›