JQuery Basics - Learn The Basics of Jquery | Robin Haney | Skillshare

JQuery Basics - Learn The Basics of Jquery

Robin Haney, Web Developer and Online Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (54m)
    • 1. Introduction to the course

      1:41
    • 2. How To Install Jquery

      3:17
    • 3. Working with jquery objects

      3:40
    • 4. Working further with jquery selectors

      3:58
    • 5. Working with Jquery attributes

      3:42
    • 6. Introductory to jquery events

      2:31
    • 7. Jquery Callback functions

      1:42
    • 8. Working with the on method

      2:35
    • 9. Working further with event types

      3:57
    • 10. How to add content to a webpage

      4:54
    • 11. How to fade in elements to a webpage with jquery

      3:40
    • 12. How to modify CSS with Jquery

      5:19
    • 13. How to remove elements from a webpage

      2:17
    • 14. Understanding the document object model

      1:45
    • 15. Working with the parent() object

      4:21
    • 16. Working with the next() object

      2:47
    • 17. Conclusion to the course

      2:13

About This Class

You should have a basic understanding of HTML and CSS, nothing advanced as long as you know the basics. You should also have basic knowledge of JavaScript as well. If you got that covered then JQuery is the next step for you!

Throughout this course you will learn:

  1. JQuery Objects
  2. JQuery Event Handlers
  3. JQuery Attributes 
  4. JQuery Callback Functions
  5. How To Show and Hide Content 
  6. How To remove and add html elements to a webpage 
  7. How to edit the CSS of html elements dynamically
  8. How to add all kinds of cool effects to your webpages.
  9. All about the Object Document Model (DOM)

If you know all about JavaScript then JQuery is the next thing you need to learn.

I look forward to seeing you in the course!

Sincerely,

Robin Haney

Transcripts

