Before completing the section on the DOM, we need to talk about jQuery. jQuery is a library that is used widely within the JavaScript world. Basically, jQuery can help eliminate the differences between browsers. For example, when we were looking at events, for IE, we needed to use attach event. For other browsers, we would use add event listener. Well, if we chose to use jQuery, we would not have to worry about those differences.

JQuery simplifies the ability to work with the DOM, in selecting elements in manipulating by adding content or editing, HTML attributes and CSS properties, as mentioned, defining event handlers and also performing animation so jQuery can simplify work if we are working extensively with the DOM. Now in this video, I'm simply going to provide an introduction. There are a lot of resources about jQuery, which you can access if you intend to learn more, and all things JavaScript, we will be creating a course on jQuery as well. But this introduction will give you an idea of what is possible. So let's take a look at a few concepts associated with jQuery, just to give you an introduction. So first off, as I mentioned, jQuery is a JavaScript library.

Now first, let me describe what a JavaScript library is. Basically, a library is simply a JavaScript file that you can include in your HTML pages. And that JavaScript file provides you a bunch of methods or a bunch of different resources that help you with your coding, it can simplify your project. jQuery is probably the most widely used JavaScript library. Now another important part of this is that jQuery is written in JavaScript. As I mentioned, it's a JavaScript file that you include with your HTML pages.

So it's written in JavaScript. So if you wanted to, you could go through the jQuery file, and see how they do different things in JavaScript. In fact, that's one great way to learn more advanced techniques in JavaScript. So now if you choose to attach the jQuery file to your project, you then have access to all the capabilities that jQuery provides. Now jQuery provides a single global function that you can use to access all of its capabilities. So it doesn't pollute the global space with with a whole bunch of global functions for you to use.

It provides one global function, and they call it jQuery or the dollar sign for short. Now, don't let the dollar sign throw you. The dollar sign symbol is simply a name of a function. Simply as jQuery is a name of a function. They just use one symbol to name it. So don't think that that symbol does something special.

Basically, what it's doing is it's calling a function that's been provided by the jQuery library. So you can use either the jQuery function or the dollar sign function, they both accomplish the same thing. Now when you call these functions, you pass into them selections. criteria, and then those functions, select elements on the DOM. So you use the jQuery function to query for a DOM element. Now, when the jQuery function finds that DOM element, it returns a value to you.

Now that value is a jQuery object, that jQuery object encapsulates the element which you're selecting. But because it is an object created by jQuery, they have added additional methods to it. So not only do you have access to that DOM element, but you have access to a bunch of new methods, which you can use to manipulate that DOM element or to work with that DOM element. So the value the jQuery function returns is an object that you can then use to do a bunch of different things. So as mentioned, it offers numerous additional methods for working with that DOM element. So let's take a look at a simple statement that uses jQuery.

As you can see, it's very JavaScript like, basically we're declaring a variable. And then we set it equal to and we call a function. Remember, this is just the name of a function that's provided by the jQuery library, we pass into it a tag. So this is simply going to select all the div tags within our HTML page. And as I mentioned, it will return them as a jQuery objects so that we then can manipulate them. Now another advantage of jQuery is that it supports method chaining.

That means you're able to connect methods together using dot syntax. This allows you to accomplish a lot of what you need to on a single line. With some of the stuff we've been doing in the with the DOM, we would select the element and then we would on the next line, we Make a modification to it. Here's a similar type of statement that we can be done with jQuery. So here's our jQuery function, we're selecting all the h2 elements. And then once those are selected, we have access to a method CSS.

That method is provided by jQuery, because it encloses the elements it selects in an jQuery object. And so we have access to this method as one of the hundreds of methods that are available. And this CSS method allows us to change something about the CSS in this case, we're changing the text decoration and setting it to underlying so very simple jQuery statement and you can see the method chaining right here using the dot syntax. Now method chaining would allow us to do another method beyond that so we could do another And so on. So you can begin to see how method chaining could allow you to do a lot on a single line. So that is a short introduction to jQuery.

Now that you know JavaScript, jQuery should not be difficult to learn. And as I mentioned, there are numerous resources out there. I would advise you to look into jQuery. Even if you decide not to use it, you are indeed going to encounter other people's code that does use it. So it is a good skill to have. Let's move on to the next topic.