jQuery Coding Fundamentals - Get started quickly with jQuery | Laurence Svekis | Skillshare

jQuery Coding Fundamentals - Get started quickly with jQuery

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (3h 11m)
    • 1. JQueryIntro

      2:20
    • 2. 1 What is jQuery

      7:53
    • 3. 2 Why use jQuery

      8:47
    • 4. 3 JavaScript vs jQuery

      9:53
    • 5. 4 Document Ready and DOM onload

      4:44
    • 6. 5 Common jQuery Methods

      5:15
    • 7. 6 This and Arrows

      2:51
    • 8. 7 Prepend and Append

      4:34
    • 9. 8 Advanced insertAfter and Before

      3:09
    • 10. 9 jQuery Attributes

      4:09
    • 11. 10 Create an Element jQuery

      5:48
    • 12. 11 Get Values jQuery

      3:29
    • 13. 12 Remove and Empty

      1:56
    • 14. 13 Coding Challenge List Maker

      11:08
    • 15. 14 Code Explained jQuery

      4:18
    • 16. 15 Images Attributes jQuery

      3:04
    • 17. 16 Code Challenge Checkbox True

      6:42
    • 18. 17 Mouse Events jQuery

      4:41
    • 19. 18 Keyboard Events jQuery

      8:03
    • 20. 19 on Event Delegation jQuery

      9:33
    • 21. 20 jQuery Effects Hide Show Fade

      8:21
    • 22. 21 jQuery Slide Effet

      3:35
    • 23. 22 jQuery Animations

      10:23
    • 24. 23 jQuery Animations Coding Challenge

      8:33
    • 25. 24 jQuery AJAX

      11:20
    • 26. 25 Code Challenge jQuery Ajax Method

      8:20
    • 27. 26 Each Method jQuery

      7:39
    • 28. 27 jQuery Traversing DOM Tree

      8:07
    • 29. 28 Filter and Find jQuery

      9:30
    • 30. 29 jQuery Conclusion

      2:30

About This Class

learn how to code jQuery

This course is perfect for anyone who wants to learn jQuery quickly in a fast paced course teaching you all the core fundamentals of jQuery to get started quickly.  Start writing jQuery code today.

Learn jQuery HERE - it will open the door to many possibilities.

Step by step learning covering the core parts of jQuery to get you coding quickly.  Source code and everything you need to get started is included.

Course covers

  • explore how to write jQuery basics

  • how to select elements to apply manipulations too

  • learn about applying style and classes

  • adding effects to elements like hide and show

  • make you web page come to life with animations and effects slide, fade and animation

  • create interaction with your page using event listeners like mouse events and keyboard events

  • use AJAX to connect to JSON data to easily populate content into your page

  • all this and much more

You will be amazed at how easy it can be to do some much.  Best of all jQuery syntax just makes sense!
Go ahead and hit that "take this course" button to start learning the jQuery Today.  

jQuery is still the most popular JavaScript library available, in fact over 19 Million websites use it and its used in almost 5000 libraries.   jQuery Knowledge should be part of any front end developers skill set and its a natural choice for anyone who is familiar with CSS and JavaScript.  

jQuery provides web developers and easy way to create interactions with web pages.

Taught by an instructor with over 20 years of web development experience, ready to help you learn

What are you waiting join now to start learning jQuery, you have nothing to lose.

Transcripts

