Tag Archives: selectors

Episode 12: No Conflict Mode

No Conflict Mode

As you’ve probably noticed in our code examples, jQuery uses the $ to select elements that we want to work with. The only problem is, jQuery isn’t the only JavaScript library that thought the $ made a handy shortcut. If you want to use more than one JavaScript library on your pages, you can tell jQuery that you don’t want it to use the $ any more so that the other library can have it.

You do that by putting jQuery into no conflict mode.

jQuery’s no conflict mode gets used by WordPress – if you load jQuery up with either a theme or a plugin, jQuery’s in no conflict mode to make sure that it won’t clash with any other JavaScript libraries loaded on the page.

Putting jQuery into no conflict mode is easy enough, you just call the noConflict() method like this;

jQuery.noConflict();

Now that jQuery no longer uses the $, you have a few options for how you’ll go about taking advantage of the jQuery library’s awesomeness without using the $.

First, of course, you can just use the full name, jQuery. So a selector might look like this:

var listItems = jQuery('ul li');

That works fine, but it’s extra typing. If you’re just adding a couple of lines of JavaScript, you probably won’t mind, but if you’re writing a lot, it might make a lot of extra work.

You can also use a special kind of function, called a self-invoking function (big programmer words!), to contain the $. It’s a little confusing if you try to explain it, so let’s just look at some code:

(function($) {
var listItems = $('ul li');
})(jQuery);

Basically, for any code you write inside that function, the $ is equal to jQuery, but for any code outside that function, the $ is not equal to jQuery. If you were using two JavaScript libraries and had put jQuery into no conflict mode, you could write all of your jQuery code inside that function and all of your other JavaScript outside that function, and everything would work as expected.

Finally, you can also give jQuery a different nickname. That looks like this:

var $j = jQuery.noConflict();
var listItems = $j('ul li');

You can make that shorthand any legal variable name. And it’s fine if the variable name contains a $, as long as there’s at least one other character there too. You can choose a short 1 or 2-character name, and save yourself a lot of typing.

Using jQuery in no conflict mode is a great way to make sure you don’t accidentally clash with other JavaScript libraries that might get loaded on the page. It’s an especially handy technique when you’re working with something like WordPress, where a site owner might install a theme or plugins that use different JavaScript libraries.

See you next week for more jQuery learning!

Episode 2: jQuery Selectors

jQuery Selectors

Very often, the first thing you’ll do in jQuery is select the element or elements that you’d like to work with. jQuery selectors allow us to get specific and target just the right element(s).

jQuery borrows many of its selectors from CSS, so many of them will look pretty familiar to a designer who knows a bit of CSS. In this video, we’ll take a look at the most commonly used jQuery selectors. These include:

  • ID Selector
  • Class Selector
  • Tag or Element Selector
  • Universal Selector
  • Attribute Selector
  • Hierarchy Selector
  • Direct Descendent Selector
  • Visibility Selectors
  • Form Element Selectors

You’ll wrap your selectors in quotes – you can use either single or double quotes. I prefer to use single quotes since my fingers are lazy and it saves me from having to press the Shift key. That might sound silly, but when you’re typing hundreds of lines of JavaScript, it makes a big difference.

Now, this list of selectors is hardly exhaustive – there are dozens more types of jQuery selectors, but these are by far the most common and you’ll find that just knowing these will cover most cases where you need to select elements.

Join me again next week when we’ll cover adding content to your HTML pages with jQuery.

Google+