Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Skill Level Intermediate
In this movie, we're going to talk about attributes and properties, two similar sides of a similar and subtle coin. So here's my page, and here's the file controlling it. So the first thing that I'm going to do is just look up here and of course any of these is an HTML attribute. Anything to where we say a name and then give it a value. So, I'm going to look at this first link on the page whose href attribute is set to index.htm. Let's scroll down to my jQuery here at the bottom. When the form submits, I'm not letting it submit and I have some code here.
And the first thing that I'm doing, is selecting the very first a tag on the page, and then I'm using the ATTR, or attribute method to retrieve its atrif attribute. So when I call it this way, with just one argument, it will extract that attribute and return it for me. So, I'm actually going to copy this, and bring it over here to my browser and open the console. So we can just see it right away. And indeed that is index.htm for this first link. And I can use this to set that link as well. So, if I mouse over this right now, you can see down there in the split between the console and the main window.
There's the link. I can call this in a different way. So, if I pass in the name of the attribute and then I pass in a second argument say, make it link to itself. I pass this in as the value and that will change dynamically on the page. Of course it won't change in here, in my actual saved file. But in the rendered version that appears in the window it will change. So now let me mouse over this. And you can see it has changed. And this works on any attribute. You could change the source attribute of an image or any attribute at all. I put this in a console.log, so we can see this later.
Okay, so with attributes, you might think, okay, I know that when I want a check box to appear checked in my HTML, I can set the checked attribute. So for example, I scroll up here to one of these check boxes, and I say I want snowboard. Here, to appear checked when I load the page. Okay. So I'm going to set the checked attribute, using the XML style, I'll save this and reload. Okay, great. The checkbox is checked. But if I want to do this with jQuery, I need to do it differently because, while this is an attribute in the way the HTML is written, in terms of the DOM, it's not considered an attribute.
This is to me, one of the more confusing things about working with forms and when you're working with the DOM. What you're actually doing is changing the checked property in terms of the DOM. A property means anything, generally speaking, that can be set true or false. An attribute refers to one of these actual attribute values. And properties are a special case of that where they can be set true or false. There's a lot more on this in the jQuery documentation. But suffice it to say, that in general practice the properties that you're going to be dealing with are things like whether a checkbox is checked.
So even though this property business is different from checking regular values, there is some similarity. So if I want to change a property, I do this the same way as when I was working with values. I pass in this first argument the name of the property that I want to mess with. And then, it's the second argument, the value. So, in this case, I want to set the check property of this backpack checkbox true. And there it is. The checks. Now, there's one more way that I can do this. I have it commented over here. I'm going to uncomment it. Many of jQuery's methods have different ways that you can use them.
They can be similar and sometimes a little confusing, but work with them a little bit and the differences will become a lot clearer.