Okay, so jQuery follows this syntax here. So we're going to put a syntax here. It uses a dollar sign, followed by a selector. You can use a selector or you can use an object. Or, sometimes, you can use the html string which is kind of rare. But, these three are possible. Then followed by action. Action is nothing more than a method. Okay so, this is the heart of jQuery. This is the main syntax, actually only syntax to be used in jQuery.
And, jQuery uses something called method chaining you'll see in a moment here which allows us to chain a lot of functions or actions together in a single statement. Not only that, jQuery also has a factory function see two of them. And these are the dollar sign with the pair of parenthesis and then you also have the jQuery lowercase j big q. Okay these two are aliases. That means that they mean exactly the same thing.
Similar to the onload so I'm going to counter this out. And in jQuery you're going to use this so document, so you can see document's an object has a ready function. And for this ready function you can put the anonymous function here. Okay. And I'm going to close that with the parenthesis here. So, this is very similar to the onload here in line 16. The only thing is that well the difference between the two is that the onload will wait until everything is loaded including images, all the content, video, and audio files.
If you have a lot of that stuff then it will wait until everything's loaded. Versus, with a ready event you would just have to wait until document's loaded and you find that function. You don't have to wait until all the content loaded. And that's the difference. Okay, so if I click save here. Well let me just change the text and make sure we do voice. I'm going to say jQuery World. Click save, or control s to save. And go back to the browser. I'm going to reload this page. You see that it says hello jQuery world.
Okay, so it works fine. So this is a very common way on how to make sure the DOM is loaded before you can try your function or your code. Otherwise, you may end up with some type of error. Another way to do this is of course I just showed you that you can use jQueries instead of the dollar sign you can put jQuery here. And that should still be fine. So I want to change the text here to say Hello jQuery World two. And, save. Control s to save. And then load in the browser. And you see that it says Hello jQuery World two.
That works fine, too, because this is so common. This function here is so common that jQuery says forget this, we don't need all of that. We could just do this. So they have shortened that to something like this even shorter now. So, if you see this in jQuery this is the ready event. It does exactly the same like we just did earlier. Okay you want to put three here so that we know it actually works. Control s to save and load in the browser. I'm going to refresh here, and you see hello world three.
So there are three different ways how you can wait for the DOM to load. But this is the most common one well I shouldn't say most but it's a very common one. And again, the slogan is to write less, do more. Alright so. In this exercise I'm going to show you how you can actually target the form fields. So if you will scroll down to right about line 78 or so. Around here. So you have the form groups here. Have a class put in groups here. Have another one down here.
And if you scroll down have another one down here and so on. So I'm going to target the group and select one of the input tags and do something with it. So, if you notice that inside the input group the first child is always a span in the way that it's coded. And I'm interested in the second child the second input, third, and fourth, and so on if you want to select them. So let's target this input group and the first input field and then make some modifications.
So let's say I want to target the following. This is the traditional on JS. Typically you want to say var maybe the group equals document dot I'm going to use the query selector not the separate, just the query selector to select the first occurrence of the input group class. Okay so it's going to target the class and it's going to grab the first occurrence that's what I want.
And then now, I want to say change the border to maybe one pixels thick, solid and I want this to be red. So I'm going to click save, control s. Back to the browser and reload. You see that it targets that field. Next I'm going to select the first field, the input field and I'm going to change that to a different color. And so the next thing that you want to do you want to create another variable we'll call it input, which is a child of group.
Okay? So I'm going to call the children. Which children is it? Well the children of one. Not the zero. The zero will give us the span. So I'm going to grab the one. So now input is pointing to that field called first name and I'm going to change the style or the CSS of the background color. I'm going to call it yellow. Okay? So control s to save. Back to the browser. And refresh.
Actually I want to put a dot in front, it's a class. And this is the same rule as you would do in your CSS. Okay. So the first group, I want to get this first group. Now the difference is that the query selector only grabs the first occurrence whereas in jQuery it's going to grab all the group all the elements that have this class. So you don't want that, I want to grab the first one. So you use a function called eq which is equal the first element. In this case it's an index of zero, okay.
So that first group, and I'm going to change the CSS border. Right? The border to one solid or whatever it is. Actually I'm going to change this to the second one. Okay, instead of one so we have both of them. So, it takes the index of one. The second group, which is the Email. And the CSS is a special function. It's a set her and get her function method that allows us to do both. You can set or we can retrieve the data from there. So the first argument is the property of border.
If you leave it blank like this it's going to return the value of this border. If you supply the second argument it's going to set it for us. I'm going to put one px, a solid I'm going to use green for this one, okay. So, we'll click save or control s to save. Back to the browser. Reload the page. And you see it now selects the second field. Alright? So the next thing is I'm going to change this Email box to another color which will be yellow as well. Okay so we got that part.
Now the next thing is you can change it to the same line. Instead of going to a different line you can change here by using the dot notation. So now I'm pointing to that group. I want to get the second child which is the input. So I'm going to say children and equal to the second children which is an index of one and I want to change its CSS properties. Change the background color to yellow as well.
Okay, so I'm going to click save or control s. And you'll see that this is still a single statement. Line 26. It's followed by a line of dots and again, this a way how you can chain methods together in jQuery. It's very powerful and also it can get confusing. But let's do and see if it does what we expect it to do. So control s to save again. Back to the browser. And reload. So there it is it changes the background to yellow as well. As you can see this is a single statement but it's really hard to read sometimes.
So I'm looking at the input group the second one, and then change the CSS and then target the children, the second child and change its CSS. Now, what if I want to use the same statement but I want to change the first one which is equal zero? Right? I could do this. I could use a special function called end. Dot end. And what that does is it ends it there and goes back to the previous object selector. So it's going to go back to the children now instead of CSS, back to the children and back here I want to select the first child which is the span tab.
Okay? And then, if I want to follow the same convention here. And I want to change the background as well to something else. Let's just go with green this time, okay? So control s to save. And reload. So it changes that to green. I can do this all the way through the entire page if I want to. And so you can see it's quite powerful you can move back and forth, up and down the tree using a single statement although it's not the typical way to do things but you can.
- What is the DOM?
- Working with properties, objects, and methods
- Traversing the DOM tree
- Selecting content in the DOM with jQuery
- Updating the DOM tree with jQuery or AngularJS
- Making live updates for content
- Understanding React's virtual DOM approach