1.3 The jQuery Function and Selecting Elements

In the previous lesson, you learned that the jQuery library has a function called jQuery. And what you will learn in this lesson is that no matter what you want to do if you want to use jQuery, you have to use the jQuery function. So if you want to select elements within the documents, you have to use jQuery. If you want to make a HTTP request you will use jQuery as well. Now, how you use the jQuery function will be different based upon whatever it is you want to do. But you have to use the jQuery function in order to do whatever it is that you want to do with jQuery. Now jQuery is rather cumbersome to type so thankfully we have a shorter version, it's simply the dollar sign. So whenever you are looking at other people's code and you see that they are using jQuery, they will more than likely use the dollar sign. Because that's a whole lot easier to type then J query. Now, that's not always going to be the case because there are some other libraries, and components that use the dollar sign for their own purposes. But jQuery is flexible in that you can set jQuery so that it doesn't use the dollar sign. We're not going to go over that particular option but just know that usually if you see the dollar sign that means jQuery. So let's just save this. We will see in the browser that type of dollar sign is a function as well because it's just an alias of jQuery. So let's start by selecting elements with jQuery. And we start with the dollar sign and then of course we are going to execute this function so we have a pair of parentheses. And then we are going to pass a CSS selector for all of the elements that we want to select. So let's say that we want to select all of the P elements within the document. Well we have two of those.So we can use the very simple CSS selector of P. And let's store this within a variable. Let's just call it elements,and then we can alert elements dot length.and we will see that,this is two whenever we look at it in the browser. Because we have two elements. And we can use just about any CSS selector that we want. If it's valid, jQuery more than likely supports it. So let's do something a little bit more advanced. Let's add a class attribute to one of these p elements p and let's just give the class of foo and I am in the habit of always saving after I make a change. I need to get out of that because this browser Sync is going to automatically refresh the page. So let's say that we only want to select the P elements, that have a class of food that is our selector that we are going to pass to the jQuery function will save it will look at the results and we have just one of those. So jQuery revolutionized the way that we select elements in the documents. Before if we wanted to do any type of advanced look up, as far as the elements are concerned we would have to use the standard IPI. Of course the easiest way to do it would be to just give the elements in ID and then use getElementsById. But if we wanted to do something more advanced like the select only the elements that had a class of food. Then we would have to write a lot of code and jQuery just made that easier and in fact now we have some standard APIs that give us the ability to select elements based upon aCSS selector. And the reason why those now exist is because jQuery made that possible that popularized that's way of selecting elements and it's actually much better than what we had to do before. So we can pass any CSS selector to the jQuery function and it will select those elements for us. Let's just do one more, Let's say that we only want to select an element that has an attribute called data-attr, and let's go ahead and set that as a value of bar. So, We only want to select those elements that have that attribute that also have that value So, our CSS selector is going to look like this. We want to select all the elements that have a data dash ATTR Attribute that is set to bar. And whenever we save this and look at the results, we have a result set of one element. Now this leads us to the second most important thing about the jQuery library. And that whenever you select elements, you aren't to getting an array of pure DOM objects. You are getting what's called a jQuery object. So let me add that comment. This is a jQuery Object. Now the reason why we get this object is because the jQuery objects have a whole host of utility methods that just makes our lives easier. Like for example, let's do this using the standard API. We're going to retrieve our elements using querySelectorAll. We're going to use the same CSS selector, so let's just copy and paste that. That's going to give us our list of elements, but in order to do anything with these elements, we have to iterate over this list. So we could do that with a four loop. Or we could use the fore ach method if we wanted to do that but we would save our I. I mean we would fill out this whole for loop and then inside of the loop we would need to do elements two and then index of I style. Let's say that we wanted to change the color to blue. That's what our code would look like, and anytime that we wanted to do anything with all the elements that we selected, this is what we would have to do. And this is just for something fairly simply Just changing the text. Color to blue. Well, with jQuery, we don't have to do that. Since we have this jQuery object, we can use a method called CSS. And we're going to look at the CSS method in more depth later on. But for now, let's just use the most simple version of the CSS method, and that is simply passing two values. The first is the name of the property that we want to change color, and then the value for that property, blue. And that's it, we don't have to write any loops or anything like that. The CSS method has a loop built-in so we don't have to In a rates or do anything if we did it a rate over this. Then we would be actually writing inefficient code because the CSS method is iterating over those elements anyway. So all of the built in J. Query methods have built in iteration. Now there are some times when we will want to iterate over our elements and we will do that later in the course. But for something as simple as changing the style, this is it. So, we call this CSS method B sets the color to blue. If we go to the browser we see that the text has changed to the color blue. So, there are two things I want you to take away from From this lesson. The first, in order to do anything with jQuery, you have to use the jQuery function. The second thing is that, most of the time whenever you use the jQuery function, you get back a jQuery object, and that object has a variety of methods that make it easy to work with all of the elements that you just selected.