What happens when something isn't found
Imagine the following HTML.
<html>
<head><title>Demo</title></head>
<body>
<div class='blue'>Sample content</div>
<!-- scripts go here -->
</body>
<html>
Now imagine we updated the page to add a reference to jQuery, and then added the following script:
$('blue').click(function() {
alert('You clicked the div element!');
});
If you ran the page and clicked on the div tag, guess what would happen...
Absolutely nothing!!
Why? Well, it's subtle, and a very simple typo, but take another look at the selector syntax:
$('blue')
Notice how blue is missing
. which is needed to indicate a class? Because that's not there, the CSS selector is instructing jQuery to look for an element named blue, rather than a class named blue. Leaving off a . or a # is probably the number one mistake developers make when using jQuery.But, that seems like a bad thing
At first glance, that might seem like a design flaw for jQuery. However, this can be very advantageous. In fact, you'll see this as a common pattern throughout jQuery - if it can't find an item, it simply moves to the next line of code.
Remember
removeClass? removeClass doesn't throw an error if the element in question doesn't have the class. What's nice about that is we don't have to remember if the class was there in the first place, or write code to check for it in advance.
While you will certainly run into cases where leaving off a
. causes an unexpected bug, that behavior will help make your code a bit simpler when you're dealing with dynamic HTML, which is exactly what jQuery is all about.jQuery and DOM objects
When you get down to it, jQuery is a wrapper around the JavaScript DOM, both enhancing and simplifying it. One thing to remember, though, is you are always writing JavaScript. As a result, depending on where you are in code, you might be switching back and forth between jQuery and JavaScript.
Take the following code as an example:
$('#some-button').click(function() {
// code here
});
As we've already discussed, we can add code to a click event by using the syntax above. And, we can access the object that raised the event by using the
this keyword, as this will give us a reference to the object that raised the event. But, this is a DOM object, not a jQuery object. As a result, any of the jQuery methods we'd like to use aren't available, unless we convert it to a jQuery object by using the code below.
var variableName = $(this);
Obviously, that's not challenging, but it can be a bit confusing as to when the object is a jQuery object or a DOM object. More than anything, that comes with experience. The more you use jQuery, the more natural that will become. That said, one quick way to see if you have a reference to a jQuery object is to take advantage of some form of auto-complete, such as that provided through IntelliSense in Visual Studio. You'd notice in Visual Studio the IntelliSense wouldn't show the different jQuery methods, which is a quick reminder that you don't have a jQuery object and need to perform the conversion.
jQuery's each function
As powerful as the selectors are in jQuery, there will still be times when you need to loop through the collection of items returned. Fortunately, jQuery does support methods such as
index and get, and each collection that is returned can be accessed as an array, meaning there is a length property availabe. However, rather than using a traditional for loop, you may decide it's easier to loop through a collection of objects using for/each.
For/each is a common construct available in most programming environments. In a nutshell, what for/each does is instructs the runtime to grab each item in the collection, assign it to a variable that you declare, and then allow you to operate on that variable. Consider the following code:
$('.some-class').each(function(item) {
// item will be a variable that will represent each object
});
In the above code, the
item variable will automatically be assigned to every item in the collection. The first time through it'll be the first item, the second time the second, etc. This can be much easier than programming with a for statement.
The syntax for jQuery's
each function is as follows:- A collection (in the example we used a collection returned by a selector)
- The
eachfunction - A callback function with a parameter. The name you use for the parameter will become the variable name assigned to each item in the collection.
No comments:
Post a Comment