1. JQueryIntro: Hi there. My name is Lawrence. I'm gonna be your instructor for this course of this course is all about G Koury. So showing you all of the fundamental core concepts of G Koury and how to get started rating geek recode quickly and easily. This is the perfect course for anyone who wants to learn more about Jake. Worry. It's a class piece, of course, teaching you all of the core fundamentals. All of the source code is also included in one of the best ways to learn is to try the code out for yourself since step by step learning covering the core parts of J query, including how to rate J coury The Basics of ratings. A query. How to select elements pied manipulations. Two elements on the page. Also learning how to apply styles and classes, all using J. Corey. So did you know that there's a lot of really neat things you can do with Jake Recon. Make animations really easily and bring your Web pages to life with just a few lines of code selecting the elements and then applying animations, fades, slides, hide show and a whole bunch more create interaction within your Web pages by adding event listeners to elements, you'll be amazed at how easy it is to do so much with Jay Query and Festival Geek Worry just makes sense. If you're familiar with CSS, they could be able to apply Ghee query really easily by making the same selections to the elements and then applying code. And the different methods I do encourage you to create a project. I do suggest that you create a project at a project to the course. There's a number of different challenges throughout the lessons. You can create the project in a number of ways, so go down to where it says create project and that will open up the project creation screen. And from here you can enter in a project title. You can also upload an image, a screenshot off your project, and you can add in the code here within the project area within the content area, adding and images videos. And it's while you can link out to your get help repositories, code pen or any other way that you're wanting to share your code, and this will provide you an opportunity to showcase your work as well as providing opportunity for others, including myself, to review your work and answer any questions you may have. So let's get started with G query in upcoming lesson. 2. 1 What is jQuery: Hey, welcome to the set up lesson and where we're gonna be introducing you to J. Coury. So I do have the editor open. The editor that I'm going to be using is brackets. So it's available in brackets I O. And I've created a basic HTML page where we've got some HTML elements. We've got the H one that each to dibs, bunch of list items. And we're gonna be selecting these elements as we go through the upcoming lessons in order to introduce you to how to write J coury coat. So what is J coury you ask? Well, J curry is a JavaScript library, and this is something that you can use in order to select elements on the page a lot quicker. You could bring it into your projects the same way that you would any other JavaScript G s file, so you would link to it from your main HTML file. And that way you would have access to all of the JavaScript in the pre written JavaScript code. You can think of J. Korea as a tool box that you can easily bring into your projects and do some amazing things with it. Some of the reasons for using a J. Curry instead of just writing up your own JavaScript code is, it's already pre built and ready to go. It's really great at handling and using interacting with the dawn. So Dom traversing manipulation of the Dom Elements event handling of elements also animations, and it's just much simpler. And it works really well across multiple different types of browsers, so you don't have any surprises. It's full of rich features, and it is the most popular JavaScript library out there. More information is available at j coury dot com. There's also a get hub page where you can check out more information and also see the latest releases of G. Cree and see all of the different updates they do. List out how you can bring J. Coury into your project. We are going to be covering how to bring J Korean to your project as well. In this lesson, it makes things easier for developers and allows developers to implement the JavaScript code without having to write the complicated JavaScript code themselves. So Jay Curry is also commonly referred to as a framework that means that's a collection of JavaScript code it's packaged together, and it could be accessed by a simple line of code. Let me show you taken. Bring G Koury into your project so you can go over to j coury dot com, and you could download the latest version of J. Coury, which currently is 3.51 and select download. It's gonna give you a few different options for downloading on the website so you can download the compressed or the UN compressed version. And then there's also a slim and an un compressed slim. So what the slim does is this is excluding some of the features, such as Ajax and some of the effects modules that come with Jake weary. So if you're not looking to include those within your coding that you could go ahead and use the slim version as it's gonna be a smaller file size. But if you want to get all of the G query functionality, then look at the regular G Koury version and select the compressed version of J. Coury. So the difference between the compressed and the UN compressed is that when it's compressed , it's men ified, and when you select the links, you can see the difference that this is the UN compressed version. So this is humanly readable. You can go through and you can see the JavaScript code that is behind the scenes, allowing J Coury to do all of its amazing functionality. And if you select the compressed version, that's gonna be compressed. So removing out all of the spacing, all of the lot new lines and essentially making the file size smaller by removing out spacing men if eyeing the function names as well. So it compresses the amount of characters needed in order to identify a function, and that's them side by side. So as you can see this one, the men ified version is way harder to read. Also, if you do write your JavaScript code and you do want to men if I it yourself, there's some nice websites online that will allow you to do the men ification, the one that I typically uses a unifier dot org's. And if you do want to try, you can select some of the code JavaScript code from the bakery and then bring it into the minute fire. And also you could, of course, use your own quotas well and see the difference. When it gets men ified, it gets really compressed. They're removing at a lot of the white space that was on the page, and there are also content delivery networks, and these are excellent ways to bring J. Coury into your projects. Eso This provides more speed for the library's. So the idea is with a content delivery network and the ones I typically uses the one out Google. There's also once here on the J. Coury site. It will give you some listings for some of the CD ends that you can use, and they allow you to share the file. So when a website or Web visitor goes to a website and loads the file, then that gets cash within their browser. So when they come to your website, if you're using the same file located at the same location than it doesn't have to download the file, so hence making it a lot quicker. They've got some listings here for Microsoft Google in different delivery networks for the Cdn for the hosted libraries and within the Google One, there's a ton of different libraries here, and for J. Coury, there are three so I would suggest using the latest one. Unless you do need some more backwards compatibility for older browsers than you could look at using some of the previous versions. So I typically will just use the latest version, which is the 3.5 version, and copy the script link. And as you can see, the sources just linking up to a Js file. So just as we do with regular Js files so you can copy the link and selecting on that I'm just pressing coffee, and then I'm gonna go into my editor. And just as I would adding in any other javascript file, I can do it with the script tag and then specify the source. And in this case, I'm gonna link to my app gs file. And this is just a blank file that I've created and the same way that I linked to the Apogee s file in my local directory. I'm linking to the Google J. Corey file and you could also take this link if you want and open it up in the browser and you're going to see that it's the same men ified J coury code that we're looking out from the J. Coury website. So just a copy of the scene file that you can use and preferably for speed loading time. Look at using the CD ends as well as the men ified versions of the files. And so I'm going to just remove it, and I'll show you a quick way that you can check within the consul to see if a website does have J. Corey. So if you do the dollar sign and ah, rounded black, it's empty. Or if you just type in G Query and you get nothing being returned back, that means that the J Coury Library is not loaded. But if you go to a website over at j coury dot com, obviously they do have a query running, so you type in a query and it will return something back because that means that the library is connected. Let's go over to Microsoft and will try out Microsoft. So Microsoft as well does have J query running, and that's a quick way to be able to tell if G query is there. So let's add the library back into our page, and we're gonna be ready to move on to the next lesson. Do a quick refresh and check to see if R. J. Coury library is up and running. And in fact, it is. So go over to J coury dot com or one of the Cdn hosts. Select the Ikaria Library and bring it into your project to Newbury. Move onto the next lesson. We're going to start typing some jiggery coat. 3. 2 Why use jQuery: There are several reasons why people will tell you that they like using J coury. So one is browser compatibility. The other one is just really easy. Domina Population and event handling. I'll give you some examples of in this lesson how we make selection of elements within J query and how it relates to JavaScript. I got to use this seem index file that we were working with earlier, and I do have bakery installed. So if I do the dollar sign and the round brackets, I get returned back J. Corey selection. So in order to select an element from the page, we can do the selection in the same way that we're used to with CSS. So if you want to select the H one tag, we can select the dollar sign and then indicate what we want to select so that each one and what that will do is that's gonna return back on object, and we've got it within Honore format. And the reason that it's within an array format is that there's an option. So it uses something similar to what we know with query, selector all what select all of the relevant elements on the page and will return it back within and re format. So once you have selected the item that you want to manipulate, and this is one of the other reasons that people like G Query is that the making the selection, you can apply it to all of the matching elements on the page. So if we were to select list item, which we've got several of them on the page, we returned back all of the matching list items and with JavaScript. If we want to apply styling to all of the list items, then we'd have to loop through all of them and apply styling individually. But with Jake worry, it's already built in that it selects all of the matching elements into an object that you can either illiterate through or you can select an apply properties to all of the matching elements. So if we want to update the stash sheet, and if you want to add the color of blue so making the thought color blue to all the list items, we can really easily do that. And then when we select within the elements, they've all got the style property that supplied to them. So all of the matching elements get the style property applied to them without having toe loop through them. So it saves us a bit of time over JavaScript. So let's go back into the editor and we're gonna check it. More of what we can do with the selection process and the selection process is actually exactly as you would expect with CSS. So if want to select only the list items that were within the element with a class of mean that we could use the same format that we do with styling and let's select thes and turn them red. And then we're going to do the exact same thing with Jake Rate. So when we refresh and I do need to add the style sheet to the page, so let's link specify the location of the fat style sheet. So this one is just called style CSS snow and I refresh it. All of these elements now have the red color being applied to it with styling. So it's also do the exact same thing with G Query, where we're gonna select the selector and go into G query and using the dollar site to indicate that this is gonna be G query and the rounded brackets where we can specify the selector were selecting element with the class of Maine on all of the list items that are contained within their and we can apply the styling. So CSS is the method for applying styling with G Koury, and we can apply the color of green to all of the list items within mean So it's refresh. And the reason that the green over wrote the styling is that we know with the way that applying classes work if we're playing it and plank styling, if we're playing it directly to the element itself. Within the style attributes, which is what we're doing with G Cree, it's going to take precedence over any of the CSS that was set. So this way, with Jake weary, you could make a selection update the color all within one line of cord, whereas with javascript it would have taken a little bit longer. So let me show you the javascript equivalent, and you can also pause the video here and right at the JavaScript equivalent to this G Cree statement so that you can get a feel for what the differences between the two. And of course, I'll walk you through the solution coming up to apply Ah, color of green to all of the main list items, we need to first select the list items. So let's select all of the values that we need to work with and using the documents and query Selector and Corey Socked are all so that we can return back all of the matching values. And just like with G query weaken with crow selector, all we can make a selection with the CSS selector. So now that we've got all of the elements in the list, we can select that list and using for each. We need a way to illiterate through each one of the elements and then within the function, we need to specify what we want to do with the element. So we need to select the element, take the style property and apply a color, and in order to match with the decrease statement, we're gonna set it as green. Let's go back in and update it and then go into the source code and we see that all of them have been matched I would say that the MTA code that we had to write for the JavaScript, compared to what we had right for J Query is that J. Crew is a clear winner in this instance. So there's also with JavaScript. We can have an option to select the one element, so it is a little bit shorter if you're only selecting one of the matching elements. So using query selector all and let's say you only want to select the first list item in order to update the color, then you can do that as well, because you've got the object and then also style, and you can set the style color to whatever color that you want to set it to. So I just said it to purple. And, of course, then this statement is going over right that whereas with G query, there's a number of different methods in order to select the 1st 1 because this is always gonna be returning back a list. So even if there's only one matching item, it's still going to return back a list. Let's go back in here and I'm gonna select an element with an I D. So I was given an I d of first Save it and let's see what happens with Jake. Worry when we make a selection off that element. Block comments out the loop through and now with Jake Ory, we're making a selection off the element. So just as we would with CSS, we make a selection of the I D. And we use the hash in order to select the element with I D. So do you think that this is going to produce a list of items or is this guy's gonna select the one JavaScript we're selecting? We use quite a selector or we can use Cory selector all. So which statement do you think it's gonna be most like? And then the action that we want to apply to it. So I'm going to update the inner HTML in this case, and I'll just type in works. Jake worry. So it updated the content contained within the element. And if we use within the console and we make a selection of the element, it's still gonna be within an array format as J. Crew is always going to select all the elements within that same format. So the method with the selectors always gonna return back. So even if we're using the I D, it's still gonna be the same thing as using query selector all. And although we know that there's only one result or there should be only one with that matching I d, there's always a possibility that there are more returned with bakery, just as if we were using quarry selector all. So in this case, if we want to use the document selector and update the content that's contained within their, we could also keep it to just the one line and overwrite the content to see and then javascript. And in this way, even though Jaqui as well as significantly shorter, we can still keep it within one statement if we want. So go ahead and try it it and I'm gonna show you how it can handle events in the next lesson. And then we're gonna progress to more of the decrease syntax and get into detail as to what it does and how you can apply it within your coat. 4. 3 JavaScript vs jQuery: Hey, this lesson. We're going to continue to compare what we can do with J. Corey and JavaScript, and then we're gonna set out to update and run some J. Corey code and show you what the syntax can do and how to apply it to your coat. So, first of all, let's do another few examples. So let's say, for instance, you want it to select the first list item within the list and with equal in the last lesson , we saw that when we select the bakery object and we do a list item and you could also include the cloths of Maine to be more specific, it's going to return back all of the matching elements. And if we really want to select the 1st 1 there's a number of ways to do this. You can select it with an object, a re type format. So if you want to select the 1st 1 this is gonna be applying to the 1st 1 and see this as well within the console, where when we return back the 1st 1 it's going to relate to click Me. So just as we would update index values within the array we can select those elements on the page, and also we can apply the styling if we wanted to as well to that. And I don't always suggest that you mix and match with what you could do with the JavaScript objects and the G Koury objects. So notice how, Then, when we selected the item from the index and selected the 1st 1 that was matching, were able to return it back. But it's pointing to the memory location within the dog object. And that's why if you wanted to use it, as with we do with JavaScript, it's still gonna be pointing to that same object location so we can use JavaScript at this point, and it's gonna break out of the options that we have with the G Koury methods. So if you want to update the color, you're gonna find that the bakery method doesn't work. So let's try it with the JavaScript. So we selected as a JavaScript object. And now if we treat it just as object in JavaScript, when we selected from the Dom, we can apply the JavaScript properties that actually will work. So we've selected that, and we've identified pointed it to the same object within the DOM, and we're able to make an update to it if we want to apply the styling methods to the elements. We do have AH method in order to make a selection off the particular item, using its index value method and specifying the index off the element that we want to select. And then we also have the option to apply the color value that we weren't able to apply before. I'll update it to read so that we can see the difference on the page. And this time we were able to apply the method because it's still a J. Coury objects. So if you are using G query, make sure that you are using all of the J. Corey methods and you're not breaking out, because if you break out of it, this is just gonna be pointing the same dog location, and therefore you can use the regular JavaScript on it. But again, I don't suggest, and I do suggest that if you do stay with Jake, worry that you stick with the Jaqui methods and keep them as Jake or objects, so you can apply them. So I do have something that we're gonna show you with Bakery and how easy it is to add event listeners such as click events. And then I'm also gonna ask you to apply it and wait at the JavaScript code That's gonna correspond with it. So if you want to add a click event to each one of the list items on the page with Jake weary, that's gonna be super easy. So we select we use the selector in order to select the set of elements that we want to apply the property to and then using the Jaqui methods. They do have a click method. So what this does is this gonna add the click event to that object? So selecting it and having a click event to it and we have an option within the J. Coury to run the click event function. So what do we want to happen when it gets clicked? And within J. Cory as well? We have an option where we can hide different elements on the page and we can also show them so you can do this, Really? You see, with Jay Curry. So we're selecting the elements with the H one tag and applying Ah, method called toggle. And I'm gonna go through these methods in more detail in the upcoming lessons. So this was just for demonstration purposes as to what we can do with the with G quarry so that we can update this. Now, when we refresh, if I click any one of the list items, it's gonna update and update that element that we selected. So now it's up to you. I know this is Ajay kori course, but I want you to pause the video right out in javascript and walking through the solution . So once again, we could do a comparison of what the G Cory is doing compared to what the JavaScript is doing. And then we'll get into the decrease in tax. So in order to do all of this that we just did with Jay Query within relatively just a few lines of code with Jake Worry, and now we're gonna do it with javascript. So first we want to select all of the list items, so I'm gonna select it within an object called vowels and then using the documents and quick selector, all selecting all of the matching elements. So all the ones that have a tag of list items and then taking vows. We want to add the event listener off, Click to it. So let's we need to loop through them in order to add the event listener. Because if we just do ad event listener, what's gonna happen here is that yeah, we can add an event listener, but it's not gonna add it to all of the matching elements. Let me show you what I mean. And as I'm typing this, do you think this is gonna work? What do you think is gonna happen? And I'm gonna update this to be hte too. So it's not interfering with what we did earlier. So and this is also really easy to make the updates to those elements. So we're adding an event listener, two vowels and whenever it gets clicked. Well, Consul, log the click event. So what do you think is gonna happen here? We know that we're selecting a list of items, and here we're trying to add an event listener to the list of items. So doing it kind of the same thing that we see with J. Corey, Do you think this is gonna work, we're gonna throw some errors. And if you said we're gonna throw some errors, you're correct because we can't add an event listener on this list. So this is if we output vowels, it's gonna be a North list. We've got a whole list of items there and we can't add that event listener on that whole list. So that means that we need to loop through them. We need to reiterate through them in order to add event listeners. So it's going to get a little bit more complicated. And just as we saw in the previous lesson, if one ad event listener, we have to do the for each statement in order to reiterate through each one of the elements . And then once we've got the element as an object, then that's where we've got the option to add the event listener. If we go through them, we can add the event listener to the individual elements. And this is the way that we have to do it in order to select the element first and then each individual element, we can apply the event listener because the vet list there can only be applied with JavaScript on that one element object. So now when we refresh now, we've been able to add the vet listener on each one, but we're still missing this toggle function. So that's the next thing that we need to do is order to select the element that we want to toggle. So let's select it, and I'll just call it H one and then using the document query selector, selecting the H one element from the page. And now, whenever it gets clicked, what we want to do is toggle it. So how do we toggle it with JavaScript? Well, first, we need to check to see what the value of the style display value is. So when we go into here and I'm clicking, I'm clicking the H two. I see that each one gets the style display, none being applied to it. So I need to match that with JavaScript and toggle that style property. So let's now check to see if each one and get the style display and check to see if style display is equal to none. And if it is equal to none that we want to update it, and we want to set up to in line, and if it's not equal to none, that we do want to set it to none, so that will allow us to changed the display property. And actually, this should be block inland, and then otherwise, we're going to set it to none. So let's try it and refresh. And now when I click these, I'm getting the exact same effect that I was with J. Query. But it's a whole lot more lines a coat. So again it looks like Jaqui, in this instance is going to be a clear winner and also a lot of reasons for using jaquilla . A lot of developers like using geek worry because of its familiarity. If you're familiar with CSS and HTML, you can relatively easily jump into J. Cree. And the methods are named in a way that it just makes sense as to what's gonna happen and you can apply making the selection of the element and then the action that you want apply to that element is contained within the methods. So coming up next, we're gonna be walking through all of the syntax that you can use with J. Corey 5. 4 Document Ready and DOM onload: in this lesson, We're gonna be looking at the dawn, content loaded. So we know what the JavaScript code. You can place the script tags wherever you need to, so sometimes you'll see them placed within the head off the page. And then also, sometimes you're going to see them, and my personal preference is to place the near the end. So if we take our JavaScript code and we place it too, the top of the page within the head section of the HTML and then go into the JavaScript and we try to make a selection of an element, so we'll select the each one the element with each one tag and we'll update the inner HTML , we refresh. And if we refresh again, we're not going to see anything happen. There's no change. So if I was to take this code and if I was directly tried to place it in the each one content updated, it does actually update the court. So when I refresh it, nothing happens. But if I type it directly within the console, then it does update the HTML element. So what's going on here? So, going into the code, this is the order that the JavaScript is running, So first it comes in. It loads the head section it Lohse J coury file and then loads the JavaScript file, and it immediately runs the cold within the JavaScript file. And because there is no one each, each one element on the page yet, it has nothing to update. So it looks for this, and if it doesn't find, it just continues to load the rest of the peach. And that's why that's not working. And there are ways to keep your dom content in the head. And that's where you could use the document ready. So making sure that the DOM content has loaded before you try to access it. And there is some commonly used J coury code that does make sure that the element is ready before we try to use it So we can have insert the document objects of the dawn and check to see if it's ready, applying the ready method to it. This method where we're selecting the document object and then we run the ready function, the ready method checks to see that the selection has loaded before we try to run the block a coat, and now if I refresh it, it actually runs the code, and it waits for the document Object to be ready and loaded. So you can also see that when you log it out in the console. So if I was to do a console log that says ready, then that means that the Dom content has loaded and were ready to run the code that's between the blocker court. So you can also see when you console log out the each one object that you're not going to see anything being returned back. But if you cancel, log it when the document object is ready, you are going to see it, and you're gonna be ableto ready to interact with it. So the first time it doesn't find any objects that are matching the selection. Because, of course, the Dom hasn't finished loaded all the html and then the second time. So this is the second instance we do get returned back, that first element object, and we have a length of one cause one item was found that matches the criteria. So you might also see it written this week, where we've got the function and I'll copy the console message for the H one in this so that one worked as well were able to retrieve back on element. And then there's also the JavaScript to Cleveland as well. To this, where we can select the document object at an event listener and event listener is gonna be dawn content loaded function that we want to run whenever the dawn content is loaded and all of these statements will do the same thing. They make sure that the document object has loaded and it's ready to be interacted with. So let's go out to the peach, will run the code and see that all of this all of these will automatically load as the pages ready to be interacted with now, also, depending on how you like to write and how you like to structure your code and where you like to include your JavaScript. So personally, I like to include it just before the end of the body, so that gives an opportunity for the Dom content toe load. But of course, there might be cases that you do need it to load before the dawn. Content loads. So that's up to you. However, you're writing the code, just make sure that before you try to interact with the elements that they are loaded and there are ready to go, so these methods will help you and allow you to 6. 5 Common jQuery Methods: So this lesson we're exploring some of the common methods in Jake worry that you might be using so weary saw toggle. We're gonna look at toggle Hide show and as well, we are gonna be showing how you can update some of the text content that's contained within the elements. So opening up the editor, let's select the element that we want to make the update on some selecting the h two. And if I want to update that HTML, I can indicate that I want to update the HTML with HTML method, and this allows us to write html code. So I'm gonna update the content to say Click me and then afterwards we're going to make the element clickable. And then afterwards we're gonna make the element clickable. So now it will say Click me So refresh and let's make it clickable. So against make the selection So format is the same where we first week make the selection of the elements or elements that we want to use and applying the click and then what we want to happen, whatever it does get clicked and we could update the property of the element or the each one, or we could make a selection of another element. So in this case, if we select h one can update the style display property with toggle. So when we refresh and we click it, what was happening here is that this is adding into the style property of the element that matched the selection of each one, and it's hiding and showing it. So if we were to select all of the list items, if we're to do list one, it would hide and show. So again it applies the properties to all of the matching elements that it finds on the page. There is a whole bunch that we're list items. Let's also show you another weight that you can update some text content. So for the each one, so for the h one will use the text method and a copy and paste the exact same string value that we have within the HTML. And obviously this is not gonna have put it as HTML. It's gonna output as text content within the element content. So whereas this one actually added it as html. So this was just a regular string that was added to that element content. We can also select the element that we want to interact with, and I'll select all of the list items and we'll do a show off the list items. And how about we become more specifics will select all of the list items with the class of Maine. So now it's gonna show all of the list items with a class of Maine and also for the each one. We won't apply a click event to it where we're just gonna hide. All of the list items were Just do a big height of all of the list items, so it doesn't matter what properties currently applied to them. It will just hide them and selecting the elements with a class of Maine and all of the list items that are associated with it. So let's see what happens. So what do you think is gonna happen when I click the H two? It hides the list items, but it's also toggle ing them. So what it's effectively doing is it's updating the elements that are within the main area , but it's toddling, so first it's hiding, and then it's showing and essentially canceling each other out. That's why we're not getting any effect there. So if I click the H one tag, what it did is it hid all of the elements with a class of Maine. So now if I click the click one, it's gonna just update the style property. So it's gonna toggle those rep toggle does is it switches it from either block or none. And what showed us is it forces it to be block. And what in Hyde forces it to be display none and refresh. So now if I click this, it automatically toggles thumb. But the each one will set the display none to the elements that only contained within the div off class of Maine. So when I toggle and if I click the each one, it's only applying to these elements the display property of none these air commonly used and really easy ways to hide and show elements. Updating the display property off those elements. And you probably also wondering Well, what happens if I've got the styling and ever already selecting the display of none to all of the list items. So what do you think is gonna happen here to the list item? So we refresh it. The default is that they're all hidden, so that's within the styling. But now when I click it, we're gonna diss toggle the display block. And the reason that they are showing even though the styles are still applied to those elements is that these air being updated directly on the attributes level off the element itself. And that's all done with Jake Weary. So try a lute and get comfortable with hide and show and toggle, and I'll show you some more really cool things. You could do it. G query coming up. 7. 6 This and Arrows: in JavaScript. Whenever we've got event handlers, we do need to sometimes reference the element that that indicated the event that fired off the event. So Aggie query. We can do that as well. It's so using this as the object. So it's make a selection of the list items, and then on the click method, we're going to invoke ah, function, whatever. That element gets clicked. So we did that before in the last lesson, using the newer format for JavaScript with the Fat Darrell method. And if I Consul Log Eights. And if I do the event target, so pass in an event object I can refresh, and I can see that event object showing up there if we want a reference. The current, this element that got clicked with JavaScript, we could just type in this and see that it works. That references the element. But with the J. Corey object, it's slightly different because it's not picking up anything. And the reason is that we're using a format that we're using the your format for ES six so it doesn't work quite yet with G quarry, so we have to reference it with the function and Then when we refresh, we returned back the associative element. And if one I would turn back the associative element into a JavaScript object or Ajay Kori object, then we can use the bakery, this object in order to wrap the element. And these are all going to be referring to the same thing and just as we saw before, where we've got the list items directly from the dorm. So this is referencing the memory location. But when we wrap it with the dollar sign and the rounded brackets and reference this, it's going to refer to the element that invoked the current function. And it's going to keep it within the G query methods, allowing you to apply additional Jaqui methods to it as well. So we see that the similar structure where we made the selection of the elements and once we've got the element within Ajay Kori object, then we can interact with it with the various G Koury methods. So there is a difference. My suggestion is that if you are creating a function and that you want toe access, the element that triggered that function than use the Jaqui method of this and that will allow you to continue to manipulate the object. So now, if you wanted to, you could update the CSS. So let's update the color and we'll update it to be read. So refresh. And now everyone that I click, it's updating the color to be read to try and it and coming up next, we'll do a little bit more with element manipulation and John and Jake weary. 8. 7 Prepend and Append: Hey, this. Listen, we're gonna be building on what we did in the last lesson. We were able to select the element that caught clicked, and we're gonna be a pending and pre pending, some content to that element. So we're going to use the same function format that we did before where we've got all of the list items we've made them clickable, you can keep in the turning them red and now within the selected element that triggered the event. Let's also add in using before. So this is gonna insert content before the specific specified element content. So before and then we need to add in what we want to insert before So the before method will add content before also gonna add in counter so a global variable or just call it counter. I'll set it to zero. So every time a list item is clicked that we're gonna increment counter by one and then we can use the value of counter. So I'm going to use the template liberals and use the value of counter and insert it before Let's see what happens. Refresh and we clear the consul. So whenever we click it, we see now the element has content of before inserted and before the element that was clicked so before it was selected. So we selected this one and we could see by the style that was added to it. And now we've got before one and then we went and we click this one and we got before, too. So now whenever we click them, we're gonna continues to get element content added in before them. So you can click a whole bunch of them and will continuously add in even more content in before. So there's other things that you could do is well, you can add it after. And there's also happened and pre penned, which is slightly different than before and after. So let me show you with the differences. So first, let's do after. So whatever it gets clicked, it's gonna add in content afterwards, and also we're gonna be doing the pre pent. So let's update this to pretend, and I love do this to say, pre pent, and then they also there's a pen that we want to look at. So even though it does sound very similar to you before and after, there is a slight difference. So what you think the difference is when it outputs onto the page? So it's do a refresh and we'll click number five and then we'll take a closer look at what happened within the HTML. So we got the before and we got the after I did added in there. So this was added after the element, and this was added before the element that was selected. But with inside of the element within the text content pre penned was added before that, content and app end was added afterwards. So what do you think is gonna happen? Was the content going to go for the second click? So for the second click, it's again added just outside of the mean list item element that was selected. So we get before added in before. But it's after the original one because it's based on the element that was selected. So that's why, after as well is after two and then after one comes after that, because that was already there in place, and that doesn't actually matter if it's there or not. The element function and the method is the same. What's going to wrap around the element with the after the before, depending out was click also looking inside of the element. The order is slightly different because we're looking at the content that is contained within the element. So if we use upend, it happens content. It adds it just before that end of the list item. So it takes all of the existing content, which includes any content that we've already prepared in an upended, and it adds it in afterwards and then pre penned does the same. So now, if I click the list item content, these will continuously go from the 1st 1 out, whereas the before and afters go from that 1st 1 in, so continuously grows larger. So it's an interesting to note that as there is a difference between the before and after and up and and pre penned, so depending on what you want toe happen and where you want to insert the code, you've got a number of options here. So do try it suits and check out the differences between these methods. They could be ready to be want to the next lesson 9. 8 Advanced insertAfter and Before: the last I said we saw pre pending an app ending this lesson is gonna be a little bit different where we're gonna append to a selection. So select the element and we're gonna be adding in the click function to that element. And whenever it gets clicked, we'll make a selection of an element that is gonna have the content appended to. And let's also add a counter so that we can track every time. Ah, click event happens. So every time the each one is clicked, we're gonna increments counter by one. And now we need to specify what we want to insert. So let's go ahead and insert a paragraph. And first we'll just do a paragraph with the word test and then we're gonna implement the counter into that as well. So now we need to also a specify where were pending, too. So a pending, too, and the target that we want a pen to have what we appended to the list items because we have quite a few that was on the page. Now when we click the H one, we append to the content off the list item we add in and we've got upended the test value so that lets convert this into the template liberals and will also update this to hold whatever the value of counter is so CNT value. And let's see what happens. So now, as I click it, I'm adding in more of thes paragraphs into the page. And let's update this to upend, too. And then we're also added the pre pens, so selecting and doing a pre penned. So just as we saw in the last lesson, it's gonna be the same idea. So we're selecting pre penned to which is gonna insert at the beginning of the target and the list. One is the target, so refresh and let's take a look. So we've got the pre penned in the front and happened afterwards, and as I add them, it's still gonna add around the content off the target element. It would also do the insert before an insert after, so this is insert, and this is insert after. Or maybe I should just right before and after and then the method for this is insert before and will select the list ones, and this method is insert after and also select the list items, so refresh. And then when we click it, we can take a closer look at what's happened with the code. So it selected the target. So all of the list ones were targeted on the page. They're part of the selection, and each one of them will get before after. And it will get pre penned ID from the content and appended to whatever the existing content is. So the more I click it, the more of these it's gonna add and is gonna add it before the list one. So the last one is out of just before the target and then inside of the target, whatever the content is at the time, it's gonna add it to before the target or a pendant to after the target tried it. 10. 9 jQuery Attributes: Hey, this. Listen, we're gonna be looking at attributes, so let's create some classes within the style sheet that we can use, and we can update within the HTML code. So setting up background off blue. And also let's update the color to be white for the font color, and we'll do another one where we're gonna do the background color of red. So give it a name of red for the class and we can keep the color to white. So going into the JavaScript code, let's select the element, and we're gonna apply a class to it. So you have an option to add classes and remove classes to it. So selecting all of the list items and whenever they get clicked, then we wanna run a function to that element, and we want to apply something to it. So whatever the element is that triggered it, we can use this and add a class. So setting a class and the class that we're gonna add is red. So it's refresh and adding the class of red. And just as we can set classes, we can also remove classes. So let's make a selection of list items and we cannot read to all of them, and we can also remove the class of red. So that's Ah, remove class of red, and that will remove it from all of the elements. And then, of course, because we've got the click event, were ableto add them, and then we can remove them if we need to as well. So it's had that option into the geek Worry. If you click that each one, it will remove the class of red from all of the list items. So you composite video here and odd dot functionality and and I'll walk you through the solution. So first, let's make a selection of the element that we want to add The event to and adding in a function could pass in the event objective for what and let's select the elements the list items. So selecting all of the list items and remove class, and we can select the class that we want to remove so we'll remove the class of red, so it's try it and refresh, so we'll add some by clicking, and then we'll remove the class of red simply by clicking the H one so you can add removed , and there is also a toggle option floats to toggle the class of a red. So now the first time I click it, it's gonna go red. And if I unclip kit, this is going to go back to the default and opening up where we've got HTML, we can see it adds, and removes it depending on what the status of the state of it is currently. So if it's available within the element than it will toggle and it will return back. So let's also toggle the class of blue. And we can also clear out all of the blues as well, by clicking the H two. So add that in as an option, and that will clear all of the blue values. There's also on option with where you can chain various methods together. So if we wanted to update the html of the H one and we can change together and also have the click event in there, and also if we want to do for the H two and we could also do just the text, so remove balloon And now let's see what happens. So this one to remove read that one is to remove blue and because we're adding both, that's why only the red is showing. If you look at the HTML code and Inspector, you do see that the red and the blue are changing and they're being toggled and we see it's adding the red and the blue. Having ability to chain it together also save shoe space, having to access the element. If you've already made the selection, you can apply multiple methods to it really easily. 11. 10 Create an Element jQuery: Hey this. Listen, we're gonna be looking at creating elements on the Peach, so let's do that with a click of each one and we'll update the HTML, and I'll just put meek element within the H to melt. And then let's add the click method. So whenever it gets clicked, then whatever function we want to run, so creating the function with the vent object. And for now, we'll just output into the consul log that it was clicked. So we see something happening and the need to update this. Let's save and see what happens. So make an element whenever it gets click log to the consul. So what we want to actually happen is we want to add and create elements on the fly using G query. So we do have a few options and, as we've seen already, that we can upend content so we can upend on element to the page, so selecting the element that we want to upend too. So it's Ah, look through the elements that we have on the page if one of upend it to the H two. Let's do that. So select the H two from the page and then using append, we can specify and we concretely html oven element that we want to upend. So going to use the back ticks created paragraph and I just call it a new one. So save that and refresh. So it's creating a bunch of these new elements on the peach whenever we're clicking to it s So what happens if you want to make an update to it or if you want to reference it again, eso does make it a little bit difficult. Eso There are some options where you can create value for it, so it's create variable value for it. And this is an objects we can use, Const. And this would be the first element that we're going to create and created as on Jake or object that's were used, the dollar sign in the rounded brackets and I'll take the content from there. And I'm also gonna add the click encounter and set that to zero. So every time it gets clicked, will increment count plus one and then within here will add in the value of count. So what happens if I take the and a pendant to the list item? So if I do vow one, which is the object that we've created to the J Coury object that we've created. And now we're pending it toe list one. But we're only referencing. One object is going to create a bunch of them. What is gonna happen here? And it does create a whole bunch of different elements on the page, and they're all being output there. So it creates a bunch of these paragraph elements because that's what the HTML code that's associated with in that element object eso What happens if you wanted to add a class? So it's a class, And because this is a J. Craig object, we do have an option to upend methods to it. Eso Now let's see what happens. So that added a bunch of the elements with a class of read to it. And so what also happens if we make it clickable eso? Let's try, that's instead of adding a class of red, let's add the click function to this element, and if it gets clicked, then we're gonna select the active elements and use the toggle class, and we'll talk about the class of red to that element. So now let's see what happens. So now that they're all active, they can be clicked and they can be toggled and untucked. Hold the values. That is the way that if you want to add elements, you can also create a bunch of them and upend a bunch of them seeking comma separate them s Let's create a few other ones and Const. Val to and select create a another elements. And this one can be a span. I'll put whatever the value of count is and a lot of class of blue to that element. So if you ought to upend several of them, we have that option. This will and so that one still has the click functionality. So what happens if we select an existing elements object and we upended? So let's I use the dollar sign and we're gonna penned the H two. So whatever element has an H two independent to the list item, so do you think is gonna happen here? Eso going back and looks like what happened is it duplicated the h two. So because it took that content from the element and it duplicated it so created copies of it all the way down. So originally, the H two was just sitting over here. But what it did is it moved it. And because there's multiple list items, it create a bunch of copies of it. So now we've got a bunch of elements that have the H two. So that's something different than what you might have expected with the JavaScript objects . Because, remember, with the JavaScript objects, it's referencing a particular point within the dom. So his reference in that same element object, whereas here it's you treating it as a J coury object, and they work slightly differently. 12. 11 Get Values jQuery: Hey, this lesson we're gonna be showing you how you can get the values of the elements who want to click on the list items and output the value in the console. So let's select the element that we wanted interact with. So it's all the list items, and on the click event we're gonna fire off the function and then within the function, we want to log the content off the list item. So let's take the content off the list item and log it into the console. So how do we do that? We need to use this. And then just as we're setting HTML, if we just use it blank with nothing in the argument, let's see what happens. So Dio refresh, and that actually is going to return back the value. And this is the same thing if we do with text as well. So it's going to return back whatever the value that is contained within their, and we also have an input field. So what if we want to get the value that's contained within the input field? So what if I've got a value in the input field and I want to retrieve that value back. So let's try that and select the H one and we'll update the text value of it, get input. And then whenever it gets clicked, they were gonna do something with the value that's sitting within the input field. So only really have the one input field. It's got a name of first so we can make the selection. And just as we do with styling, if we want to selective, we want to be specific. If, for instance, we had multiple input fields, we have different names for them. We can select them within that styling. So if we specify that, we've got an input and the name is first and let's apply some properties to that apply property of green to it. So the same way that we select that input within styling, we could do the same thing with Jake, or so selecting that element. And now let's get the value that's contained within that elements. And if you are using double quotes, make sure that you're not wrapping it with double courts, and in order to get the value, it's V a l. So it's going to turn back the value if you log out the HTML of it. I see what's gonna happen. So let's refresh and put some content in there. And now let's click the input and get the input. So we're not returning back anything for the HTML of that element. So its value that we need to be looking at and this is the way to return the value from the input. And this is also the way that you can set the value of the input. So just as we saw it with the HTML, you can set values this week as well. So let's refresh. Put a value in there, click it and see our value got updated as well as original value that was in there, got out, put into the consul. So try and it could an input and get the value and set the value. If within the input 13. 12 Remove and Empty: with J. Crew, it's easy to remove existing elements, so I'm gonna show you how we can do that and how we can set that. So let's make a selection of the list items and also at the click event. So whenever it gets clicked, what we want to do is remove that existing element so going through and adding in the option when it's clicked. And using this in order to select the current object. We've got a method that just is called remove, and what this will do is this will remove individual elements on the page. So if you go back into your HTML, you see that those one said I've already clicked have been removed back, so they're simply just removed. It's selected the dawn object and removed that particular element from the page. So what remove does is it removes the selected element. What empty does is it removes the child elements of the selected element. So let's update this and update this to be empty and see what happens. So it's refresh, and when I do empty and I go into the HTML, what's happened is it's just emptied at the content of the element, so we don't see anything there anymore. And that's the difference between remove and empty where you can empty it out. So if you have a parent that you want to empty out all of maybe all of the list items, you can do that really easily where you could select the an ordered list. So the main under word list and we can empty them all out. And what that will do is that's going to remove out all of the list items that it currently within that a nor did list. So coming up next, I'm gonna have a challenge for you putting all of this stuff together. So it's coming up in the next lesson. So do try out, remove and the empty and get a good feel for it. See, ready for the next lesson. 14. 13 Coding Challenge List Maker: this lesson. I've got a challenge for you and we're gonna be doing all the updates to the HTML that we've been working with earlier and update them all using J query and then create a list. So the list is gonna incorporate all of the current list items under the main class. We're going to remove out the other one ordered list. We're going to remove it, other input, and we're gonna add in, Ah, button. And the button is going to give us the option to add items to the list item and then also on top of that to the list items and including the existing list items. We're gonna add an X that's going to allow the user to delete that current list item here. This is an example of what we're going to be building in this lesson. So when we refresh the page, we see that the J. Corey code cleans up our excess HTML code and streamlines it and also creates the input with an ad button. Whatever we click the add button that we're updating and adding content to the UN ordered list. And the content is structured the same way that the other list items air structured so in. Wherever we select the element with the class of red, we can remove those items from the page. Now, do keep in mind that there are several different options and in the upcoming lesson as well , we're gonna be reviewing some of this code, and I'm gonna be doing some more explanation about how the code is working. S o give it a shot, tried it and build it eight and will walk you through one solution. How you can accomplish this, and then we're gonna find, tune and tweak the code in the upcoming lesson. So positivity here, give it a shot. So in order to do this, first of all, let's clean up our HTML. So we want to remove the second a nordeste, and we do have two of them on top of within the page. So let's make a selection of the UN ordered lists, and we're going to remove the 2nd 1 on the page. And we know that we've only got the two. So there's a number of ways that we can select the UN ordered list, and we did see in earlier where we can use the e que and that allowed us to select the element, and we can simply just do a remove of it. So let's see what happens on the page. Now it's gone. There it was. Now it's gone. We also need to remove at that second input field. So let's update that one as well, where we've got the inputs and input with an e que off one and let's remove it that second input field. So now we just got the one main input field. And the reason the E Q is one and not two is because it's zero based. Also, we're going to remove it that each to because we don't need that one. So let's remove that one from the page. So it's a lot easier if you just clean up the HTML. But we of course we do. On a practice G. Corey Sorgen. I just remove it that h two. And of course, if your source code is different than this, that you'd have to update and clean it up with your own J. Corey customized decree. So the next part of the objective was in order to add, so add ah button that's a clickable button to the peach. So let's create that one. And we're gonna create a button using value off button and let's go ahead and we're gonna create our button object. So adding in the HTML and I just have odd to the button, and if the button is clicked, then we're gonna have a function, and we're actually gonna run function that's called Add New. And now let's create the function just as we would with JavaScript and we'll consul log the contents of input with a name of first. And I know we only just have the one input there, and we want toe return back any value that's currently in there. And also, let's ah, select that element and we'll update the value as we load the page as well. So let's set a value so we don't have to always go in and type it in. So let's see what happens now. So refresh and I didn't add the button to the peach, so it's not showing up quite yet, but we were able to remove it, so we need to also add the button to the peach. So looking within the HTML, where do we want to add the button? We want to add it after the input, so we're creating the button afterwards. But let's move the creation of the button first so that we can change together and add after the input the button object and for the button object as well. Let's add a class, and the class that we're going to be adding is well out of class of red. So be nice red button. And also, let's ah, console, log it and see what we've got for the button object. So we got's. We see that the button has been added to the end of the input. You can also see that within the code. So just after the input, we've got our button added. When we click the button, we fire off the event in the console and we're out putting whatever value is contained within the input. That's what's being presented there. Also, if we go in and because we're referencing it within the button, what happens that So this is a little bit of a trick question. What happens if I do button or before button? So am I gonna create another button object or a mike and I just simply move this one over to before. So what do you think is gonna happen here? And if you said it's just gonna be moved before you're correct? So it's running off, and it's doing the same functionality where it's out putting the content in the console. So whatever values contained within vow, it's updating that content. And then here we're just adding to the button. Objects were just making that red addition that adding the red class of red to it. So now that we've got the functionality that we need, whatever we click to the button, we want to add to the UN ordered list. So we're gonna create an element with whatever content is contained within the string. So I just give it a value. So holding it as whatever the variable is at the time, whatever. We're looking at the input. So now we've got a variable toe work with string value, and we want toe select the A nor did List, and they're going to be specific on this. So the main a Norden list and then using append, we want to upend some content to the end of the list. So a new list item so we can add in some HTML to that so list item. And I'm going to use the back ticks for this so list item and then whatever the value that's contained within string and then close off the list item, and I think we're ready to try it. So let's refresh and we're adding in the new items to the end of the list. So now that's working. But we also need a way to remove the items on the list. So let's create some red clickable excess will give them that variable value of span, create them as G Koury objects. And then within here we'll create a Nevil Element that has span and add in a click event to it. And we'll just run a function called R E M. And we'll also add class to add the class of red because we've got those classes that we can add in there. So whenever it gets clicked, it's going to run the function R E M. And then within this function, for now, we'll just output whatever the object was that initiated the click and then we also need to go through the elect existing list items and using append will upend the span object. So that gives us all of these excesses. And now, whenever we click them, they're gonna be referencing whatever elements initiated the click. So also, let's append to this list item as well. So I would create the list item separately. And, of course, as a J coury object, we've got that content for the list item and then append to that list item the span object . And so when we try it, what happens here is because the span was just added to all of the list items, and then it was used were not able to continuously reference it, because then we're still referencing that last instance of it. So it's ah, One of the quirks about G query is that when you create it and if you use it, then you can create multiple instances of it. But after you've created it and after you used it, that object is still going to be referencing, whatever the last instance of it. Waas. So that's why it's moving down. So whenever we're creating new items within the list, that lost span is simply a pending in moving to that one, so actually taking it for from its current location and updating the location. So that's where we need to recreate it within the add new function and will create a separate span there that's gonna live within this scope. So now whenever we're adding the span, it will be just that new one that was just created. So it's our way to fix that. And now, going into the console, all of the exes are working properly. So with the ex itself, what we want to do within the remove is we want to remove out whatever the element is. So we do need to traverse to whatever the parent element is and select that one. So let's do a refresh. And so that's moving in and selecting the entire list item. So that's actually gonna be the element that we want to remove from the list when we do the remove. So once we've selected the element that we want to do the remove off, we can run that remove method in order to remove it from the page. So now we've got a fully dynamic list, and if we select the elements we can remove the list item elements, so that also includes the ones that were created by default and also the ones that we can create with the input field. And they're awfully functional. So that was how you can use Jake Ray in order to construct this custom list maker. 15. 14 Code Explained jQuery: Hey, this lesson is on creating dynamic clicks, so on elements that we don't currently have on the peach. So if we were to remove the option for click and if we were to select all of the list items that have, ah, span with a class of red and apply click event to those. So right now we're selecting all of the spans with a class of red, and adding a click event to it in that event is going to be R E m. So let's try it and see what happens. So let's add some Lawrence's there, and when we click the initial ones that were on the page, it works. But the ones that we have that we created dynamically, it's not working anymore. And that's because of the time when it got created that so when we did the check to see within the Dom, we saw whatever the current list items with a span of red were, and at that point we registered event listeners on all of them. But since then we've added some new ones. Now this is a common problem that users encounter when they're writing J coury code, and they want to register the event, but they've already created, and now they're dynamically creating some elements. And they want that event to still be registered to those new elements. So there is another option. So instead of going on the click event weaken due on the event itself So we register the event listener on the parent. So in this case, on the UN ordered list and we use on and what on does is allows us to attach an event handler for one or more events to selected elements. So registering it on the parent, we allows us to select the elements that are contained within, and because the event listener is gonna be registered on the an ordered list whenever the an ordered list gets clicked, it's gonna check to see if the list item notches this particular value. And down here, when we're adding new, we're adding to the UN ordered list. So that's why this is still going to work. So let's remove that part of it and specify the event object that we're doing and we're listening for a click and then the specific elements that the selector that we're using and that's gonna be the span of red for the list items. And then the function that we want Teoh get invoked whenever it gets clicked is gonna be the R e m. So now when I add the new ones, they still get that same functionality. And this is all coming from the class within the element. That's another way to do that. And it actually simplifies the code as well, where we're updating the page content. And then we're registering the event listeners. And we don't have to worry about any other type of event listeners where we've got the content directly within when we're adding new, so that is automatically registering those and makes it a little bit easier to handle. So there's also the option when we're a pending. So in were pending the span. We're adding a class of red, so we know that we can also do class of red in here and remove it. Add class of red and this is gonna be the same thing. We're out putting us as a value, and we could even take this one step further where, instead of adding a class of red, we just keep this as regular HTML and one we're constructing. The list item we can win off depended at that point, and we can just simply add in the span as a variable object so that, as well, gives us another option to clean up the code. Also looking still, how we're a pending it. So this way it simplifies the pending process and were simply a pending it to the list item . So let's try that and see how that works. So everything is still working intact. No problems. It will keep this one intact, the removed intact. So do try it for yourself in at In the event listener on the parent and then also the selection within the on method in J query. 16. 15 Images Attributes jQuery: Hey, this. Listen, we're going to be looking at image attributes as well as input fields, specifically looking at the check box in order to be able detect if it's been checked. So I've added some more HTML where I've got an input. I've got a div that I've added that we cannot put some content to, and then also an image with a new image source using the dummy image dot com. So when we refresh it, we've got some more code there to work with and select using the J. Craig So going into the APS Js file. So this is linked once again from the script. File it in the HTML and then selecting the image. Let's go ahead and select the image time, and we only just do have one image. So I am G is gonna be. Allow us to select that image tank, and if you want to select the attributes from the image tag, we can specify the source attributes. If we just specify the first parameter where we're specifying the source off the attribute that's gonna actually return back. The value off that attributes from the image and in this case is going to be the location of the image path so we can return that back. And if we can, if one a reset the path of the image that we can comma, separated and add that into the attributes, let's go back into the code and we can also assign this to a variable value. So if we want toe get the original image, we can return back that as a string value, and then we can update the image value to a new value. So let's select the image and get the attributes once again. And let's specify the source and we can comma, separated out and we can have a new source for the image. So in this case, we're gonna select the dummy image, and I'm gonna update the word J query to be Hello. I can also update the colors as well. So now let's run the court, see what happens. So we've updated, and we've said it to be, ah, black background with the word hello, And if we return back the original, we still have that original image there. So let's add in some more options where if we want to reset that original image back to the way that it waas to do that way already have it stored in the variable value. So let's specify the source and then the path for the image and go back in and reload it. And now we've gone round trip. We've loaded the image, we've updated it, and then we've reloaded the original path of the image to try it. It and the next lesson. We're gonna look at some really neat things that we can do it J. Corey and selecting the check box, checking to see if it's been checked and then taking running some code accordingly. 17. 16 Code Challenge Checkbox True : welcome in this lesson. We're gonna be checking to see if the check box is true and I'll show you how to do that. So we've got our code. It's already set up that we do have a check box on the page and we want to be able to detect also, if the check box has been clicked and what the status of that check box is as it does get clicked. So let's create the code for that And using bakery, we're gonna make a selection of the check box and going into the HTML. So always think about the same way that you would select the element using your styling. So how you would select this particular input? So then put is a type of chuck box, so that makes it distinct, but it also has a distinct name. So let's go back into the bakery and will select the input and will select the input with a name off checks. And also just make sure that we are selecting it properly. So going into the console, it's too quick. Refresh, and I am getting this warning message because I'm using the file protocol and it's linking to an image that's an external image source. That's why that keeps popping up. So when we select it, we get the one element being returned back. When we hover over it, we can see that this is in fact input, so that allows us to select the element. And also now we want to add an event listener. So the event listener that we're gonna add is going to be a click event. And then on that click event, I wanna run some court within this click event, and I just got a call it update image. So let's create a function to handle that update image and will pass through the event object and all console log for now clicked, so it's just make sure that it's working. So it is working. It's picking up the clicks. So next we wanted to check what the value is for the further property of the elements, and we want to check to see if checked is true or false. So we know when we do make the selection off the element and we check it, it gets checked off, and we can set a default where we can check it if we want, as well as we're loading the Web page. So let's go into the code and we're gonna check for property. And they do have a J. Corey method for this. So once again, select the element that we want to use. And we could also use the G query this as well. So that's another option. Will reconsider sect that element and then check its property. And the property that we want to check is checked and let's see, get what gets returned. I gonna wrap this in the consul message. So we get to consul messages when it gets clicked. So refresh and in the consul. So right now it's true. And then when we clicked it again, it went to false, And we can also select the element and using the property. We've got the same option that we saw with the Attribute them an image attribute where we can select the property and we can update the value. So in this case, if you want to set that property checked to true, we can do that as well. So if you want to load the page with it checked, then that will. That will update the property value and said it true. So I do have a quoting challenge for you in this lesson, and that's to combine. What we saw in the last lesson were updated the image attributes, and when this is checked, then we want to update the image to say checked. And with dummy image dot com, all you have to do is update the text. You can also update the colors as well so that the colors and the size is the first value there. Before this slash this is gonna be the background color. This is the text color, and this is the content of the text. So the objective is to create a quick project where you can uncheck and recheck the check box. And that's going to update the image source value within the court. And that's all done with J. Corey. So positive video here tried it in a walk you through the solution coming up. So first, let's go ahead and select the path for the image that we want to use and bring it into the coat, and then we'll make an update to the coat, so we want to check to see whether this is true or false and depending on if it's true or false, that we're going to send a different value for the image and we can output a different value for the text of the image. So let's make our selection, and there's a number of ways to do this. You can do it with a condition, so checking to see if it's true or false. And if it's true, then do this and then else do this. So we have a few options here where we can set just text value, and we can also change the color value. So let's create a few variables and I'll do a color and also do one for output. And let's see what happens is everything still working properly as expected, and we've set up the two variables. So let's set the value for color and we'll update the value for color. And that's gonna be referencing whatever the color value is that we want for the background . So if it's checked, it's gonna be this color, and if it's not checked, then it's gonna be this color Also. Now let's update the output, or it could have been the message. So whatever the value is here. So if it's checked one out, put the word G query. And if it's not checked, then we wanna output not checked. And then lastly, we need to select the image, select the attributes of the image. And the attribute that we want to update is the source. And we want to update the source with this string value. And there's a number of parameters that we want to change within the string. And then the last one there is gonna be the text. So I'm gonna just use a can cat nation and update the text that way. And I'll also captain eat this one in between and setting the background color that we want to use and actually just one quick correction. We can't have a space in the output, so update that. And now it's quote and try it. So when we refresh it, we can see the image sources here we uncheck it and it goes, not checked and updates the image source. When we check it, it goes back and updates at once again the image source. Depending on whether we've checked or unchecked, we're going to get a different image appearing within the image element 18. 17 Mouse Events jQuery: Hey, this lesson. We're gonna be looking at mouse events with G. Corey, so let's go back in to the code and look at different mouse events that we can add to the various elements. So let's update and select the most event for anyone that enters in to the main area here. So this is going to be that list that we've created. It's got a class of Maine and we'll be selecting by the class of mean. So let's make a selection of the element and then what? We want to apply to the element. So I wanted to add in a mouse event, there's a number of different mouse events. There's most down. Most enter mouse leave, mouse move and mouse out and also mouse over and most up. So, depending on which one you want to do, I'm gonna do the mouse enter, and then whenever the mouse enters that we want to fire off this function and going back into our classes, we're gonna update and apply a class to it of red on the mouse. Enter. So let's select the element and they're going to use this ad class and riding a class of red to it as the most enters, so refresh. And we also should have won that we most out. So whenever the most leaves, then we can update the class and remove the class of red. So Maine and mouse enter. Let's do it. Most leave. So this is gets fired off whenever the most leaves the element and instead of odd class will do remove class. So see how that works. We can. Whenever we're on top of it, it adds, in the class of red, you can see that on the right hand side, and then whenever we leave it, it removes out the class of red. Let's try a few other mouse events, so it's select the elements each one and will select mouse move. So most move is gonna fight off whenever the mouse is moving on top of this element. So selecting the element and I wanna console log out and also set up a default counter set it at zero. So every time we move the mouse, we're gonna increment the counter by one, and then I'll output moving and whatever the value of counter is into the console, so see what happens for this one and going into the consul. So whenever we're top of the elements and I'm moving around, it's gonna be firing off so that one is different than the most. Enter, because the most enter only fires off the one time. And just to show, you add into the consul the enter. So whenever we enter, it fires off. One time, as opposed to moving, is any time that you're on top and you're moving around. That fires off that event. Let's out a few other ones. Just do a quick copy and paste and select the H two and we'll add in a mouse out and I just out. It will also add one for believe on that so we can compare what the differences so most suit most leave slightly different. So whenever the mouse leaves the element, it's ah refresh, and they both only fire the one time. And if you just have the one element and it does look like it's doing the same thing. But if you add another element within the element that we've applied the event listener to the each to, then you're going to be able to see a difference between the mouse haute in the most leave , so mouse out and most leave are very similar. The difference is that the most so it fires when the pointer moves out of the child element as well. Meanwhile, the mouse leave only fires when the pointer moves out of the bound element. I'm gonna updates the each to and also border and added another element in there as a spin . And this way we're gonna be able to illustrate the difference between the Minnesota and the most leave. And also let's update the each to span as well with the border, and we'll add a border of red for the span and refresh. So you see whenever we're moving out off that child element than the out fires off, whereas the leave fires when we leave the entire element itself. So go ahead and try out some of the different mouse events. You'll be ready to move on to the next lesson 19. 18 Keyboard Events jQuery: this lesson, we're gonna be looking at keyboard events. So opening up the editor we do have a few input fields there so we can listen for keyboard events on those input fields. And we can also track what keys were pressed as well. So let's select the element first that we want to use and that's going to be the input and we can actually track on the input. We only just have one input, but let's track it by its name that's being used for the input. So going into the input area and this one has a name of first. And once we selected, we can attach keyboard events to it. So we've got the key down event that can fire and that there's also a Chiappe event as well . So key down we can check which he was pressed. Which one triggered the event so passing in the function with the event object and then within the anonymous function event object, we can console, log the event object just as we do it javascript and see what he was pressed. All of the key information is available, so if you open up the object we see that the event was key down, and we can also go in and get the key value. So within that key code, we can see which key was pressed. So any one of these values is available to us if we want to see if the key code eso for Enter the key code is 13 and I'll just select on here and press enter. And that's gonna be the last event there and then going down to the code. So the code is enter the character codes is zero, and the key code is 13 that he was enter so we can check to see if the user has pressed enter. And if they have, then we know that this is sometimes similar to doing a submit on the input field. So let's add that in and check to see if we can get the key court and check to see the value of the key code. So if it's 13 that we know that the user has pressed, enter and we'll consul log crust enter and also comment that one out so refresh and now whenever they're typing in the press enter, we see presses enter. Let me do that to see pressed. So at this point, whenever the user presses enter, then if you want to retreat back the value that's contained within here, we can do that as well and update the value of the each one. So selecting the H one elements, we'll update the text value, and the text value will be equal to whatever we have as this. Well, because this is an input field. So we do the V A l method in order to get the value. So now I can type some information here, and only when I press enter it's gonna update the input there. So if we want to get the amount of characters that have been added into the input field, we could do that as well, where we can select and we can get the number of characters and input field. So how about we update this and selecting this value, just going to be returning back the current value for this and using just still length, it will return back the number of characters within that string. So every time I type were updating the number of characters, we can go down as well. So if we want to have, ah character limit to the input field and we want to turn it red once it goes over five characters, we can do that fairly easily with what we've already covered in this lesson. That's the challenge. So project for this lesson is to have the input field, and once you enter in five characters orm or it's gonna go read. So try it out and walk you through the solution. You can pause the video here and the solutions coming up, so we need to have a condition that is checking to see the length of the input value so it's returned back and input value. And if it goes larger than five that we want to take some type of action. We want to update the current element and set out of class. We're adding the class of red and else well. Just remove the class of red. So this way, if it's over the five characters, then it's going to be adding the class of red. And if it's not, then it just simply remove it. And if no class of red is present, then nothing will happen. It won't have anything that it's going to be removing. This could be no errors, so it's tried it. So one character. 2345 six, seven And once we hit seven characters than where Going red. So we actually need to adjust that, and the reason that it's hitting seven is because we didn't have the equal sign. And also, the string methods are also zero beast, so it starts out at zero. So if we only want five characters, we actually have to have four items within the array for index values. So remember, starting at zero. So let's try that one more time. 12345 And now anything at five and up. It's going to be going red to try that it. So just as we saw a key down, we can also do a key up function. So that's another one where we can check to see. So if want to have just on the key up, we can add this on the key up. We'll copy that block a code down into the key up whenever the key is pressed up. Then I'll run the block a code to check the length of the value And now, as we type in content into the input field, when we he up, then we're gonna be adding and removing the class depending on what was what was keyed. And we can also do ah kee press as well. So initially that does sound very similar to he down. But there is a slight difference so key press will run when the key is pressed as long as the key is pressed. So let's run a function in order to illustrate the difference between the two and consul log and I'm also gonna add in the counter It's the same thing that we did the last time so that we can better illustrate the difference. And we'll just tape press plus whatever the value of counter is. And also we need to increment counter with the key press and we also need to add that to the key down and I'll type in down here instead. So to the consul. So let's try that. It's and go and start typing in here and we see we've got down press, so we will only press at one time, then both of them are going to fight off the same way. But if I hold the key down, then down is going to continuously fire off that function. So that's the difference between down and press that if you hold the key down, then there is gonna be a difference. But if you only hold that if you only press the one key and it's just a single key, you're not going to see much of a difference within the event handling. 20. 19 on Event Delegation jQuery: this was so we're gonna be looking at the on event handler so that allows us to delegate the event handler to different talents that are part of the parent. So we saw that when we're creating the dynamic list where we adding list items. So let's do that as well in this lesson where we're gonna take a look at that a little bit more detail and how we can add event listeners to the elements that are dynamically added to the page. So selecting the elements that we want to apply this to so in this case, I'm going to select it to the parent, which is gonna be the one that's going to contain all of the list items within it. And selecting on is an event handler that allows us to attach more than one event to that element. So, for instance, if we wanted to do our mouse enter and then what we want to happen whenever the mouse enter gets invoked. So in this case we wanted to update the element, So whatever, the current element is an update, adding in class of red, and we can also add in multiple events using the on, so contain them so we can change them together. So let's let's select one and create one for mouse leave and another anonymous function. So whenever anyone leaves that, we're gonna select the elements and remove class of red. They will update this as well, to be applied to the list items. It's never we hover over, goes red. Whenever we leave, it removes the red class. So because we've selected the main element, we can apply this to the Children. So if we want to go down one level and only apply to the list items, we can add in another parameter here. And I'm also going to do the same thing for the mouse leave and we'll see how this works. So now when I refresh it, it's being applied to the list items so we can also add in multiple event listers on the scene handler simultaneously and eso. We saw how we can change it together. But there's also another option to do this. Where were writing it within a plane object format. So taking the same structure, anything that quickly just do a quick block comment of this so that that code isn't interfering with what we've got, we're gonna set the on event listener, and then we're gonna indicate an object within the on event listener that's gonna have all of the parameters that we need. And so this is going to be in an object format, and we can output the different event listeners that we want to listen for. So let's listen for the mouse enter. And whenever the mouse enters, would he want toe happen? We want to add the dot event listener, so a sine function to it and it's gonna run that block a cord, and this is again contained within the object. So it means that we can comma, separate this and also run the mouse leave in the same format where we're gonna remove the class from the object. It could get rid of that. You can add in multiple event listeners here, so you can also have a mouse click as well. So if it gets clicked, we want to happen. And whatever blocking cold we want to run. So where I put into the console, All right, let's run the code within the editor with the within the browser, so refresh. And whenever we hover over any of them. That class of red is being added and removed as we hover over the elements. And then also, if we click it, then we get the word clicked being represented in to the console. I've got one more example before we conclude. So let me block out this block a code as well. And you can also, with the on listener, you can add in multiple events so we can make the mean selection just as we were doing before. So the element with the class of mean and then using on we can specify multiple events. So if, for instance, we want to listen for mouse enter and mouse leave, we can add both of them in within the same string value. I just need to space them out, and now it's gonna run. Ah, function on both of those events, and you can also add it, specify the list items as well, just as we did before, and then run a function that's gonna fire off whenever either one of these gets invoked so you can also check for the different event type. So within the console, we'll log the event object so refresh, and you can have a condition that checks the type. So if this is mouse out, so if E type is equal to. But I was out and we can also check to see if E type is equal to most enter. And I'll update this to most believe so selecting the same thing that we did before where if the mouse enters that, we're gonna playa class of red and if the mouse leaves that will apply class or will remove that class of red, So see how this works. That's doing the exact same thing. But it's just within that one statement. You can also apply a toggle. So it was another option that we can do so we can track the different event types with condition, and we can also select the current element. And because essentially what we're doing is we're toggle ing the class. This will even simplify it even more where we just select toggle cloths of red and apply that function. So let's see how that works. So it's toggle in the class of red, as were hovering over the select elements, and I'll open up the content within the consul where we can see the class of red being applied, So there's a number of uses for on deserves some examples of some of the uses that you might be using. So there is a quick challenge for you. So the objective of this challenge is to be able to type something into the input field, press enter and have it added into the end of the list. So it's the element with the class on ordered list, and it just drops the new list item at the end. And also, whenever you hover over it, it's gonna be applying the class of red to it. So positivity here tried it and walk you through the solution coming up. Let's go ahead and will select the element with the input and with the input name of first and then will add an event listener to this element. So we're listen for using on and we'll listen for que down. And if it's key down, then we'll check to see if the key that gets pressed the key code of the element that got pressed. And if event key chord is equal to 13 they were going out a brand new list item to the end of the list. And so, for now we're just console log just to make sure that everything is working. So refresh. Open the console, type something in here, press enter. So that's working. So now let's go back into the court. And let's add in the last line of code where we're gonna be selecting and updating the adding a list item, so creating the list item that we want to add and then also, we need a value for that list item, and we can get that from this using V A l. In order to turn back the value and caffeinated together, close off the list item. So update the HTML code that we want to use and then using the append to we're going to append it to the element with a class of mean and a nor dirt list. So let's try that and refresh, and it takes some content in here. Press enter and look into the HTML just to make sure that it's adding it in properly. And it's also has all of the same functionality. So if I add in a munch bunch of them so dynamically adding them in, everything seems to be working and were able to add the toggle, the class of red 21. 20 jQuery Effects Hide Show Fade: Hey, welcome back in this lesson, we're gonna be looking at different effects with a decree. So let's go back into the editor and we're gonna select the elements and using the one with the class of Maine any of the list items. Let's apply click event to that. And if that gets clicked, then we'll run a function that's gonna hide the element that just got click. So selecting the current this element and apply hide to it. And then also, I want a way to show them all again because not disappearing were just updating the display properties. So let's select the H one. And if the each one is clicked than we're gonna run a anonymous function and within this function, selecting all of the list items on the page or you could just do main list items to be more specific. So that were in line with just exactly what we're hiding. Selecting those and applying a method of show, and it's gonna update the display element to be able to show all of the list items. So it's tried it tiu. Now, whenever we click them, they're disappearing, and they're just disappearing from view. So just getting a applied display of none. If I click the H one, that's going to remove those and show everything once again, there's also some options for speed. So if you want it to provide specific speed on the height or the show, you can do that as well. And the speed is within milliseconds, and there's some default values of slow or fast. So let's do slow and refresh. So I click it. It does it. It does a slow, kind of fade out effect of the element, and finally, it gets to none. There's also Ah, fast option, and you can also set this within milliseconds. So if you wanted to do within 1000 milliseconds so thin 1002nd to show everything again. So it's hide a few and click it, and I'll open it up so that we can see the list items so these ones have display none. When I click the H one, then these ones are being shown, so we've got all of that styling where it's actually showing the element. You can also toggle the elements, so instead of hiding, showing you can toggle it and this one's a little bit more difficult because if we're hiding it, then it's hard to actually select the ones that we want to show. So how about we just toggle all of the list items? So it's setting that to show I can remove that it or we consider it to the H one, and this one is actually gonna toggle the list items. So ta going the view of those list items. So let's try that. So that's the H two that does that and let me hide a few of these. Go back in, open it up so that we can see what's happening with the styling code in the background. And this is all Jaqui that's doing that. So it talk gold the list items. So the ones that were showing are now hidden and the ones that were hidden and now showing I want to see all of them. I can press the each one, so there are a few options with this, and depending on what you want to do, you can. You can do a number of different items here within these options. There's also an option for a call back, so if you want it to run a function that says, or let's create the function and I'll call it success and it'll just say output and within the output. So let's update the H one element with text content that is coming from the function that is getting apart parameter passed in of output. Now accept the call box in the function. So whatever we hide it on and whenever we click the each one or we show them, all we can add in that hide show is the value is gonna be passed into the success. So let's see what happens. So click it So we get the call back hide when I press to show it does the show off that value So we can also be even more dynamic s if wanted to be specific with the list item that was hidden, we can get this and text value and we can pass that into the success. So it's refresh. So now what we're doing is whatever text is contained within the list item as we click it, it's gonna update the h one value. So let's try that. And so so gonna hide the clicked one. So it click me five Click Me, too, and when I click this, it'll update the content with the callback to show. So there's also feed, which is similar, that we what we saw. But we can specify that this is a feed effect so slightly different but very similar, and we can specify what were fading in, so it's used to fade. An element is used to fade in, ah, hidden element. So that means that the ones that are hidden, we can show them and we can actually fade them in. So let's select the list items that are hidden and we'll run the feed in. And we can also specify a duration within this as well and as well, in addition to a call back. So now let's hide a few. The elements on the page and feed in is gonna bring them back. So we've got a couple that are hidden. We can toggle the one center hidden, So now we've got display, none on four of them. Let's click. And so that brought them back and removed that styling of hidden. So that's just another way to bring it back. So again, depending on what you want to do, How you want to set the different effects. There's a number of options for this, so show and feed are very similar, and you can also within the feed. You can specify the milliseconds. So if you want to do a feed of 1000 milliseconds or 3000 and we can also specify to do slow just as we do with hide, there's also fade out. So what fadeout does is this feeds out to our toggles the elements into visible, so the opposite of fade in is fade out. So if you wanna show the list items, I commented the toggle and select the main list items and fade out. So these air the hidden ones so that we're showing all of the hidden ones and the same options where we can do slow milliseconds. And there's also a fade toggle. So it just says we saw with the toggle we could do a fade, toggle us well, so that one's hiding, which is the same as feed out and let me actually just update this to be fade out and then I'm gonna update the toggle to be toggle. So we got the same options as the height and then fade out. So it's to a feed toggle, and we'll just leave at 1000 milliseconds. So they're all doing the same as we were doing with Hide and Show. But we're just using the fade in fade out and fate toggle now Instead, let's see what happens. So refresh on Let's hide a few of these So they're hiding on the page. They're getting the display property of none applied to them. This this is gonna be the toggle where we're gonna show the opposite ones. So it's ta going all of the list items. So whether they're showing or their hidden, it's gonna do the opposite. So when you toggle, it is now 236 or showing now, 145 are showing on the page, and then this is the one that's going to just show all of them, which is also the way that we saw with show. And then the fade out is the one that hides it and then toggle. And the fade toggle is the one that is equivalent to toggle. To try out some of these, have some fun with it, and you're gonna be ready to move on to the next lesson. 22. 21 jQuery Slide Effet: going to be a fun lessen the boat slight. So, just as we saw in the last one, these air some really cool effects that you can apply to your elements So they're slide down, slide up and slide toggle. So slide down is the way to slide down an element. And let me show you the how that's gonna work. So making a selection of the element with the H one tag and I'm also gonna apply some text to it and we'll just call it slide up. And then, if it's clicked, they were gonna run a function. And within this function, we want to slide up some of the elements on the peach. Let's select the elements with a class of Maine and then apply the slight up and let's see what happens. So we click it and it slides it up. Eso There are also some options you can slide down, so that means that if it's hidden, we can slide it down. Let's select, that's and we can toggle it or slide it down. So let's do with the each to and do a side down on this one. So what this will do is it will slide down the element, so allowing us to see it and short. So we've got slide up, slide down. You can also apply the toggle. You can also apply Call back into there. So if you want it to apply a speed, you've got the options to do milliseconds. You can also do the slow and fast and then also apply a call back. So just gonna run the callback function and we'll do success and passing a value of up. And this one will be down and then create the function in orderto handle that. And I'm gonna stick the message into the element with a class of output. So let's select that elements with the class of output and using text. We're gonna play whatever message has been passed. And now let's see what happens. We've got the opened. I did forget to add in the extra bracket, so I missed that. Let's try that and refresh and we've got slide up slide down, and it's also updating using the callback function, so there's also an option to toggle. So let's supply the toggle to the element with a class of output and will allow this one to toggle that main list item and also add in some text by default. And I'll just call it toggle and on Quick will run the function, passing the event object. And then let's update the element with a class of Maine and slide toggle, which is just gonna toggle whatever slide option. And I'll just do it a fast toggle and success in the callback. Well, output the word toggle. Just two rounded brackets there and let's try that. So now we can toggle it, and that's the fast. That's the up. That's the down if you press it down and it's already showing nothing happens if you press up and it's already hidden, nothing's gonna happen to try that within your own code, and you will be ready to move on to the next lesson where we've got some more fun stuff planned. 23. 22 jQuery Animations: Hey, let's say to meet some stuff with Jaqui, that's gonna be a fun lesson. So first we need to make the selection. Making a selection will select each one, and this is the element that we want to animate. Apply the anime method, and within the animate method, there's a bunch of properties duration. You can also set the easing and also have a callback function. So we'll go over those in more detail through this lesson. So animates. And let's see by itself, each one so nothing actually happens with just each one, because we haven't provided any parameters there for it. Teoh do any of the animations, so let's add in some parameters. And so we want to specify that we want to move from the left in the number off pixels that we want to animate to move it and put that within the parameters object. So you saw whenever it's started that there was a countdown and it's applying the style of left. Now, one of the things that you might have noticed is nothing actually happened. It didn't actually move, and that's because we need to set the position of that element to absolute for the element position could be relative or fixed, so we can either go into the styling or we can apply it with Jake G. Query. And I'm gonna be going over more about what we can do with style and with adding CSS to an element. But this is just a quick example of so that we can get the enemy working. We're going to apply the using the CSS method. It's going allow us to set values within the style property of the element. And within the CSS, we can contain an object where we can set the position, property and a sign of value to it of absolute. So this has been now applied to that element, and we see within the style property that it's got a position of absolute and that actually made it move across the page when the page loaded. So there's also fixed and a relative as well. So let's update that, too. You can also, of course, supply this with just within your style sheet as well. So the relative keeps the positioning but keeps the spacing so keeps the other elements in relation to that original won so that just moves that it kind of slides along the top there . And also there's the fixed position as well. And all of these won't work with enemy, just as they do with styling. So let's keep it at relative and also ill increase this to be 300 pics. So now it'll move further across, so it's apply it to the list items. We'll do the same thing, selecting the list items, and then as they get clicked, they're gonna move along the peach, so we're going to animate them as they get clicked. So let's apply the click event That's our click events and add the function in there with the mental object. And now let's apply the ana meat to the element that selected that was selected, so apply animate to it. And within the animate function, let's apply the parameters of left. I will do the same the 300 pics to the left, so see how that works. So now whenever I click any of the list items, they're gonna animates and slide over to the left hand site. It was quite a bit that we can do with animate, so we can also do Opie City weaken do height with. There's a number of options that we have available to us. So if we wanted to update the height, we can do that as well. And let's set it to 100 pics for the height. And this is all updating the style property. So something that we did with the CSS. We're updating the style attribute within the element. We're doing the same thing here, but we're doing with the enemy where it's gonna actually update from the one spot to the other with the animation value. So also, let's set a with value to it. And let's go up to where we set the styling and set up the border so that we can see it and said the border to one pick solid red so that we can see where the each one is. And also I'm gonna set up display of in line block so that the height and the width can be activated. Otherwise, it's just taking up the full block and were not able to use the height and the width so we can actually see the heightened with eso. See how it's adjusting and it's getting bigger. So as it's moving out, it's getting bigger. There's also hope a city that we can update. So I'll add the Opie City into the list items so you can select a pope, a city of 0.5, so that will feed it 50% as we click them. So they're more feed ID than the rest of them. And also let's use the each one as a way to or the each to as an element that can be clicked. Update the text, and what this will do is this will reset the list items. So whenever it gets clicked, it's gonna run a function that's gonna reset the position of the list items, because over here we're moving them over to the 300 pics. So I want to be able Teoh as we click them more and more that I want to be able to move them continuously. So let's select and select all of the list items and then animate them and set them back to the zero position and up a city of one. So let's see what happens here. So now let me click a few of the list items and click to reset, so it's gonna move them back into position. And now, instead of doing 300 pics, we're gonna continuously add to the value. So as we click it, it will update, and it will continuously animate to that value. So let's add, so do a plus and equal of 100 pics to it and refresh. Now the more I click it, the more will move over to the right hand side, and then we can reset it and start again so it gives us some more options. With Anna meeting, we can't even updates things like the font size. So that's another option that we have, where we can update the font size. So how about we make the font size bigger if it's been clicked, and then once it's the reset, we'll reset the font size back to the one e M. And there's also on option that you can set for the animation speed. So just as we saw before, there's pre defined ones. We can do milliseconds. So how about we do it with 3000 milliseconds on the research? So see how this looks. Let's click a bunch of these and you get up more dynamic variables as well into these. And now let's do the reset of this and I'll open up the values so we can see where the current position is of the element and the font size and where it's moved over to left. So we click this 14 times, so it's moved over four times. Let's do a reset and see what happens. So we've got it on a 5000 millisecond reset back to the original positions, and that was 5000 milliseconds. So we can set the speed and we can also dio callback of it s O. As we set the speed for the animation of the list item, we can update the current list item and run a function for that. So let's add the speed to it, and I'm going to update the number of times it's been clicked. The value within the elements that's being output and move this up and we'll do this relatively quickly. So 100 or 1000 milliseconds and then the function that we want to do on a call back. So what do we want to happen once it gets clicked? So how about we select the current item and we updates its count value within the text. So I'm just gonna keep one value there for the count value. So let's psychotic that as value of whatever is contained within the text. And then we'll update that. And also I'm going to update the list item text to all be equal to zero. That way we can have a count on the list items. So we take the current element, get the text into the value on console log and see what puts into the console. So that's gonna be the callback function. And then afterwards we can update the values so as we click thumb and then the call back when it finishes it but rates zero into the consul, notice that that's text. So if we take foul and we increment it by one, let's see what happens. And JavaScript converts it into a number because JavaScript has dynamic type conversion. So next we just need to update the current value of the text that's contained within each one of the elements as it's been clicked, and this will increment it. So the more we click it, the more it'll increments and that value will stay So even when we do the reset, it will stay to that value. And actually, let's just speed things up a little bit because it is taking a little bit long. I'll update the reset to 1000 milliseconds, and now when I click it, it should be relatively quick. So we can track how many times each one of these has been clicked with the value that's sitting there within the text area to try it out. Have some fun with this, and this could be a little bit more on this coming up in the next lesson. 24. 23 jQuery Animations Coding Challenge: assess is going to be a fun coding challenge. So I did want to show you one thing before we begin. So in order to attach an event listener to the body So this means that anywhere on the body , if it focuses on the body, that we can register various events, so such as key press or key down. So let's select the key down, and we're gonna run the function for the key down and consul, log the value of the key that's been pressed, and we'll also the event objects and whatever the key value is, that's been pressed. So it's tryouts. And now, anywhere I press, you can see the cues that impressing on on my keyboard and they're being tracked within the console. So you are going to need this functionality for this exercise. We're gonna combine that key presses with the Geico Anna meat, and we're gonna select the each one element, and we're gonna move it depending on what key is pressed. So a will move it to the left s will move it down. D will move it to the right and f will move it up. Or you could do different key combinations if you want as well. And then clicking on the element itself will just reset the position back to the 00 position. And whenever we're on top of it, we also want to have a different colors. We want to set a color background, said some borders for it. So a bunch of stuff let me show you what it looks like. Okay, so according challenge is to take the Each one updates some of the style properties to make it red and also absolute, so you can move it around, and then with your keyboard, you should be able to press f to move down D to move to the right s to move up and a to move to the left so you can have a bunch of the key presses and see all of the different animation effects running for those key presses. So whenever you're hovering over with your mouse, it goes blue. And whenever you move off, it goes back to the initial red, and when you click it, it resets itself back to the 00 position. So let's get to it and tried it and walk you through the solution on the other side. So positivity here tried it. All right, so let's begin. So we want to use instead of key down. We want to use key press, and the reason for that is that we saw with Key Down that if you have the key and you hold it down, then it will register multiple events, whereas key presses just the one event. So we only want to register one animation for every he press. So that's where I'm going with key presents, a key down as the animations might take 500 milliseconds or whatever value we want associate to it. And if we're just got key down, that could lead to a number of them while the animation is running. So a little bit of confusion there with that. So let's start by making a selection of the each one elements and let's apply some styling to it. And within the object styling object, let's set the position first. So that's the one that where it's gonna be positioned and setting it to absolute will allow us to move it around the page, so set it to absolute, and this actually should be a colon so just comma separated out, saying, I'll update the background color of it as well. So set that to read and update the with of its and within the with Let's set with to be 150 picks. And we'll also set the height value. And I know, of course, you can do this with styling, but we want to practice. Jake, we're here. So hopefully you were doing it with bakery as well. So let's set some potting, and these can obviously be slightly off if you want. And then I'm also updating the text inside and I'll call it mover. So I gotta change those two together. Let's see how that looks. So now it's positioned and it's ready to apply some animation. So depending on what the key presses, we can animate it. We can move it around so the key value and we'll have a condition that's going to check the event object. He values a e. She and we're gonna check to see if it's equal to a and if it is, then we're gonna play on animation to it, and the animation will be value of plus or minus and applying it to the left. So let's select the element that we want to apply the animation to since the e each one and selecting the ANA meat method. And then let's add in the parameters for the animate object. So within the animate object, we want to move to the left. And we also want to add so a was actually subtracting. So we're gonna subtract a value of 50 picks and then the speed that we want to do the animation. So let's do 500 Millis seconds and let's see what happens now. So now we've got our first animation and it moves over slightly when I press it. So let's also do some other keys and we want to also register the S and the S. He would move it up off the top. There was also the D A and the F keys. So do a quick copy and paste d. And then we'll update the animation and F So the D was gonna increment it from the left and from the top plus 50. So it so it happens. So refresh and a s d f. So we also want toe apply mouse silver. So whenever we're on top of the element. Let's apply amounts over so selecting the element and I know we could just chain it as well . So just for readability, I'm keeping it separate. But you could as well just chainat some adding in the on and placing an object within on that's gonna have all the properties that we wanted to set. So the first property is the mouse enter that we want to set and select a function that's gonna fire off as soon as the enters the most center and select this CSS and then within the CSS, we're gonna update the background property. And that should save background and update the background property to be blue that we can comma, separate thes and we've got on mouse believe as well and we'll reset it back to read and let's do one more. We're do something whenever the user clicks set. Then we're gonna reset the left position and the top position. So basically, cancel out the movement that we've had within the keys. So selecting left and with javascript objects, you don't have to use the courts for the property name. You can if you want s. That's why I've just providing some samplings of different ways. And the value does need to have quote surrounded and sent this 1 to 0 picks. So now it looks like we're ready to move it around. And if I click it, it goes back to its original spot or whatever spot we're specifying. So I can enter in a bunch of keys just randomly impressing a bunch of them, and it looks like it's moving it around. And if I click, it kind of does a little quick reset of the position, and it's still running all of the animation. So this is why we didn't want to use the key down where we wanted to use the key press, because otherwise we would have ended up with a bunch of animations that looks like I've moved it off the screen. Unfortunately, eso go ahead and try the sun out, and also make some customization is to it. Let's see what you can do with this enemy 25. 24 jQuery AJAX: One of the reasons that users like a query is that it allows us to provide really nice, smooth Ajax request. So making Web requests to other endpoints. So I'm gonna show you some of these in this lesson. So let's go into our editor. We need to make a selection. We're gonna select that each one. Once again, I'll update the text that will say Click me and then as soon as it's clicked. So whatever the click event is, we're gonna run a function within the clique event, just anonymous function with the event object, and first will log it that the event object just to make sure that it is working to do a refresh, Click me. We do get our event firing off some current event target and all the information that we need in order to produce our effect that we're looking for in this lesson, and that's to use the get method. So with Ajax, there's a number of different ways to do methods, and one of them is the get method eso. There are specific ones, and then there's an all encompassing Ajax method in G quarry. So if you're just looking to do get You can just use the get method. So it's dollar sign get. And this allows us to load data from the server using http Get requests. So we need to specify some parameters. It's gonna be looking for you, Earl. I'm actually gonna do this on the global scope. So let's create a web. You are l so that we can request to the web. Buehrle, I'm gonna be using ah generator called random user Jenner Emmy Generator. And this allows us to generate random users on the fly. So they do have an A p I address here that we can make requests to. So all it is is ford slash AP I and then you can also specify the number of results and that actually should be a question mark in there. So if you want to get 100 results that produces a whole ton of results back for you, seek unspecified the number of results. So let's take this you Earl and pop it back in as our euro that we're going to making our request and then using that you are l value that we're going to run our anonymous function on call back, and this will be actually the response object. And this is gonna be the data that we're returning back and we'll just Consul, log out the response and let's try it and see what happens. So into the console we do click me and we register the vet. And then we also get this array of results back. So we get all of these results back using Ajax request. There's also waste to load Web page content as well, so it may show you a few a few more examples. And then I'll show you how you can look through the data and some of the other really nice utility functions that are available within J Query. So let's select the H two and I'll update the text for the H two, and I just call it lowered page. So whenever it gets clicked, it will run a function that's gonna load a page, and the page that it's gonna load is gonna be a separate Web page. So it's just create that new page, and I'm gonna just call, I gotta have hello world in it, and we'll save this as just test HTML to going back to the code. So now we have a Web page that we want to load. And in the HTML, if we want to load the Web page content into the element with a class of output, we need to, of course, select first. So select the element with a class of output and use the load method, and that's going to allow us to load a page. And because they're going to be within the same directory, I can just specify that I want to load test dot html file and let's see what happens now. So when I refresh and so what's happened here is that we actually got blocked by the course policy, and this is something that will happen. It's a browser security thing, and the browser security will activate because we're picking up the content and still loading it locally. So we're just using the file path, and this is definitely a security issue, and that's why we're getting that course policy error. The Web pages are gonna have the http protocol, So if we're using the file protocol than some of the jacks, requests won't work. There is a solution, and a quick one within brackets where you can go under file and click life preview, so allow you to load the page. And now when I click load page, we get the content loaded within the and I'll dock it to the bottom. Also, we can open it up large and I'll do a refresh. So within the console, let's hit load page. It updated the content with an output to contain the content from that file. So there's the Hello world. Try that one more time, so it starts out by default with just content. I hit load page and we get Hello world being loaded. So keep that in mind that the protocol does matter, especially when you're loading the page. So what this really means is that when you upload it to your website, your web server, you're fine because you're gonna be running on the http protocol anyway. But because we're in development and in testing, that's where hitting that http protocol and we're also running it obviously within the file protocol, because we've opened up the file. So it is suggested that if you are using Ajax requests that you are running the local machine and running your developed development code within an issue to pee protocol. Another common use for Ajax requests is submitting form data. So let's create and wrap those inputs with form data. And also add in an input that's gonna provide a submit option for this form data. And they were gonna use the J. Craig in order to pick up the form, submit event and then also get the data from the form object That's on earpiece for all of the element values. And let's add a submit button, so type submit value. Send data. There's our four. We've got her input and send data. So if you wanna send contents from ah form, you can add that as well. So let's select the form object just just called my form. It's actually with an I D of my form, so I need to add in the hash in front there and getting the submit off that form object. We could run our event object function, so this is an event that can be listened for and by default. When you hit submit, it's gonna try to submit the form content, so there is a way to select the event object and prevent the default action. So default actions such as with forms and submit buttons it will automatically submit and move to the next piece when hit. Send data. If we didn't have the prevent default than it would submit the form information. So what? The send data? It's not doing anything. It's not trying to submit the form. And if I comment at the prevent, default and refresh it, add some content here. And if I had send data, we see that it actually tried to submit the form. So it went Teoh. There was no your URL provided, so it just added it and used the one that was currently in use. So we want to prevent the default action because preventing the default action as we're gonna be doing King submitting the data via the Ajax request instead. So let's get the data that's contained within the form and then just so that we do have a value for the input field with the name of First. I got a set of value off Lawrence in it for that field, so we have some data to work with, so that feel just got populated there, and now we want to get all of the form data. So that's gonna be returned back in. An object format will give it a variable name of my data and then we're gonna take the form objects. We can actually use this because we've already selected it in the form Submit is taking running the event object so serialize and what this will do, it's gonna encode the set of form elements as a string and prepare it for submission. And I'll console like, eight my data so that we can see it. So this is the data that's gonna be sent from the form, and we only have the one input there. But if I check it off, then the checks is on. So that's that is that's checked off the check box. I only have the two input fields there, but it's serialize is as many as you have, so it would update and serialize all of the form data that allows you to submit the form data. And I do have an end point that we could simulate doing a post off the request to. So let's set that up where we can send the data into the post and then see it being output into the console. So trying that and set up using the post and that now this method that's going to be used here is the post method, So we need to provide the endpoint URL. So this is when you can also use for testing. Eso just gives you an endpoint to test your post requests, and it simply just returns back the response data. So if in the Post, it does require some parameters. So first ones the Earl the 2nd 1 is the data that you want to send. So this is a simulation of a form submission, and the do you have an option for some additional methods that are callbacks whenever it's done. So we wanna return back the response from the Web server and let's updates and output it for now into the console. And to set up an end point, you are gonna need some back end code to pick up the form information. And as we did want to focus on the J query is no back end code for Jake Worry. So that's what we're submitting it to a PHP server. So let's send the data over and it's done a round trip. So it's come back from the server and we see the value of Lawrence being added there. And if I update this, I can do test. And also, if I update and add additional form information, it gets returned back in a Jason format. And, of course, Jason and Javascript. That means that JavaScript can output that Jason within a JavaScript object. So try it it. And coming up next, I'm gonna show you the Ajax method, which will allow you to do all of this stuff just within the one method setting the parameters within the object. So it's coming up next. 26. 25 Code Challenge jQuery Ajax Method: in the last. Listen, we got introduced Teoh Ajax. So we saw that we can do a post weaken, do a get so they're different methods. And also we can load on external page into our web page. So those were all options that we could use. And in this listen, they're going to be looking at one that does everything all together, and that's gonna be just the jacks request. So instead of specifying the get let's update thes and Ajax and for Ajax, it requires some parameters. So the parameters that requires, of course, it needs a you Earl so specifying the Earl. And that's just that your l value so that your l is also the property name. But we can also specify the type of requests that we're making. So in this case, we're making a get request. And then also, if we're sending any data that we can do that as well and on success, we can run a function or we can just specify function that we want to run. So let's run the success function, and this is just gonna be the response data from the server and all. Consul, log out data and get rid of this. Do you want to keep my name in there for the first name and then also within the my form when we submit the form, we're going to simulate that as well with the jocks request. So let's first try it and do it. Click me. So we have the event firing off, and then once it's completes that we see that data gets loaded there, and then we're all ready to use the data. So this is another way. And if you're just using the get, you can just use the get methods. So it's a shorter format. Or you could use the Ajax. They're both going to do work the same thing. And they're going to do this the same thing where we can make the jacks request and returned back the results. So let's update this where we've got the form data and update this to the Ajax request and create some space. So all of the prevent default is the same. The data is the same, and we want to send the data within the Ajax request. So we need the first thing we need is the URL so good that you are. L value here and then comma separated because thistles an object and then what type of requests we want to do. So this case, we want to do a post request as we're sending form data. So it's post and then data how we want to if we want to submit any data, and we do so, it's contained within the my Dita Variable. So it's coming from that serialized data from the form data. And then once we are done that we can reuse that function that we have so we can have the success and we'll run the success function and I can get rid of some of this. Clean the code up of that and let's see what this looks like. So refresh. And it looks like I've got a syntax error there and try that one more time. Now let's send the data so the data is sent and we get our response back from the data that's being sent. So its sense of more data so again sent the data, and this is coming back from the server as a Jason object. So there is a challenge for you within this lesson, and that is to update and create a typical form that you could submit data to. And you can use this endpoint as endpoint that you can submit the data to. And then once the data comes in than update the message area to say thank you, you're message has been received and I'll show you what the end solution looks like. And then I'll leave it to you to try the core doubts. And then I'll provide you the solution afterwards. Okay, so the end result is we're still using the same HTML. And of course you can customize this as needed. So the objective here is that we've got the two input fields we press send data it sends the data over to serialize is the data sends it over to our endpoint. We get the endpoint response and then that response. Once it's successful, then we're gonna update the content contained within the form data that just give the user a message that says Message sent. So that's the objective. And that's the courting challenge. So give it a try, pause the video here and walk you through the solution coming up. So it's go first into the html and we'll update adding in a few inputs. So you've got first we've got last. We don't need the check box anymore. But weaken, of course, keep that in and then the send data. So this is good enough for us for right now. And now we could go into the JavaScript and all are for now, I'll commentated. All of this is just a big block comment and we'll start fresh with the code. So first that we want to do is we want to add an event listener to the form so already had that within the last one whenever the for miss submitted. So let's do, ah, event listener on the form. So that's the value of the element with the idea of my form. And we're gonna listen for the submit event and whenever the form gets submitted that we're going to run the anonymous function within the submit event, and the first thing that we want to do is prevent the default action. Otherwise, it's going to try to move to another page, so prevent the default action on the form, just as we did before. And then we want to get the form indeed A and I usually typically do it within an object. First eso case, I do have any bugs or issues. Then I can take a look at what's contained within the my data. So let's select this and then selecting the my form data, we're gonna serialize it. Some codes, all of the form elements into a string ready for submission. Consulate log might data just to make sure that we do see it and that it is working and send data. So the data is being sent its picked up in its serialized. So it's met. Ready? It's ready to transmit. And now this one is up to you. You could just use the Ajax or you could use the post request. I'm going to use the jacks request for this demonstration and add in. So the first thing that we need is the girl, and I'm gonna just simply copy the URL that I was using earlier. And if you do have a server that can respond and pick up your requests, you could use that as well, of course. And then we want to specify the type of request. So this is a post and then for the data. We wanna send over the contents of my data. So just as we did before, where we're just specifying the my data and then on success that we want to run a function , it wants something to happen within this function. And this is where we want to update some of the output content that the form data was successfully submitted. So we'll console log, and maybe we can use the response data and select the element with a class of output. I'm gonna apply some styling to it and then within its will provide a message of message sent, so we'll update the tax content of it. So let's try that and update So information hit the send data and then once they're round trip has done, Once the data is sent to the server, we get the response back, and then we're updating the information to the user, and you could as well also update the my form. So in case you don't want users to constantly send the data that can update the form and then that loot that just has that message sent so they don't have an option to submit once again 27. 26 Each Method jQuery: in their lesson, we saw how he can connect to on endpoint and return back a whole bunch of data. So what do you do when you've got so many different results? And you want to look through the results and maybe output each one of the first night, the title of the first name and the lasting for each one of these? Well, gee, query is a really nice, neat solution for that where you can iterate through them and I would put them individually . And that's the each method in G query, which allows you to loop through and get each one of the items that are contained, that air matching within the index and this could be used and this is perfect for it. Use within on a rate. So let's set up and make the each one clickable. I'll update the text to say, Click me and add a click event to it. And so whenever the click event is fired off, then we're gonna make our Ajax request and return back that content from the URL. So it's gonna be the same content that we've got here, and we know that we're expecting ah 100 different results within their results. Object. So let's ah, loop through them and select Make the selection will return back the content that's contained in there. So again you could use get so get sometimes a little bit easier. Just get the girl and then with get then we can return back that you l contents. So you specify the URL and then we've got the handler function that is gonna handle when we get the content back from the response object and all that put the data into the console. So click me and now we get the results into the console. So what we want to do is want to look through all of these results. So where we have the re in this particular a p I is under the returned data object and under results. So we need Teoh Lupe and get to the object that we want to use where we've got their way. And then this is gonna have a length. So let's click it, and that's going to return back just all of the results. So, within the results, we want to select the name object within each result, and then output the title first and last. So how are we going to do that with J. Cory? And the solution is relatively easy, because since we've got the A rate object, we can loop through each one of the items within the array and output that So we're going to be using that each method. And we need to specify the data array that we're working with that's contained within data dot results within the data object and then what we want to do with each one so we can specify a key and a value. So there's two that get returned back Sochi and a value. And for now, we're just output that content into the console. So let's hope put the key and value into the console. So press the click me so key and then the value that's being returned back so that he is going to be the index value from the Ari and the value is the one that we're off, too, because that's gonna be where we've got all of the data contents. So update that, and we don't need key anymore. We just need value and let's look at name as it's contained within the name object. That's where we're trying to get the title. And first let's see how that looks right now. So we're getting the title first and lost. So it's all within an object format. So that means that we can output it into our Web page. So let's select the elements with, ah, class of output and update the inner text of it. So it's probably better to just create a blank HTML value and then use that HTML value in the output after we finished the loop. So we'll output that and set up sending in some HTML and just have the HTML object because it's going to be easier to work with this as a string object so that we're adding to the HTML. I use the template, literal solution that just the back ticks and selecting out each one of the vow name and title. And then we've got first and lost. So let's create the spacing there and first. So I'm just navigating to the object value using the properties title and last So hopefully if I have it correct and we're gonna build a giant HTML object and then update the output HTML with whatever value we've got there, So let's see what happens. So you got all of those values being put there, and let's also, uh, Landry so that they each get an individual line. So click me and there we go. So we've got the full listing of all of the names and using the Jake way to loop through it so you can also loop through different elements on the page. So if we want to look through all of the list items we can use and loop through those as well, so let's create another clickable elements. So use in the H two and updating the text of the H two and just that has slightly different message and on Click will run a function. And within that function, then this is what we want. So whenever that skits clicked, we're gonna select the list items, and we know there's a number of list items, so we want to look through each one of the available list items because we're returning back. If we do the list item, it's going to return back injury of objects. So let's do the list. Item sits, returns back 12 items that are matching that search function, so returning back each one of those and within that output will do the same thing that we did hear were output. The text that's contained within each one of those. So, as we look through them will build that HTML objects let so just a variable name called HTML. And then, as we looked through the list items, let's take HTML and we'll update HTML with the content contained within each one of the list items. So we get the content that's contained within each one, and then we're gonna out put it to the output html. So let's try it and refresh and click me. So first we get undefined because we're doing the plus there. So let's set the html value, and we should also do that just to be blank. Otherwise, we get undefined for and refresh because the reason we were getting on defined is because we've got a plus equal sign. So it's adding to whatever HTML is, and at the moment when we first time go through where we don't have any value for that html object. So that's why it was getting defined so very else. We've got all of the elements, the list items that get listed with an output HTML. And then we also have the reference to loop through the return content from the jocks request. So good tried these out and try going through and listing out different values that you have within a reformat into your page using Jake worry each method. 28. 27 jQuery Traversing DOM Tree: in this lesson, we're gonna be looking at G Cree traversing. And what traversing means is that it gives us a way to move through the page elements within the HTML code and we can move up levels. We can see the Children of the parents, so it gives us an option to traverse through and select different elements from the one that were initially selecting and get the relationship between those elements. So we've got an example of the parent element. So if we want to get the list item, but we want to get whatever the parent is and check to see if it's an unordinary list, we can do that as well. So let's select the list items and add a click event to the list item. So whenever it gets clicked, then we can pick up the event information, and also we can get whatever this parent object is by using the parent method and put that how about we have put it into the console so you can see the contents of the parent. So for any one of the list items, they all gonna have the same shared parent, so it's gonna be the an ordered list and also for these list items. It's gonna have a different parent there, so it's gonna have that one as the list item. So what can we do with the parent item s so we can do the same thing where we can select and we can toggle properties on the parent? So let's select the parent and let's apply. We're gonna toggle class. So toggle the class of red, a number of classes there within the CSS. So every time we click it, it's toggling the red on the parent and see these air two different parents, So each one of them has the option to toggle through where you can toggle the parent content. You can also return back parents disappearances all the way up to the documents route elements. So this is looking at all of the parents. So instead of parent parents and let's see what gets returned back for parents. So there are four parents for this element, and this one has three parents. So that's the HTML, the body and the an ordered list. So 1st 100 list body HTML, and in this case we have the dead that's in the middle with the name of mean, so we can see that this element has value of mean. So because we learned about each in the last lesson, we can apply each and loop through each one of the parents and out put them onto the console if you wanted to. So using the each method and then the array that we want to look through. So it's the parents and then taking the values from the parents. We've got the function. We've got the key and the value and Consul log at value of each one of the parents, and we'll see what that looks like. Now, when we click the list item and let's open the consul, it's gonna list out all of the parents of that particular element to just simply out puts them into the page and notice that the furthest parent HTML object also has all of the other elements in sight. So it's an interesting thing to note. So the parents of the element are the accidents. Eso they're the ones that are ascending. They're the ones that it's contained within. There's also Children that we can have from the elements. So let's make a selection of an elements and selecting the elements with a class of mean because we know this one has a bunch of Children in it. So let's add a click event to this element, and we can output the Children that are contained within this element. So first will use the consul log and then output each one of the Children. So using this and then the Children method in order to output them. And I'll get rid of this in the Consul, the click of the parents to get rid of the ascendance. So when I click on it, it's gonna show me the Children and it's got the one child. So it just shows me the first child, because this one only had the one child, which was the an ordered list. If I select the UN ordered lists, which might be a little bit of better option, then that will show me all the list items that contained within it. So selecting out all the list items and also knows that, well, it's an array based, so I can actually loop through each one of them. And if I want to do a quick update of the content contained in them. Eso That's actually just a quick challenge. If you want, you can pause the video, tried it and all. She had to do that. So just just updating the content, counting up from 1 to 6 and updating that this was selective. And that's using that each method. So, just as we saw before, use each and then let's loop through the a rate object, which are the Children. So it's all those list items, and then within the function, we've got the key and the value that's returned back by default. And we want to update the value text content to be new text. So as we looped through and this one's gonna be a little bit of a trick, because now it's just referring to the JavaScript Dom object using vow. So we lose the ability to do the GE Corey methods. So the objective is to try to be able to use the J Coury methods and use the geek or e e que. Taking the key value, and then we're going to set the text for that one, and I'll also add the key value over here. So what do you think this is going to be a good solution isn't gonna work. Is it gonna update the text? Oh, no. The text is not updating. We don't see any of the content being updated, and it means that we need to go back and check out what's going on here and look at where we're using this cause that's where the issue is here. That this is referring Teoh within this scope. And whenever we're referring to this within sight of each, it's referring to the scope off, not element. So this is no longer referring to the UN ordered list. But it's referring to each one of the list items as we iterated through when we're using this within this scope. Now it's referring to each one of the elements. So if we were to Consul Log yeah, this and if I refresh it, we get the list items. So that means that we can just use this and update the key because now it's referring to the current active element, and we don't actually even have to return anything back within the function arguments. So let's try that one more time, and actually we should keep the key in there because we want have account. So now it updated the text. And let's just add one more to the key so that it starts out with one and one more time. So now we're updating all of the text of the Children's. As we looked through, it was a few more that we're going to be looking at how we can find different So Samore methods of traversing coming up next. So go ahead and try out this exercise and get more familiar with looping through the descendants and the ancestors of each of one of the selected elements. A could be right to move on to the next lesson. 29. 28 Filter and Find jQuery: this lesson, we're gonna be using the find method so that find returns the descendant elements of a selected element all the way down to the last descendant. So let's see what we can find when we apply it to the element with a class of mean. And this is the one that has the UN ordered list in all of the list items. So we're gonna look to see what we can find when it gets clicked. So let's actually at the click events and then the function and then within the function, we're gonna run the code and find on this using this and the find method, we want to turn back the list items that are found and first Willow put into the consul so that we can see what gets found. This is going for all of the descendants that our list items I'm gonna also do a quick update to the code. So if we have a list items and then we have another a Nord, let's do an ordered list and then we've got a list item in here. So do you think it's gonna pick up these list items as well? Was it's searching for list items. So these air more list items within the UN ordered list. Let's loop through, and we click it so it does pick up the other list items. So it is doing its returning any one of the descendants that air matching the search criteria. So if we wanted to find whichever list item and get put the text content of it, let's once again use each. I'm gonna loop through whatever the results of this are. And then, as we're Iterating through, we're gonna output and try out the content and I put into the consul. So last lesson we saw we could use this in order to get whatever the active elements, whatever is being referred to as the active element. So that means that we could also had put the text content that's contained with each one of those list items into the console. So let's try it and click. So there's all the text content that's within each one of the list items and notice that this one had the 123 since that was the text content off that list item. So that's a list item, but it's got a nor did list inside of it, and that's why that one got returned back with all of those values that we had within the list items. There's also ways to move to the siblings of elements. So let's try out and check out just different siblings of elements. So do the H two at also the click action. So it'll look for whatever the siblings of this particular element are, and I'm gonna apply the well. I put it into the console first. So taking the current active elements using this and taking the siblings and this is going to return back any of the siblings, we can also specify what siblings we want to return back. Eso see what happens with the H two, and it returns back eight siblings so that each one is a sibling. The forms are siblings, dibs, so siblings or anything that's on the same level as this one within the HTML code, and that also includes the script tags. So if you are clearing those than just make sure that you're aware that you don't want to be selecting ends removing any of the script that you have. If you do have some javascript in there and g quick eso also let's see what's next to it. Eso clicking it again and next to it is the form that's this element that's over here. Whenever we highlighted we get next, we could also do a next. All we can do a previous all. There's a lot of options that we have are just gonna out. Put them into the consul, and you can use each to loop through them as needed. So let's get the next all so the next would only return back that one object. But it's still within that ary format and the next all again within a reformat. So if you did want to access each one of those, then you'd have to look through them if you wanted to. You could use the each loop as well. There's also previous, previous all as well. Eso is similar to what we saw with next, except it's going to go the other way and those they're gonna be previous, and I believe this one on Lee just has the one previous and so both of these values should only return back that each one let's see what happens. So it does only just have that one h one as the previous element. There's also filtering where you can filter the elements. So within the main where we've got the list items, let's select the 1st 1 from the list and keeping this as Jake Worry object. We can use first in order to reference the first object that's available in the list. And let's add a class to it and will of the class of red to it. So let's see what happens and we click it and it's going to select the 1st 1 and add the class of red to it. You can also filter, and once you've got it within a list, there's also last. So let's add the class. I believe we do have a class of blue. Let's try it and add the class of blue to it. So we click it and that's I should say it last. So click it. So that's the class of blue to the last one in the list that matches that query. And remember this. This also has an a Nordic list, so these ones are going to be the This is the 1st 1 This is 2nd 3rd 4th and so on, so we can go through them and we can select it by the EQ. You eso the EU que method returns a specific index value for an element, and we can still keep it within the object format. So dot e que So let's say we want to select E q two and update the style property value of it, and I'm gonna update the background to be purple. So which one do you think is gonna B e Q two In this list of list items that we're clicking here s o the E Q. Two is going to be this one here. So this is the 2nd 1 that it's finding within the list. So there's one. And then there is number two as the list items, so number one would be this one here. So if you want to apply a background so it 012 and that's why one the on ordered the nested list. The first item there had the list value there. So if we select one that's going to apply it to that second list item and effectively updating the background color for the entire list item which also is for the an ordered list. So that's how you can specify that. You can also use the filter. So elements that do not match the criteria removed from the selection of the filter. So if we want to check Teoh, see if any of the list items and if, for instance, maybe they have a class and I just quickly add in a class of highlight and I'll add it into a few of them that I have within the list, and then we'll filter on the class of highlight. So let's ah, console log and see what gets returned back here. So we'll take the list items that we've found and then apply a filter to those list items and we'll look for the only the ones that have a class of highlight and return that information back into the consul. And then again, we could go keep traversing down onto those ones so into the console, and it looks like we've got three that have a class of highlight so we can select those ones. And if we wanted to, we could apply background color of yellow to those so it sounds like a good idea and let's do the background color of yellow to those three. So anyone's that have highlight are now going to have the yellow highlight. You can also use not. So what not does is that's the opposite of filter. So everyone that doesn't have highlight. And instead of filter, let's do not highlight, and we'll do a background color for Green of those ones. So what do you think is gonna happen here when I click it? And if you said that all of the ones that don't have a class of highlight are going to get green, the highlights are going to get yellow. You're correct. That's exactly what happened. And now it's up to you. Try it. Try it all of the different ways to select the elements, the accidents and the descendants, and then also just different ways of keeping it within the J coury object so that you can use all of the J Corey methods still on the selected element 30. 29 jQuery Conclusion: Hey, welcome back hand this essence going to be a quick overview of where you can go from here with G query. So with J Crew, we've gone over quite a bit of what is available with Geek Way and obviously on their main website, this where you're going to get the latest and greatest information about G. Cree. So there's also the light footprint Seacon use the late G query, and they also have some court examples, of course, and more information in general about what you can do with G Koury. There's also the death ducks, where you can load Jake weary, and this is also loaded with examples. So Jake, right by default, isn't going to be one of the top ones here. So you just have to sit and go under disabled and enable it. And then that's going to give you all of the J. Corey content that we've gone through. So there's the jacks, calls more details so you can select those. It's going to give you the format, the description, the syntax for it, and then how you can load the content. There's serialize that we also looked at, and the different callbacks of the objects. There's handling of the data and the events effects. So we went through the all the different animation effects that we can do. So that was all under effects. There's events, so the different types of event listeners and there's a whole bunch of different event listeners, so we just covered only it. Just a few. There's different event listeners that you can apply. There's even ones a double click for the mouse events manipulation. So where we can add classes before after and how we can get the attributes. Also, how he can toggle the classes so that was all contained in their miscellaneous has some really good useful methods from J. Craig Find out more about them. There's the utilities. Each was a utility. There's also in array is array. So that's also useful is numeric. So all of these air useful utilities that you can utilize with bakery there's the traversing. So we did look at the traversing in just the previous lessons. There's selectors just different ways that you could make selections of the elements on the page, and I always do suggest to check it this type of documentation where it's going to give you just more information. More examples that you can try out and try within your own projects to get even more familiar with how you can work with J. Coury. Thanks again for taking. Of course, I had always happy to hear from you. Please let me know if you have any questions or comments, and I'll see in the next one.