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

Michael Martin

39 Responses

  1. Simply Beautiful!, By the way without JavaScript you can actually work with this syntax but for to be work in a professional way you must learn JavaScript first.

  2. Thanks for the great tutorials!!!

    Is there any way to save the action so if we came back to it later, the panel was in the same status (for instance hidden) as we left it last time?

    What happens if someone else on the same network has the same html file open. Will the actions reflect on their monitor as well? Assuming that they have both opened the same html file from a shared drive?

  3. Thanks! I am a beginner in web development. Your explanation is very good.. Keep it up!… Now I am your new subscriber

  4. Add the HTML and provide source code because that is missing here therefor this tutorial is only 75% complete as beginners need it to reference than leaving a question for you and hope you reply ….Ca-peach~

  5. OMG It's your great teacher i saw 20 videos before i can't understand but ur video explain very well dude keep going rock it

  6. you are so different, you say i do not have to know exactly what is happening before actually using it. That is 100% different then they teach in school. Thanks for being fun.

  7. I'm watching this course after completing jQuery basics course on teamtreehouse and its really helping me understanding better

  8. Hi! Why is adding a "display:none" field to an html element considered "the wrong way"? What did you mean by that? I know it's a bit off-topic, but I'm new to web development and really curious! at 6:15

  9. Your simplistic way of teaching is awesome! Do you have any course in Udemy Lynda? I have basic notion of html, i am old 44 , what language do you recommend me to learn which can get a job also? thanks!!!

  10. $(function(){
    $(".class").click(function(){
    $(".class").slideToggle(200);
    });
    });
    i think you can do this also much easier.

  11. Well I actually smiled while learning coding when you hide the panel one and couldnt bring it back 🙂

  12. Bro why am i told '$ is not defined' when i am trying out the codes….. Please help me guys~
    <script>
    $(function(){
    $('#btn1').on('click',function(){
    $('#panel1').slideToggle(250);})
    });

    </script>

  13. I Like The Teacher For Fast And Clear Style Of Learning …
    and of course clear english language 😉

  14. Man so complicated that panels, idk how to make them, but jquery seems easy.
    I want to cooode
    I wish im youu 🙁

  15. Whats' the difference b/w using $('#btn1').click(function(){ $('panel').slideToggle(200) }); vs your version with .on event handler?

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment