jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners

okay so jQuery lesson number two if you missed lesson number one I'm going to put the link in the description you're definitely going to want to see that I'm also going to get a link on the screen here you should see that if you're not on mobile let's move forward so in the last lesson I showed you how to do jQuery actions um or methods as they're called uh one I didn't show you is the HTML method so if I go btn1 let's get grab button one I can do HTML and I can actually change what's in the HTML code so right now the code is just that button one text so now it's called my button that's kind of fun so what I actually got to do is I got to rewrite what's inside of that HTML element let's look at panel one here that's this guy this div um and what I get to do here is I can actually rewrite the entire inside of it so I can go if I do panel one HTML my panel so there you go all the elements are gone that were inside and now the only thing inside of it is text that says my panel I can even add new tags bold not bolts this isn't too good of an idea to do very much of but you can do a little bit you can add a tag or two and it's not considered a bad practice okay so we know how to do jQuery methods so let's listen to what the user doing and do methods when the user interacts with our page so we're going to do is let's give an example when we click on button one I want this panel to show and hide so let's go button one we start with the thing we're wanting to listen to and the method is called on and then we give it a event name this is a JavaScript event name so I'm going to go on click the first these are called arguments that I'm passing here the first thing I'm giving it is listen to The Click event and then I'm going to go comma and then I'm going to give it my function which you'll recognize from up here open close parenthesis open close curly braces so anything in between those curly braces now will fire whenever the click event takes place so now I can go I'm going to add the pr seed or the semicolon to be a good guy now I can go panel one hide actually I'll just go toggle that way it'll show and hide Whatever It Isn't So when I click on button one it's going to run this function and it's going to toggle panel hey would you check that out let's actually make that slide toggle this is something you use probably I'll make it a slide toggle of 200 there you go slides and is beautiful let's make it when I click on the panel I actually want it to hide that panel itself so when you click on panel one there you go it's gone now I can't actually click it to toggle it back so I have to hit the button to well I took away my button one now didn't I so I can't actually bring it back without refreshing my page um but that's how you would do that if you want to get rid of things I could make an x button inside of here so when you click that x button it tells panel one to go away so I can actually make it fade out that might make a little more sense click and it's gone and that's a lovely way of doing things you'll notice I changed the panel I didn't remove the whole column which is why those things are sitting there so um let's go into a little bit more clever usage of this so let's say we had button one let's assign these buttons to each one of these panels btn1 I think is what they're called btn1 panel one Fade Out There we go I'm going to go button two you're going to do panel two I'm going to do button three does panel three and button four does panel four there you go so now each one of these should go away go away go away go away come back all right did I just do Fade Out yep let's do Fade toggle do my Nifty Sublime Text multiple cursors there there you go any order now I actually have a pretty living breathing page nice let's actually change this event from click to Mouse over something you might want to do sometimes and it's going to going toggle them each time now I get to do some fun crazy you know everybody's got to do that when they make something like that right so there you go and mouse over I can make it to where all it does is Fade Out and you have to click to bring it back in Mouse over it's going to fade out I'm going to copy and paste all of these you notice it's pretty easy to get a mess of jQuery in the next video I'm going to show you how to clean this up cuz this is already kind of too much we don't really want to do it this way um and so then when I click I'm going to tell it to fade back in so now I have four mouseovers on Mouse over we're going to fade out and when we click we're going to fade back in Fade Out Fade Out Fade Out click will bring me back in there we go that's a super fun way of doing things uh what I can also do is I'll teach you one more method here so let's go on click function on button one click panel one we are actually going to go find and now we get to look inside of panel one what I want to do is panel one body panel body this is what I want to change here I'll go panel actually I won't do find I'll just go panel one panel body and I'm going to change that HTML to my new panel content so now I click on that my panel content will change to my new panel content nice very good so that is pretty much how you listen to events and then tell your page to do stuff one cool thing you could do is I could have all these panels hidden by default which I could do you know with a CSS class um or in this case I'll just make it I'll do it the wrong way here and go display none so now all these panels are going to be hidden by default and then the button will activate them and you'll get to show them so button one on click panel one. show ah what's going toggle so on button one click panel one will toggle so they're all hidden there you go and now I can copy and paste that to button two if you're using Sublime Text by the way Apple D is what gives you multiple cursors like that there you go so now they're all going to toggle whenever I hit these so that's kind of your intro to listening to jQuery events the next video we're going to show you how to clean up your jQuery cuz there's no way you actually need to do this when they all do the exact same thing I'm going to show you how to clean that up how to reuse some stuff in jQuery and just how to make it a little bit more professional so catch that video next and have a good day