jQuery Tutorial for Beginners

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 or methods as they're

called one I didn't show you is the HTML method so if I go BTN one let's get grabbed 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 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 we're 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 users doing and do methods when the user interacts with our page so we're

going to do is let's give an example 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 closed parenthesis open closed 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 parentheses 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 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 that'll make it a slide toggle at 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 1 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 1 now didn't I so I can't actually bring it back without refreshing my page 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 1 to go away so I can actually make it fade out I 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 let's go into a little bit more clever usage of this so let's say we add

button 1 let's assign these buttons to each one of these panels BTN 1 I think is what they're called b10 1 panel 1 fade out there we go I'm going to go button 2 you're going to do

panel 2 I'm going to do button 3 does panel 3 + button 4 does panel 4 there you go so now each one of these should go away go away go away go away come back alright 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 toggle meets 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 because this is

already kind of too much we don't really want to do it this way and so then when I click I'm going to tell it to fade back in so now I have four mouse overs on mouse-over we're going to fade out

and when we click we're going to fade back in fade outfit outfit out click will bring me back in there we go that's a super fun way of doing things 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 fine I'll just go panel 1 dot 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 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 defaults and then the button will activate them you'll get to show them so button one on click panel one dot show ah let's get in 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 2 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 because

there's no way you actually need to do this one 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

This second part of the jQuery Tutorial for beginners will show you how to do event binding with jQuery. Events happen whenever a user clicks, hovers, drags, types, or does pretty much anything to interact with an HTML element.

jQuery allows the web developer to easily write a program to listen to these javavscript events and modify the webpage in realtime. This is often called a dynamic website.

You can do all of this in plain javascript, but jQuery makes it incredibly easier.

Previous Lesson – #1: https://www.youtube.com/watch?v=hMxGhHNOkCU&list=UUVTlvUkGslCV_h-nSAId8Sw
Next Lesson – #3: https://www.youtube.com/watch?v=Cc3K2jDdKTo&list=UUVTlvUkGslCV_h-nSAId8Sw

-~-~~-~~~-~~-~-
Also watch: “Responsive Design Tutorial – Tips for making web sites look great on any device”

-~-~~-~~~-~~-~-