1. Introduction to the course: All right, everybody. Welcome to the course. My name is Robin Heaney, and in this course you will be learning the fundamentals and the basics of the J Query JavaScript framework. This course is designed for anybody who is completely new to J. Query. We will have started if you have no knowledge about J query and go from there. And this course also requires that you have basic knowledge of syntax of HTML CSS and a little bit of JavaScript as well to help you along the way. It will make things a little bit easier through this course. You don't need to be advanced or anything like that. But just basic understanding of all those three things would definitely help you get started. So throughout this course we will be taking a very, very basic Web page with just some HTML and CSS that I'm going to show you here. And we're going to be using J query to show off how to do different styling and different animations, all that everything's that you can do in J query. And this is just a simple page we have here. So the primary focus is going to be all in, Jake. We're not gonna be building a fancy website using creates a CSS or anything like that. Ah, we're just musing that blank html document here and focus just on Jake where So you guys can understand Jay Query the best that you can and you'll see here. The only thing we have is a style sheet link here and a link to a JavaScript file which will actually be putting our JavaScript as well. So that's pretty much all we got. And that's all we're going to start off with. This course is perfect for anybody who is completely new to JavaScript, and you want something nice and simple to start off with and work with. So that's all for this introductory lesson. The next lesson. We're going to talk a little bit more about Jake weary and how you can install J query to a basic HTML document. That's it for now. I see you guys in the next lecture 2. How To Install Jquery: All right. So I know you're ready to get started with Jay career right away. But before we can actually start working with Jay Query we to install it to our HTML document. Now, there's a few ways you can do this. We're gonna do this the easiest way possible. Using a CD end in the cdn is basically a content delivery network that allows us to basically you link to the Jaqui library by just inserting, um, the link inside our HTML document. And we have some different options here. You see, we have ah, men. If i it on compressed, we're gonna go with modified because it gives us, ah, pretty much everything we need in JavaScript. And this is the code that we need. So we're just gonna give that a click and copy it, and I'm gonna go into my html document, and, uh, this is very important. Make sure you post it above the script tag that we already had in our HTML document so that Jake reloads first and then our other javascript file load second. So I'm just going to save this, and I'm gonna go into our jabs, get file, and I'm just going to write a simple line of code here, and what I'm gonna do here is I'm going to just type in a simple test to see if Jake Weary is actually working. And you can follow along with me if you like to test and see to make sure Jake worry is working in your end as well. I'm just gonna be creating a simple, if else statement here, which is going to test to see if J query is detected. Then create an alert box that says we're good to go. And then I'm going to add the else statement, which basically does the opposite. That if J query is not found, then we will write another alert box that will give us some type of error here. And, mixture, add my quotes here. So Michael in and then end this piece of code so again to go over this, we're checking to see if j queries installed. And if it is, we're going to create a simple alert box that says we're good to go else. If bakery is not involved, insult will add this area here. So I'm going to say the document. Make sure you save your HTML pages? Well, they're gonna open up her index file. I'm just gonna drag it over here. Hit, Refresh. You can see here that are lower box pops up and says We're good to go. So that's it. Jake Weary is installed on our HTML document and we're good to go. This is by far the easiest way to install J Query, and I have to do is basically linked to the cdn, which is a simple script take. So if you guys want there is a link in the external links sections that will link you to the documentation where you can grab that link and went You install J curry and you're good to go, uh, join me in the next lesson. And if you have any troubles, feel free to ask any questions. And I'll do my best to help you get set up and running with Jay Curry right away. 3. Working with jquery objects: All right, so we got Jake weary, installed and working on her HTML document. It's now it's time to start working with Jay Query in further detail on the documentation website here, and I'll put a link once again in the external section for you guys. And I'm gonna hit this e p I documentation here and in this documentation here we can see all the features in different things. That Java I mean J query Sorry can do. And there's a lot of cool stuff here, and one thing we're going to focus on here is Jake weary objects and objects. Let us do cool things and JavaScript. So let's look at this cool, fading one here and I'm gonna give the category click and we consider these cool, different things weaken. Do these air different objects that we can add different effects, and that's click this feed out one, and we're gonna give a feed out kind of effect to one of our let's do our paragraph helmet on our page, and you can see here on this page. There's also like old, different functions, different things you can do. There's a lot of good information here, don't worry if a lot of this doesn't make sense right now, as you work further with Jay Query, it will make more sense. The more important start stuff is at the bottom here, where they actually give you an example in a piece of code that will actually give it that effect. That's what you're gonna want to focus on in the beginning. And we're actually gonna copy this code here. It's gonna copy it. Go back to our JavaScript file. I'm gonna pieced in here, and we're gonna use this code and kind of change it to give it the effect we want. So again, don't worry. If this all makes sense, we're gonna I'm gonna run foods really quickly here. So this dollar sign is basically saying that we're using a J query object. Er and this little code right here is gonna be our selector. So we're gonna select our paragraph element on our page. So again we can put any selector there were giving it the click function, which once again, as a JavaScript function that basically amiss, saying whenever a user clicks a paragraph, we're gonna add this little fadeout function here once again. Here we're gonna click paragraph Element to give it that fatal defect. And let's walk through this really quickly. So paragraph element. Give it to click function. When somebody clicks the paragraph, don't give it a fade out. And then we have this slow setting here, which is gonna be a slow fade out, and then we have the actual function itself. So again, don't worry if this doesn't make sense as you work more with J. Corey, objects like this will kind of make more sense, but just kind of try to stay with me here. Eso Let's save this. And if we open up her index file, refresh the page. Oh, put that back there and we click our paragraph element. Let's go ahead and click it. We can see that it feeds so pretty cool, right? That's That's a pretty cool thing we can do with Jay Query. And again, this is just a simple J crew object that we can do that adds the fate out kind of effect to our paragraph elements. And once again, like I said before, this won't make a lot of sense at first, but as you work more with it, it will make more sense now. You can add some more different, um, effects with the fade out function function. But for now, this is just a primary example of a G quarry object, and we will be using lots of Jake. We're day query objects throughout this course to add some cool and neat effects to our page. So give that a try, and when you're ready to move on and join me in the next lecture of this course 4. Working further with jquery selectors: In the last lecture, we used the documentation to look up a simple jaqui object to give a click command to our paragraph moment. Let's go back to the documentation and try something new to add a new effect to one of our omits on our page. Now, what I'm gonna do here is I'm gonna keep looking and I'm gonna go to the filtering tab and I'm going to pick a filter for a selector. And you can see there's all these different ones like first last, um, not all these different things and we're gonna click the 1st 1 And what this does is this will select the first property child property in, like, a list or something like this. You see, you will have this list here. We can actually select the first list item using this Jake weary objects. So it's pretty cool and also very handy. And it's very simple. So I'm going to create this list. I'm just gonna go into R h d mail and paste the list that they gave us, for example, peace that in there. There we go. We know, however, a Nordling est in their list items and now we're going to select this very first item of our list. And if I open up our HTM a document, we can now see our list here. So let's go back to the documentation for J Query. Let's copy this code here that it gives us go back into our JavaScript file. I'm going to give it a paste here underneath our click function and you'll see here that again we have this dollar sign which is saying that we're using a jaqui object were targeting the list item of our list. And we're targeting the first list item with this and we're styling the CSS to be this background color red. So pretty simple, Not too too complicated, right? And we're gonna do is save this document and let's just see what happens. Let's go back to our webpage. And if you refresh it, we can see that the background is now read of that first list item. So very easy way we can select the first list item with Jacqui. Now we can also add a different kind of styling. Let's change the font size and let's make it 30 pixels. So there we go. Now the font size is the first list item is much, much bigger, so we can do all kinds of cool things with J Query as you're going to learn throughout this course. And this is just another example of how we can select different HTML elements with the J Query and add some cool effects or styling to them with Jacob De Query. Now let's go back and let's try this last Jake weary object this is gonna do is give a styling effect through the last element of our list item. Pretty cool. So again, let's copy this code here, since we already had a list to work with and you can see that the market is almost identical. The only difference just paste this in here is that and say that first we have last. So let's change this to something different. Let's change the color to maybe green. And if we save it and refresh your page who we can now see that the last list item is green . So again, all kinds of cool things we can do with Jay Query, which is some simple lines of code. So what I want you to do is practice. Try to do a weeded here and maybe even look up a code and try to learn one from the Jaqui documentation. And when you're ready to move on, join me in the next lecture of this course. 5. Working with Jquery attributes: All right, so in this lesson, you're gonna learn a boat modifying attributes with Jake weary, and you'll see here on this page that I added a image of, ah, Kitty Cat and just below the image, I've added a button that, um if we click it, it's gonna make that image big rate here. And let's see that on the Web page, just open up our what page and see. We have a kitty cat and I'm actually going to take this button here, actually going a little bit of space or so Let's go back into our each team male. And let's add a little break just to quickly add some space CEO. That looks. There we go. It's a little bit better now. If you click this button, you'll see that nothing happens. And this is because we're not actually targeting this button yet, and we can use attributes to target elements on the page. Indirectly, Richie Query. And this could be very helpful. If you're working with WordPress or anything like that, you don't actually have access to the CSS code of a particular element, or that element is demand dynamically generated on the Web page So how do we do this? How do we make this image big? Well, we'll have to go to our Jake worry here, and we're going to use the attributes, command. So this is what the code is gonna look like. I'm going to start with our dollar sign, and I'm going to target the button element, and I'm gonna give it the click function so that when somebody clicks on the button, we're gonna do the following code here, and this is we're going to modify the CSS of the image. So I'm going to use our selector, and we're gonna select the image of our webpage. And we used the attribute to adjust the with of the image. And let's do something like 200 that's gonna make the image nice and big. So you guys can really see what's going on here, and then we'll close this up here. All right, so let's go through this really quickly. Where have our button element we're selecting? Given it the click functions. When the user clicks the button, we're changing the image attributes of the with to 2000 pixels, so this will make this image much, much bigger when somebody clicks the button. If receive this in view, our HTML and we scroll down here, click this button. We can see that our cat gets enormously large here, so that's pretty cool on that so we can use attributes to indirectly target elements with G A query. This is a very powerful aspect of J Query and adds a lot of flexibility, and I'm actually gonna go back and make this just a little bit smaller so we can actually work with it. But before we do that, let's make this really small just to see what happens. If we turn this value to 10 for images, 10 pixels is going to make our cat really tiny, as we can see here on the Web page. So that's pretty cool. Let's go back and make that just a little bit bigger. Stress something like 1000 Save it up, refresh. And if I hit this image, we can see our cat gets nice and big. So this is how we use J Query to modify the CSS attributes of an HTML element on a Web page . Try that out. Enjoy me in the next lesson when you're ready to move on 6. Introductory to jquery events: previously in this course, we worked with the event handler, the Click Command here. And in this lecture, we're gonna learn a little bit more about events. So I'm on the bakery documentation and on the events page, we can see all these different things that we can do that trigger when people do certain things on the page. And, ah, in this video, we're gonna learn with another one called the double click event handler. And this pope he works just as you think it does when somebody double clicks on the page, we can trigger something to happen here and we can see here. There's in our example code here, and once again, we're just gonna grab this, go here and go to our document. Stick it in here. And what I'm gonna do is change this target element, and that's at our header. So whenever somebody double clicks Air header, we're gonna have this little alert box pop up and say something funny here. All right, so let's savor page and go into each TML document now. I actually don't have the header take here, so I'm gonna have to go in and add one. No, Normally you'd stick to header take inside the body, take. But I'm just gonna add this really quickly here to see you guys can see and we're gonna add in each one. And I have to add an actual moment to the header so that the header actually has a set with and height and you'll see what I mean. In just a second when I say this that's viewed on the Web page. You can see that our header is now this little a place where each one is. And if we double click anywhere within this little part here, our alert box should pop ups. Let's try that right now. And there we go. We can see her little message pops up whenever we double click inside the header. So this is how events work in J Query. And there's lots of different event handlers in the documentation. In the next lecture, we're going to dive even further into event handlers and try some new and exciting cool things with J Query 7. Jquery Callback functions: All right, so in this lesson, we're gonna talk a little bit more about Cole back functions in Jake Worry. Now, we worked with these quite a bit, but just to give you guys an actor example, So you know what they are? Callback functions are anything on a page that actually does something in j query and, ah, let's go over that a little bit more here. So, you see, we have this click function here. That image that's changing the attributes with inside of this function. Here is the callback function. So this cold right here is what a callback function is in j query. So we've already worked with him quite a bit. I just wanted you guys to know the actual term for them and again here. This alert box here is actual callback function that's happening as a result of our header being targeted and then the double click function running. And once again, in this example, this is the callback function that's feeding out debt, paragraph element and TV guys, a visual example of callback functions and how they work. Let's go back into our each team l A document and let's open that up and runner page. And here we can see our callback function ings working. When we double click, the callback function pops up and we have our alert box when we mouse over a paragraph paragraph disappearance from the callback function and course when you click our button are Kitty Cat gets really big. That's the callback function in action rate there, so that's pretty much it when you're ready to move on. Uh, join me in the next video and we'll take it from there. 8. Working with the on method: in this lecture, we're gonna learn about the on event handler, which is which is a little bit of a better way to target elements in J. Curry and do things. And the cool thing about the on event handler is that you can add multiple event handlers and just have so much better control and nuclear option of actually targeting moments with Jake work. So let's look at the example of on event Handler, and it's pretty easy, understand, and you'll notice that it's very similar to the other little bits of lines and code that we wrote so far. So let's target the header here an example and ruin a do something similar to the click function we created earlier. So let's go header on click. So basically what that scene is when the header is clicked, run this function and again it looks pretty much similar to the other ones, he wrote earlier. But it's a little more cleaner, and when you get more complicated and write more advanced Jake Warrior, you're going to see that you can do so much more with the on method in J query. For now, we're gonna keep thing simple, but as we advance for this course, we're gonna be using the on method from now on. Just so you guys get used to it and you'll see as we work further how we can use it to our advantage. So in this example, we're gonna type are callback function, which is this going to be a simple alert box once again, And we're gonna say, Hey, when you click the header, stop clicking here. And this is the market we use and that's finished typing out or code here. And if we save our javascript file, you noticed that we also have this double click thing here that will actually be override it by this click commands on click event handler here, so we can just get rid of that later. But if you go back to open up our HTML file, you notice that this if we click the header, we can now see that that box pops up. So that's how we can use the on event handler to add some cool little features to Jake Worry. And once again, once you start working more advanced with Jake, where you'll see the benefit to doing that as well For now, it just kind of get used to the syntax. And from now on, we're going to use that on event handler. Whenever you want to do things in Jaqua. And also, since we don't need this double click any more, we'll get rid of that so that just when we click, our header will get that alert box that pops up. 9. Working further with event types: All right, so let's work a little bit further with event type handlers. In this video, let's use an event type handler called hover that's going to make thes list Items change when we hover are mouse over them. So first of all, I'm gonna add and give them a class here. And yes, we'll give him a class of hover and the morning inning of this class to every second list item just so we can see the difference between the two. Let's copy that. Skip that one sticking on to this one and then stick it on the last one every year. So our list names now how this list hover, class. And when you go into R G query here, we can read it cold. That's gonna target that class and and the hover effect. Now, this is how we actually add the hover affecting J query. So we're select our less state of hover class. We just double check that. Yep. And we'll use the hover event handler and we write this one on a little bit different. We actually have to use the this function in order to make this work. So this is how we tape this out, put her function, they were gonna put this and then we're going to go at class and we'll hover. And that and then we have. What we have to do now is you have to make a 2nd 1 Another function that triggers when they take their mouse off the list item. Take this in here. This and then we go remove class of Hunter. No, we actually haven't had created the hover class yet. And that's going to be a CSS styling property. I'm gonna add in just a second, but to go over this code briefly we're doing here is we're targeting their list item. I didn't hover effect to it. And then dysfunction right here gets added when they hover over it. And then when they removed their mouth from it were you move the class hover and our hover class here is going to change. We're going to do something like maybe you will change the text to be a different size. And you kind of see how this hasn't effect in just a second here. So, Rokita hungry class, and let's change the font size of 30 pixels. We'll see that up and you can see here that every item with that list hover class is now going to get that hover class when people mouse over it and before I forget, we actually have to add this dot here to make this a class selector. There we go. So now we conceive our document. And if you've you are what? Page hit refresh. Now when you mouse over the list items with that class, we can see that they get that font size property that we created earlier. So that's how we can use the hover event type to change the way our elements interact with people mouths over them with their mouths. Pretty cool, yet very effective event handler for doing some pretty cool things with J Query. 10. How to add content to a webpage: Now we're going to start working with the document object model and Jake weary, and we're gonna start actually adding content to our webpage here using a query so we can actually use Jaqui Tad elements toe a page. So what I'm gonna do here the street as an example of this is I'm going to add more of these paragraph elements here. It's kind of copy and paste them in, and I'm going to give some of these paragraphs a new class of Let's just call it small text just to show you guys how this is gonna work. So we'll give three paragraphs this new class Copy this and we'll leave the last one with no class just to p two class for now. And we're gonna do is we're now going to go back into our JavaScript and we're gonna create a piece of code that's going to add a paragraph element to any ah class and the page that has that class we just created. So let's target that class we just created, which is their smart text. Small text class. Just make sure I have it correct there, and we're going to use the append event handler to add the page. That's kind of what a pen does. And we're going to create a paragraph that says this is some small text and actually won't be small, but we just leave like that for now. And what this will do is anything that has a small text class added to it. We'll add now directly underneath it will get this paragraph added to it. So if we have, like a diverse unlike that, we could add some a paragraph element to that def with Jay Query by doing sort of the same thing here. And if I open up my index page, we can now see that every paragraph with that class small text. Now, how does this paragraph element inserted directly underneath it? Except for the last one, of course, because we didn't add that class. This is a very simple way we can add content to page with JavaScript. And you see, it just disappeared there because I gave it a click because of that, um, Jake weary code we added earlier and also before it closed up this video, we're also going to use the upend event handler to actually add some more content of the page just to again. Sure, guys had how to give you guys an example of it. So, in her header, I'm going into leader each one, and I'm gonna make a little piece of code here that when the user clicks on the header, it's gonna add that each one to the page. So let's go ahead and insert the code right here underneath her header click function. So we're target our header so that when somebody clicks on the header, depend the following piece of code to our header and we just write some random text here and be sure to close it off. And if we open up our webpage and you'll see here that if we click in the head of the paragraph disappear so I'm gonna tow actually add something to our header since deleted or h one. I'm just going to go back into our document in the header here. I'm just got a paragraph because if you don't have anything in your head or your header actually won't exist on the page. So there's hope we have a paragraph here. If we open it back up, you now see that this little section here is gonna be your header. And if we cook it, we can now see that each one automatically gets added to the page. So on a very basic level, that's how we add content to a H. Daymo document using J Query. And that's a very, very powerful because you can do all kinds of cool things when people interact with elements or just interact with your Web page in general. 11. How to fade in elements to a webpage with jquery: all rights in the last video that showed us how to add basic HTML elements to a webpage using J Query in this video ammunition s how to kind of have content, hit it on the page, but then have it be displayed depending on when a user takes a certain action. So we're gonna use that with the fade in Jake Weary object here. So we'll give it a click here on the documentation and on the documentation, we can see all the information about the feed in object and some examples of it as well. So looks pretty cool against Tennessee in slow motion and step by step, and we're gonna add that effect. It's kind of like almost like an animation effect to an element on her page. And we're gonna add it to our image here so that when somebody brings up clicks are button here and makes her cat bigger is actually going to fade in a little bit better. But first, let's get rid of these paragraphs since have taken up a lot of room on the Web page. Get rid of those. And now we have a kitty cat here and we're gonna add that cool fade in effect to our cat. So let's go into our code and we're gonna get rid of that small text. Jake Recode, since we don't need anymore and we're table the following code to add that effect to that button when somebody clicks it. So we're gonna target our image, and we're gonna alter the CSS. And in order for this story, we actually have to set the CSS display to none first. And then we can add the fate in effect. So it actually needs to not exist on the page first and then fade into it if that makes sense and this little number value is going to determine how fast it feeds. And so again, we're using our selector to select our image, changing the CSS displayed and none. And then it's fading in here. So let's save it. Go back to our document. And now, when you refresh the page, when you see here that this image is getting brought up, that's fading into the page when the image is loaded. No, that's cool and all. But what if you want to make it so that when you click the button and the image feeds to this nice, bigger version here. Well, we could do that very easily by taking the code that we just wrote that adding it into our function that we created up here just go here at this callback function here and now whenever somebody clicks, it will change the with it also animated. So again we click this button and now we have that nice animation when somebody clicks that button there. So that's pretty cool. And that's how we can use thief Aidan option to add kind of some basic animation to her page. I'm gonna delete that 1st 1 there so it's when you refresh your page is not fading in. And then when they clicked the button, it fades into this nice big picture. Now that's a very nice effect that Jake Weary lets us at two images or basically any element. We can add it to any element on our page with Jay Query. So give that fade in effect to try and when you're ready to move on, join me in the next lecture 12. How to modify CSS with Jquery: now, after Gee, guys had to do some pretty cool things with Jake worries so far in this course. And now in this lecture, you're gonna learn how to use J query to modify and edit CSS on a page. So I went ahead here and I added some paragraph elements. And don't worry about that click effect going on there. Um, but add some paragraph elements of the page we're gonna do is we're gonna change the CSS of those elements when a user clicks on them. We just used a simple click effect. Let's get rid of our old click effect function since it's kind of interacting with their page and let's bring it back up here. And now you can see that these paragraphs don't do anything when you click on them. So with Jake where we can actually change the CSS. So instead of making them fade with Ajay Kori object, we can change the style of this paragraph elements. And, um, once again, I have added these paragraphs in here and we're gonna give these paragraphs a class so we can actually target them with their CSS. And let's give them the class name of background orange since we're gonna change the background of the paragraphs to be orange whenever a user groups clicks on our paragraph. All right, so I'm just going to copy this class here, change it to BG Orange. Since that's a little bit easier to type out. Stick that paragraph in there. Make sure we save our HTML document. Let's go over to our JavaScript document here. We're gonna do here. Is there going to use J query to Target or a class we just created? Just background orange. And we're gonna be using the on click event handler to make it so that whenever somebody clicks, All right, stick that in there. And once again and this code, it might be a little bit confusing since we're gonna be typing on a little bit of stuff here. But we use the this keyword to toggle the class, and we're gonna have to actually make a new class to actually add the change that happens when the user clicks on our paragraph classier. So let's see this go to our CSS and we're creating new class here, and this is the class that's actually going to change the background of repair graph element. Toe orange, Let's go, BG Orange toggle and that will be our class name. Let's go back ground and will change that background color to be the color of orange. Give that a safe and we'll go back into our code here and we'll add in that new class here . I'm just gonna change this one here because I put in the wrong one earlier. So background orange toggle. So basically, quitter code is seen here were grabbing that paragraph that class paragraph to use a background orange. And when somebody clicks on that class, it's gonna change it to this new CSS styling have here. So if we save everything, let's give it a test and see if it works, bringing the Web page hit, Refresh! And now we have our H one. And now when we click on the back and you can see it that CSS property is now goes on off, and every time you click a tall goes it on and off. And that's what that this function keyword does with the toggle event handler handler that we used in our JavaScript code. And we can be pretty flexible with this weekend changed the CSS of anything we want under Web page, which is pretty cool. So let's say we wanted to add some more styling properties. I'm just gonna go ahead of you and add a few. Let's change the font size. Well, just make it 20 pixels and let's change the margin. So now if you go back to our website and we click on a program, you can see that those no new CSS rules are applied. Have somebody clicks on that class we created? So once again, pretty cool way We can target the CSS oven element on the page and change it to be completely different CSS styling when somebody interacts with that element, and this is how we can modify CSS dynamically with Jake weary. 13. How to remove elements from a webpage: in this video, I'm going to show you guys how to use J query to hide in Element on a webpage. And we're gonna be doing is we're gonna take our image of our kitty cat that we created earlier and use J query to hide it when the user clicks on it. No, Right now we can see here that Ah, when we click on the image, nothing happens. So let's go back to our Jake Recode, and the first thing we're gonna need to do it is I'm gonna have to make our new code just up here, and we use the J coury selector to select the image. And then we're going to need to do is use the on event handler and on click. It's that when user clicks on the image, we're going to hide it with the following piece of code that we're just gonna tape out here . We're gonna be using the remove event handler to remove the image from the page so we'll target our image. And this is how we tapout the remove event handler and then we'll finish up our code here. It's now once again, when a user clicks on the image. We're gonna remove the image from the page with the remove object. So let's save this up. You're a webpage. And now what should happen is when we click on her image, our kitty cat disappears from the page, and if we view the page source, we can still see that the image is still in the code. It's just not being displayed to the user, and that's how we can use J Query to remove elements from our Web page. 14. Understanding the document object model: All right, so in this lesson, we're gonna take a little mini break from actual programming, and we're gonna talk about the document object model or Dom for short, as you're going to hear. And this is applies to javascript, hte email. And just what pages in general and the document object model is you can see nice little example of it on there be three schools and it's basically a tree of all the objects on a page. And you can see the example here with the document being at the top and then a root element , which is their html take and then airhead element and our body and our title. And you kind of be familiar with this already if you worked with HTML, CSS and JavaScript. Ah, it's basically your different elements than your selectors that used to still see with CSS and all those different kind of things. And again at the bottom here. This is everything that, um, javascript can do. And basically, javascript just manipulates the dom or document object model of a webpage. Now it's important that you kind of get a good understanding of this. You don't need to be an expert or anything like that. But again, just kind of look into it and, um, just kind of try to get a visual idea of what it looks like. And it's basically like a tree with some kind of roots going down here and branching off in a different section of the Web page with the main part at the top and, um, again, everything else being kind of nested underneath. I've went ahead and attached a few articles and some further reading that you can do on the site if you want to learn more about the document object model, as it will help you with the designing websites and working with JavaScript and J. Query. 15. Working with the parent() object: the last video we talked to both the document object model and how it's important to have a basic understanding of how all the different HTML elements on the page and the structure of theirs html elements. Now we're gonna work a little bit further with it here by actually using Jake Worry to manipulate the dom or document object model. And we can do that with different, um, different objects here so you can see there's a whole list of different objects. Second, target, different elements in the document object model. And for right now, if you're beginning, you're probably not going to use most of these. But it's still important to have an understanding of how they work because as you create more events, websites ah, you're gonna need to know them. So the first we're gonna use use here is the parents object, and what that's going to do is that's going to target the parent element of what we select , and we can do all kinds of different things with that. So let's give an example and let's see how this works. So I got the code here that I copied from the documentation here. We have a list item Now we're gonna actually go and create a new CSS rule. I'm also gonna go ahead and add a paragraph element into our header. Let's go back in your HTML and you can see here that we have this header right here we're gonna do is we're going to select our paragraph element in her header. And we're gonna use this rule to target our header, which is the parent of our paragraph. So let's go. Class will give it a class name header text and we'll give that a save back into our javascript and we'll type that in here was like that header text class and we're selecting the parent of her header text, which is our header itself. And we're gonna change the CSS here. Let's, um let's try deleting this background color and let's give it a height of 200 pixels. So what this coat is basically saying is we're selecting the header text class and we're selecting the parent of that class, which is her header, and we're giving it a new height. So review upper page. We can see here that the header just the header of her page now has that 200 pixels height added to it. And let's can you bring this up here and again? You can see here we're targeting this class right here. The header text and the parent of that class is our header you see here and that's what selecting a header and you can see it's ignoring everything else. It's not selecting the body, it's not selecting anything else, just the parent of that header text. And that's why it's very important to have a basic understanding of how the, um document object model works. So to give you another example of how this could work is let's change this header text that we're selecting in R J query file and let's change that to instead of targeting header text class, let's target our header itself and now the parent of her header tag, which is our whole H Dimon document, will now get that background color red. We change it back to what it was before, and if I save this and refresh your page, you can see that the whole document has that background color because the parent element over header is our HTML document. So again takes a little bit of practice. But once you understand the document object model, you can see how it works. And just before we close up this video, instead of selecting all the parents, we can also change it so that we're just selecting the one parent. But we have to do is just delete the S at the end here, you know, just like the one parent element. But in our case, we only have one parent element. So that's all we're going to see. But this is just one example of how we can use J query to manipulate and navigate through the document object model. 16. Working with the next() object: So before we finish up this course, I just want to spend another lesson here just working on another object that we can use to move around the document object model. And we're gonna using the next object to select a next element in a list. So a typical example here would be like I said, a list. You can select the next list item in an a nordle ist, and this the example we're gonna use here. But instead of selecting a list we're gonna do is we'll do something little difference. Let's get rid of our header code here, and let's paste in this new line and the stuff sitting, selecting a list item we're gonna do is we're gonna go into HTML document, and we're going to select this paragraph here its very first paragraph, and we're going to select the next element and the document object model. And first we're gonna have to do is we got the separated. So we give it its own separate class, and before we finish this, just read it. Guess what you think will actually be selected here. So let's go into our javascript file. We're select that first paragraph and again try to visualize in your head. What do you think would be selected? What would come next in a document? Object model after this paragraph, give you a little hint here. Okay, so let's go and change the paragraph. Background to green. And if we hit safe and we refresh the page, you can see here that the next object in the document object model is the second paragraph after our 1st 1 It's pretty simple. But again, I just wanted to show you guys how we can use that next selector to do some cool things. Now, we're actually gonna go and try the whole listing, and I'm gonna show us so you can actually use the next selector to S and p cool elements here. So what I'm gonna do is would you change this to our hover our list? Hubbard class that we created earlier. Let me just double check it. So, list hunter too, was tougher, too. And what this is gonna do is select the next let's died in that comes after that one, and it's gonna give it that green background color. So again, you're not gonna have much use in the beginning. But as you create more advanced programs and work with the aquarium or these, um, objects for selecting and moving around, the document object model can be really handy. So again, that's how we can use the next object to select the next object on our document object model and do basically whatever we want with that. 17. Conclusion to the course: All right. So you made it to the end of this Jake Worry basis course. Congratulations. You've learned quite a bit and we've done quite a bit here. Um and we have some pretty cool effects. And now you can use these effects when you design websites. So again, we've had some cool effects. When people click on items and people hover on things, you've learned how to change the CSS of objects on the fly. And you've also learned how to do cool things with images and stuff. And what not so again, congratulations on making it through this introductory basics, Jake Recourse. Now there's still lots to learn in. This is just the basics. And my advice to you is if you want to learn more about Gene query that you had an oversea documentation and you start experimenting, you can look at different things. You can try different things. There's all kinds of cool stuff here. Ah, on the jaqui documentation that you can experiment with. You could also take a more advanced Jake where, of course, that's also an option to you as well. And last but not least, I'm just going to say if you ever need any help? Ah, one place you can definitely go to it like I'm going to mention once again is the J quarry documentation. Now, if you can't find your answers there, you can also go to Google and look up your whatever your partner happy. So if I wanted to learn how to school to an element in J query, I could tape something like that into Google. Click this answer here and now regions here that somebody has that problem. You see that? Somebody posted this answer, and this is the code that we would need to use to kind of fix that problem. So that's something you can also use, which a query. And now that you understand the basics of J query, like most of this stuff should make sense to you. And if it doesn't, you know you'll pick it up a lot sooner because you kind of know how j quarry work somewhat . Not so. If you have any issues like that, head over to the documentation, see if you can find an answer for yourself if you can. You can always use a quick Google search to find out what you're looking for. So before we wrap things up, I just want to say thank you for joining me on this course. Thank you for being a student. If you have any problems, you have any issues? They have any questions or anything like that? Feel free to, um, start a discussion and just let me know if you have any problems and I'll be happy to help you out. Thanks for watching, guys. Thanks for joining me. And congratulations for completeness. J Query basics Course.