FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 Revisiting the DOM

jQuery does a lot of things, but a big part of its popularity comes from how it simplifies access to the DOM. In this lesson, we’ll revisit the code from Lesson 2.3 and rewrite it with jQuery. You’ll see how jQuery makes our DOM code much more concise.

Related Links

3.2 Revisiting the DOM

In the previous lesson, you learned about dependency management. And you used a tool called Bower to download a dependency called jQuery. jQuery is a JavaScript library, that among other things, makes it easier to work with the DOM. And so in this lesson we are going to start looking at jQuery. We are going to take the code from two lessons ago and convert it from using pure DOM objects into using jQuery. Now there's a couple of things that I want to state before we start getting into jQuery itself. First of all, jQuery is a JavaScript library, it is written in JavaScript. So, therefore, jQuery is JavaScript. I highly suggest that you have a solid foundation in the JavaScript language. Because even though jQuery makes certain things easier, it is still JavaScript. Now, I know that if the only exposure to JavaScript is in this course, or if you saw the previous course as well, then you have a limited experience with JavaScript. However, once again, I highly suggest that you learn JavaScript. There are many resources available for you to learn the language. So that's the first thing. The second thing is jQuery hides a lot of the complexity of many things, the DOM and several other types of objects. But still, I highly recommend that you learn the standard DOM, that you learn how to do things the old style. And I hate saying old style, because there are many developers that still use pure DOM objects. But, I think it's beneficial for you to understand how to do just about everything with the standard DOM. If you need to retrieve an element, know that you can retrieve that element with document.getElementById. Now there's other ways that you can retrieve elements and we're not going to go into those. As you learn JavaScript, you will learn those other methods as well. But know the standard DOM, because the standard DOM is always going to be here. jQuery has been around for many years, and it is the de facto standard as far as libraries are concerned. But there's no guarantee that it will be here in the future, the DOM will be. So while jQuery can make our lives easier, we can always get our work done using the standard DOM. Okay, with that out of the way, we can finally start getting into jQuery. Now jQuery revolves around a special function called jQuery. And we use this to find elements within the document. And we do so by specifying CSS selectors. Like, for example, if we wanted to retrieve the element with an ID of main-content using jQuery, we would use the jQuery function. And then we would use the CSS selector. We would use the pound sign to denote an ID and then the name of that ID. And then, this will give us that element. Now jQuery is a function, and we can use that if we want to, but there's also a shorthand version of this. And that is simply the dollar sign. So you can use the dollar sign function and still pass in your CSS selector. And that will give you the element object that matches that CSS selector. Now, I should say that the standard DOM has this capability as well. You can select elements using CSS selectors. But it's jQuery that pioneered the idea. So instead of calling a document.getElementById and then passing in the ID, we can replace that with this call to the dollar function. Now the dollar function, or the jQuery function, doesn't return our element object, instead it returns what it's called a jQuery object. This jQuery object wraps itself around the element object. And the jQuery object has a variety of helpful methods that makes it easier to work with the standard DOM properties on our element objects. So we have our main content here, and instead of using the style property, these jQuery objects don't have a style property. Instead, it has a method called css and we can say that we want to set the color equal to red. So we call this css method ,we pass in color for the first argument. And then we pass in red as the second argument. And this is essentially setting the color property to red. And the great thing about the css method is that we can also use it to find out what a certain value is. So if we wanted to find what the current color is, we could do that with the css method. We just pass in color, and it will give us whatever the current color is. In our case though, we want to set it to red, so we will leave it as red. Now, creating new content and adding that content is a lot easier with jQuery. We have our mainContent here, so we can say mainContent. And then, we can call a method called append. So it's kind of like this appendChild method that is the standard DOM method. But instead of having to create an element and then giving content to that element and then appending that element, we can just call the append method. And then we can type in the HTML that we want to append. So we want to append a p element that has the content of this was added dynamically with JavaScript. Although, in this case, we can say jQuery, which is JavaScript, but let's just be a little specific here. So we are adding new content by calling this append method. And then passing in some actual HTML content. So let's comment out these other lines so that it's not going to execute. And whenever we head over to the browser, we're going to see that we end up with the same results. We have our content that is now colored red. And we have this text, this was added dynamically with jQuery. And so note we've done the same work that we did before but we did so with slightly easier code. But we can also take this a step further and we can use something called method chaining because most of the methods on a jQuery object actually returns the jQuery object. So by that, I mean that we can do something like this, we can say dollar sign, and then the id from main-content. We can call the css method so that we set the color to red, and then we can call the append method, and then append in that content. So instead of having to do this in multiple statements, we can just do it all in one, because we can chain one method call to another method call. So let's comment out this older code, and let's head over to the browser and let's refresh. Once again, we have the same results, but it is now a lot less typing. Well, let's look at our HTML. Let's select all of the div elements. We have two div elements. And let's say that we want to select all of the div elements within our document and a let's set its background color to something, something other than white. So we're going to use the dollar sign. We want to select all of the div elements. So we use the CSS selector of just the tag name of div. This is going to return a jQuery object that contains all of the div elements in our document. So then we can call the css method and we can set background color is, let's just do gray. That's something that we can at least still see everything on the screen. So this is going to change the background color for every div element in the document. Now we only have two of those so it's really not that impressive of a thing, but here we see the results. So not only can we work with one element at a time, like what we did with the main content. But we can also work with multiple elements at the same time, as long as those elements are selected with our CSS selector. So let's change this. Let's say that we want to select all of the li elements. We also want to select the p elements. So our h1 element isn't going to have a different background color, but our li elements and our P elements will. So we'll go back, let's refresh and we see that those elements have been modified. Now, in this case, this would be a lot of code that we would have to write with the standard DOM objects. And I could type that out if we wanted to but it would be at least five to ten lines of code, but with jQuery, it just takes one. Now, that's all that we are going to do in this lesson. I just wanted to get your feet wet with the idea of jQuery and what we can do with it. In the next lesson, we will actually do something useful.

Back to the top