Tag Archives: programming concepts

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 11: The jQuery Object Explained

The jQuery Object Explained

While the jQuery library can sometimes feel like magic, the man behind the curtains in the jQuery library is the jQuery object. It’s this object that gives the jQuery library its power.

But to understand the jQuery object, first we have to understand a couple of important concepts.

The DOM is the Document Object Model. It’s a representation of an HTML document. What we normally think of as HTML elements become document objects when we’re dealing with JavaScript. A complete document is a collection of document objects.

And when we’re talking about programming, what is an object? An object is a thing – it’s anything. Any thing. Take a dog, for example. That’s an object. Objects have properties that describe them. For example, a dog can be short or tall, can be black or white or brown, can have curly hair or straight hair, can have pointy ears or floppy ones, can be a Great Dane or a Chihuahua or a Dachshund, and on and on. All of these are properties of the object – they describe what the dog is like.

Dogs can also do things – they can run, walk, bark, jump, eat, sleep, swim, fetch, roll over, play dead, pant, and on and on. These are methods of the object. They’re things that the dog can do. Methods are like verbs – they describe what objects can do. Properties are like adjectives – they describe the object.

DOM objects have properties and methods, too. Different DOM objects have different properties and methods, so code we write to deal with one type of DOM object won’t necessarily work for another. In addition, there are differences between different browsers – some of the properties and methods of DOM objects differ depending upon which browser and which version of the browser you’re using.

That all adds up to a tough life for developers who are just trying to get their code working. That’s where jQuery comes in so handy.

You see, when you select items on the page using jQuery’s $ selector, you’re not actually getting a collection of DOM objects. You’re getting back one jQuery object. It’s handy to think of a jQuery object like a box. That jQuery object might be empty if no elements on the page matched the selector. That’s what we discussed last week when we checked to see if the jQuery object was empty. A jQuery object can also contain one or more DOM objects. Now that they’re in their handy box, we can easily deal with them.

The jQuery object has a standard set of properties and methods that work no matter what browser we might be using and that work most of the time, no matter what type of DOM object we might be using. By boxing up all the DOM objects into a standard box, jQuery helps to smooth out differences from object to object and from browser to browser.

In addition, jQuery also provides lots of handy methods for performing the sorts of tasks JavaScript developers need to do all the time – changing the values of form elements, updating the text or CSS classes of elements, changing CSS properties, hiding elements, showing them again, animating them, etc.

The jQuery object is what makes the jQuery library seem so magical – I hope you now better understand the jQuery object and a bit more about how the jQuery library works. Happy coding!