jQuery Tutorial for Beginners

jQuery Tutorial #3 – Writing Smarter, Better Code – jQuery Tutorial for Beginners

okay so Jake we're number three if you didn't catch one and two they're in the description we're just going to move on so where we left off is we copied and

pasted this piece of code four times because we were listening to four different buttons and we wanted to interact with four different panels it's not bad

there's nothing wrong with this but it's terrible in that this thing is going to be huge if we're a little bit smarter we can actually make one thing that listens to all the buttons and talks to all the

clap the panels so let's do this I'm going to show you kind of a couple different ways that you can do this before we get into that I need to show you how we can target by attribute let

me show you real quick what I mean by that I'm going to add this button and if you guys know from html5 if you go data – you can make your own attributes I can go data – panel equals panel one and so

then what I can do is I can actually find with jQuery I'm going to go over here to my console and just do it real time I'm going to look for a button that has an attribute of data panel equals

panel 1 yep there you go and it found my button it's that first button so you can see if I use these brackets I can enter any attributes I can actually do this if I want to do ID I can actually search

for ID because ID is an attribute ID equals BTN 1 so you go same thing it found the panel that I found the button that has an ID of BTN 1 so that's how we search by attribute so I'm going to do

now is I'm going to actually add data panel and I'm going to add the panel ID actually go panel ID how's that makes a little more sense and then I'm going to put the ID of the panel that it relates

to panel two equal panel one panel to panel three panel four all right so let's get rid of this copy-paste we're going to be smarter a good rule of web development is dr why do not repeat

yourself well don't repeat your this before this was not very dry we need to do what's called dry it up we need to stop repeating ourselves and

write this one piece of code that does all the things that the copy and pasting would have done so now instead of button one let's get rid of these IDs here and we're going to add classes instead panel

button so now these are all going to be a panel button because you'll know you can only have one ID but we can have multiple classes so now instead of targeting by ID we're going to target by

panel button and now this one rule is going to listen to all panel buttons whenever you click so now if I click on panel button one or if I click on button any of the buttons it should be toggling

panel one so progress not where we want to be yet but we're getting there so now what we want to do is we want to do something that's called let's get the ID panel ID panel ID equals and we don't

know which button was clicked because it might have been button one it might have been button two might have been button three might have been button four so we actually want to do is this no prep no

quotes no double quotes just this and so what that means whenever you do jQuery this it's going to take whatever the action was on and we're going to start using that guy so I can go this dot attr

data panel ID so that's going to look for an attribute of data dash panel ID that's going to give me what that is so now panel ID if I go alert panel ID what it'll do is it'll get the panel ID

and then it will alert it to me here I'll show you panel 1 if I click here panel 3 so now we know what panel we want to do something with great we're almost there

so instead of alerting panel ID I want to do hash + panel ID because I didn't store the hash up there I guess I could have stored the hash up there if I wanted to I but for the sake of the

lesson I'll show you how to put two strings together so we're going to put the hash plus panel ID which doesn't do addition it just kind of bumps them together so hash plus panel

ID toggle so now we're going to listen to any panel button and when you click on it it's going to grab the panel ID out of that button and it's going to then go find that panel and toggle it

see if it works nice nice and we win we dried it up we added one more line to our code and we have a much much cleaner thing you another way you can dry stuff up is say whenever you click this you

want to show it and you want to you know give it some new content so what I can do is their contents equals a new awesome content so now I can not only toggle it but I can make sure that panel

ID plus panel body HTML is content no no quotes no double quotes which means I'm looking for a variable if I did quotes like this it would change it to the actual text of cont ent which is kind of

what it already is I don't want that I want it to look for a variable called content that I made up here I made a variable called content I said it's my awesome new content so now it should

there you go they're automatically going to get my new awesome content great another thing you can do is you can do HTML empty quotes to just kind of clean it out so now when you click on it

nothing at all so that's kind of a way that we would dry up jQuery and start to reuse things that's also how you find out more information about who has clicked that this thing this I could

also go this attr ID if I wanted to find out the ID of whoever was clicked on that's going to learn my ID whoops can't do that because there are no IDs anymore

I got rid of the IDS didn't I yep well if the IDS were still printed on here you'd be able to do that so anyway that's how you dry up jQuery

With jQuery is easy to make things happen, but easy doesn’t always mean right! In this lesson, we’re gonna make our 20 lines of code compact into 4 lines of code…and it will be better code

This will involve selecting HTML elements by classname and getting a custom HTML5 attribute value with jQuery.

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

Lesson #2: https://www.youtube.com/watch?v=G-POtu9J-m4&list=UUVTlvUkGslCV_h-nSAId8Sw

Lesson #4: https://www.youtube.com/watch?v=LYKRkHSLE2E

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

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