Learn JQuery: A Fun And Simple Introduction! | Rich Armstrong | Skillshare

Learn JQuery: A Fun And Simple Introduction!

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 19m)
    • 1. An Introduction to an Introduction

      0:55
    • 2. What is jQuery?

      0:55
    • 3. Things You'll Need

      0:51
    • 4. First Steps

      6:27
    • 5. jQuery Selectors

      9:28
    • 6. jQuery Traversing

      7:05
    • 7. jQuery Events

      9:05
    • 8. jQuery Getting and Setting

      14:26
    • 9. jQuery Animation

      10:59
    • 10. Build Your Own Accordion

      15:55
    • 11. Share It!

      2:43

About This Class

bf05bfdc

Wanting to take your website building skills to the next level? Want to write JavaScript that's easy to code, quick to code, and works accross browsers? Or maybe you've heard of jQuery but never known what it really is? jQuery will change your web life! It allows you to focus making the next big thing (or cool little thing) rather than worrying about cross-browser bugs, optimization, and writing massive amounts of code for almost everything you're wanting to do.

This class is a fun introduction to jQuery, and covers the basics! The class is structured in an easy-to-understand way. We go step by step through writing your own jQuery, and what it all means – through a few simple examples :)

If you're new to building websites I have a beginners class on building your first website with HTML and CSS and a beginners class on writing JavaScript. I'd suggest doing these beforehand, or having a basic understanding of HTML, CSS, and JavaScript (only the basics needed).


If you're looking to get into coding more, check out my other coding classes:

Transcripts

1. An Introduction to an Introduction: Hey. This class is an intro to jQuery. If you're making websites, jQuery is equivalent of one of those Swiss army knives or multi tools. It's amazing, it's rad, it's easy to understand, it's simple and it has this really big online community. It's been around for ages, there is plugins, there is tutorials, there is a lot of stuff available for you. It's something that you want to learn. This class covers some pretty basic stuff and easy to follow formats and we end off creating this accordion that you can show your mom and you can show your jealous friends. Pretty nice, huh? To get going, you're going to want your PhD in quantum physics. No, I'm just kidding. You're going to want a basic understanding of HTML, CSS, and JavaScript. Basic understanding, huh? Okay, so join this class and know thy jQuery. 2. What is jQuery?: So what is jQuery? Well, it's written in JavaScript. So it is JavaScript, but it's special. It's different. It's amazing. It's rad. Basically it's a bunch of JavaScript snippets, pre-written snippets that make writing your own Java scripts way easier, much simpler, much better, and way easier to debug. Basically, there's a bunch of really intelligent people writing jQuery making it better and better every single day. It helps with things like HTML manipulation, Ajax, animations, CSS changes, event listening and works across browsers. It's well optimized. It's amazing. So it lets us focus on writing the next big thing. So when you learn jQuery, you'll be up and running and ready to do some really cool interactive things. So let's get going. 3. Things You'll Need: So we need a few things before we can get going. Make sure you have Google Chrome which is great for developers, great for debugging JavaScript, great for jQuery. Just download it and install it. The next thing we need is a code editor. I love using Sublime Text 3. So Google that, search for that and then download the one free operating system, open it up, install it and then the final thing that we need is jQuery itself which is a JavaScript file. So let's download jQuery and then we're just going to use jQuery 2.X. So if you right-click and say download link file as, I'm just going to save it in my downloads folder for use later on. That's all you need to get going. All right, [inaudible]. 4. First Steps: We have jQuery. Fantastic. Now, when you see that it works. Let's create a new folder, let's call it Getting Started. Fantastic. Now, let's drag this into sublime text. You'll see that my sublime text is a little bit different from yours, that's just because, I've styled it, I've themed it, I've put a bunch of plug-ins in it that makes my life amazing. You can do with yours what you like. First things first, let's create a new HTML file. Let's save this as index.html inside your Getting Started folder, Index. Let's write a little bit of HTML. I'm just going to remove that double walker. Let's give it a page title, jQuery Getting Started. Then let's just give our body some love. Let's put a p in there and say, "Hey, my name is", then I'm going to put a span here and I'm going to say, "Rich." I'm going to save this. The next thing I'm going to do is I'm just going to put a script tag in here and this is where we reference jQuery. You'll see that it's got a type of text Javascript. We don't really need this, but we can keep it there for now. You'll see that it says, jQuery 2.2.3.min. The two basically means that it doesn't support Internet Explorer 6, 7 or 8, which is fine for this purpose. But if you want to support those browsers, use jQuery 1 whatever. The next thing is, it's a minified file. That means it's really small. You'll see that it's 86 kilobytes, which is fantastic. Let's just copy this, and the source will be like so. The reason why I'm going dot, dot slash is because from index, I'm going to go up a folder which the dot, dot slash means, and then I'm going to access jQuery like so. I'm then going to put another scripture again. This is going to be our script tag. I'm just going to say script.js. I'm going to save this file. I'm going to say File, New File and I'm going to save it as script.js. Inside here I'm going to say, console.log. Hello JS. There we go. Then I'm going to write some jQuery just to see that jQuery works. I'm going to say, document.ready. Basically, this means that same document when you're ready, run this function, please. Then I'm going to say, "Hello there, jQuery. " But that's not all. To check that a WW works, I actually want to say, "Okay." That p with that span in it that says Rich or Hello, my name is Rich, let's change that to Mr. R A. Let's save it. Let's go to Google Chrome. Let's not go to Google Chrome, let's go to index.html and drag it into Google Chrome. Hi. My name is Rich. No, it doesn't say that, it says, "Hey. My name is Mr. RA." You can see that things are actually working. If you inspect, right-click inspect, or you can go developer, and then you say, "Developer tools", which brings that bar. Command ALT I or control ALT I if you're on Windows and then you go to console and it says, "Hello JS", or "Hello there, jQuery." Fantastic. Javascript and jQuery are working. Good news for me. But maybe yours doesn't work. If you didn't put that in your document ready, I just save that. You'll see that didn't quite work. That's because if it's not in your document ready, it's running the script tag before it's actually even got a p tag on the screen. Problematic. That's why I put it inside the document ready. Another way to do this is to cut that and put it just before closing body tag. I'm going to save that, refresh. There we go. It works. But I don't really like to do that, so I like to just keep everything inside my head tag. Now let's just put that back in there. Another thing that you may do is you may do something like that just because you wanted to copy the jQuery 1. You will get a big error. Just be aware of that. It's a relative path. Index is going to go up there script, and index is going to go upper folder into jQuery. So that's really cool. Another thing you can do once you've refreshed is you can actually just write some jQuery straight in your console. You can say, p span.HTML is Richard. Voila, it changes. We can then change it to Bob. My name is not Bob but you can change it to whatever you want. Another great thing is you don't need to go p spanning, you can just go span, and you can change that to Rutherford. Voila. JQuery is working, Javascript is working, everything is good. Now, let's go take over the world. 5. jQuery Selectors: Okay, selectors. I've created a new folder, which is much the same as the Getting Started folder. I'll show you exactly what I've done. I've got an index.html file, and I reference my JavaScript or jQuery, and I reference my JavaScript file, the script.js file. I've then got some HTML inside of a container and the container has a width, and it also has a margin of zero and auto, which basically means that sentence. I've put that in a style tag just so I can keep everything in one file. Then I've got some spans. You'll see some spans here, here, here which are inside p tags and there's a whole bunch of p tags. Some of them have ids, some of them have classes. Then I have an unordered list tag and with some list item tags inside of it. Getting back to finder, I'm going to drag in my index.html file and to Google Chrome and that's what it looks like. That's some pretty basic information. Now, if we go back to Sublime Text and open up our script file, our script.js file. I've got a basic document ready to function. Inside here I'm going to show you how to do selectors. Now, selectors in jQuery are pretty much this, which equates to something like this in CSS. A p tag, you could change the color of your p tags to orange-red. Nice color. So let's go to Google Chrome. You'll see that all the p tags on are orange-red, thanks to CSS. If we have to just remove this, or let's keep it actually. We can say, this p tag that jQuery is selecting, let's change the color to royal blue, correct? Save that, refresh it here. Now it changes to royal blue. We can actually change a bunch of CSS in JavaScript or in jQuery. All right. What's actually going on here? Well, jQuery is putting inland styles of color, royal blue, on all my p tags. If we have to just take this off, we can see that are. That color of orange-red is coming from index.html. If we put it back on, the inland style overwrites it. What's really cool here is that you can actually say p tags.CSS color then we can change it to something like golden red. We can see here what jQuery does or what a selector is. A selector basically selects a bunch of elements. JQuery basically selects a bunch of elements based on what you pass into a selector. Here, it's got a bunch of p tags and a list or in an array. See these little brackets. That makes it an array, the square braces or the square brackets. This is a really important concept because it means you can check things out of the array and add things into the array. Now what is this selector syntax or why is there a $ sign there? What the heck is going on? This aside, I'm just going to comment this out, which means that the browser want to read it. What is going on here? Well, this little $ sign is shorthand or shortcut for jQuery. Basically if saying jQuery, let's select this and that could be anything. It's basically like a CSS selector. Just like in CSS, we change, we select all the p tags with this syntax. In jQuery, we can do it like that. You can use single quotes here, or you can use double quotes. Then inside the quotes, you put your selected text. We could use p, we could say div, we could say the class name. We could also do an id just like that and I would select that based on what you seen through. I prefer single quotes. I also prefer using the shorthand, the shortcut, which is the $ sign. But let's just double-check that this works. I'm going to copy this and I'm going to clear my console and I'm going to paste this. JQuery select p. There we go. We could also say jQuery select list elements. We could also say jQuery select an unordered list. There we go. Any of these, you can right-click on it and say Reveal in Elements panel and there we go. You can see it in the Elements Panel. Or we can also do this, we could also say jQuery, get the uls' and the ps' and it will turn everything. You'll see that it puts all the ps first, and then it puts the ul. It goes from top to bottom in the document, searching for what you seen through, which is fantastic. We can also say get the lis and the uls and just like that, it will find the ul first with the lis. With something like that, we can actually change the CSS and we can say font size. We can say, let's change it to 40 pixels. There we go. Which is fantastic. That's the little bit about selectors. Your basic selectors anyway. Now what we can do is we can select things by class. So I've got a few classes here, like living. I also have an ID of pizza, an ID of pizza. If we say living, let's change the CSS color to royal blue, all right, and let's refresh. You'll see that just the ones with a class of living change to royal blue. Just like we can say, p.living will be the same. If we wanted to change the id or select the id of pizza, we could change this to golden red. There we go. I like pizza as a different color. Royal blue stands out a little bit more. We can also do a few other things, not just one line. I should show you that. Change this to green. We're saying all classes with living, that's changed the CSS and all IDs of pizza. Let's change the CSS, refresh, and there we go. That is basic selectors. Now we can also do some pretty interesting things. I'm just going to remove this CSS here just to make sure that, you know that jQuery is doing absolutely everything. I'm going to say p. I'm going to comment this out. Let me say p. Let me just say the first p and there we go. You can select the first p. You can also select the last p. You can also select the odd ps or you could select the even ps. There we go. There's a bunch of different ones in here. You could even say all the ps greater than zero. There we go. This is really handy. Another thing that I really like is the contains word or contains filter. So it's a selector, but it has this filter in it, which is this little colon or semicolon. You can say contains, then you put double quotes or single quotes, then you just be the opposite of your outside ones. We could say something like, let's look for live in and let's see what happens. Living is over there and living is here. Let's change that. So that p, it contains living. Let's change the CSS to royal blue. Well, the color to royal blue anyway. So that's really powerful. JQuery has a lot of filters and obviously at the basic CSS selectors. Another thing that we can do is we can say span, and I'll just show you what happens here. That's really great. Same thing. But you can also say all the spans inside of ps, just like CSS. There we go. That is basic selectors, basic filtering. 6. jQuery Traversing: I've already shown you selectors, but now we're going to use the same folder to do some traversing and a little bit more about selectors and filtering. I'm going to rename it. I'm going to drag that into Sublime Text, and then I'm going to drag the index dot html into Google Chrome. I'm going to inspect and go to my Console, and then I'm going to go back to Sublime Text. You'll see that I have this 'ul' and there's a couple of allies inside of it. Now inside my script tag, what I want to do here, is I want to pretty much do the same thing. But, I want to sneak my 'ul', and then I want to change the children. I'm selecting 'ul' and then, I'm going to get the children inside of the 'ul'. Just like I said that, when you say jQuery get 'ul', or maybe you said dollar get 'ul'. It brings back an array of all the matched elements. In this case is only one 'ul'. If you have to say things like get all the p's, there'll be quite a list. This is an array. What we can do now is we can say, JQuery get 'ul' dot children, which basically says, "Okay, get 'ul', get the children." Over here you'll see that there's no 'ul' in this list, but there's just the list items. Over here inside the index dot html, we only really have one place where there's children. Maybe these spans can work. Let's see how that works. I'm just going to clear my Console here, and I'm going to say, let's find a 'p' with children. There we go. I've got a bunch of children. I can also say, 'p' and 'ul' get its children, and it gets the children of everything. I can also say dot container, so get the element for the class of container dot children. They'll bring back almost everything. You'll see that there's no li's because it's not its direct child. What's really cool about this is that we can also say, get its children, but only if it has a class. I'm going to just clear my Console here, and I'm going to say, "Okay, 'ul' children, but I want the children with the class of travel." Doesn't give me anything. I wonder why that is. If we go children, fantastic. Excuse I haven't refreshed the page. Maybe refresh and let's try this again. There we go. I just get the one with the class of travel. Which is really cool. If I say children of the class of travel, let's say my siblings, which will give me all of the ones except for travel. I can say dot css, and I can say color, and I can change this to blue. Voila, change it to blue. What we're really doing here, is when I say children, it's a function and that function enacts on that array that was returned by that selector. We say selector, and that returns an array of elements, and then we say from that array, get its children, and then that children function, then gives us an array again. Still we can say siblings. We can pass in here dot travel, and then we can say dot siblings which will then give us an array, and then on that array we can then do something with it. We can say change the CSS color. I'm going to save that and refresh here, it's pretty much the same thing, changes the siblings. What is really cool here is that we can say, "Okay, let's find travel," and let's say, cool, I want the parents, or the parent, and I want to change the parents font-size to 40 pixels. I'm going to save that and refresh. Oh, I have an error. Let's have a look at what that error may be. Says script dot js: 5. Actually I didn't put any CSS there, so that should change it. Refresh. Fantastic. Change the parents CSS. If I were to inspect this element, you'll see that there's a font-size of 40. What's also really cool about this is that we can say all list items, change the font size to 40. But we can say dot not travel. You can see that there's many ways to skin this cat. You can do siblings, you can do parents, you can select things by class name, you can select things by tag name and then filter it, there's a lot of things. With that list element, what you can do as well is you can say, first, which is a great little filter, or you could use this little function. Same thing. You could also say 'eq' which means get this by number, or get the elements by number and say two, and there we go. That is traversing with a little bit more on selectors, a little bit more on filtering. With this now, once you've got your elements selected, you can now do stuff with it, like change the CSS or animate it, or change the data. You could manipulate the HTML, and you could do whatever you want. 7. jQuery Events: Events. I've got another folder which is pretty much the same as all the other folders we've had. Let's show you index.html. There's four buttons, and a play area. The script looks like that, and our html has quite a bit of styling in it. But basically there's three buttons, and then a form with a button on it, and then the play area. How do we do Events in jQuery? Well, we do this. We select what we want to do the event on. In this case, the button. You could go something like.on, click, and then pass in a function, or you could say something like, how about just.click, and pass on a function. They're pretty much the same thing, slight variations but in jQuery, this is the syntax for writing an event. You have your selector, where you have your selector here. Then you say, "on, click" and you say, "cool, on click, what must I do?" Pass in a function. Same here, say, "on click, what must I do?" You pass in a function. I'm just going to work with this button one for now. Say, "button, on click, console.log" do something. Here, I'm running to inspect, and then go to my console. Then I'm going to refresh, and you'll see. Do something, do something. That's doing something weird. We may have to address that. What's happening here is it's actually submitting the form. I'm going to say, "event.preventDefault." Refresh,cool that seemed to do the trick. Every events has an event that's given to the function that runs it. This function, it could live over here as a doSomething function. Then we just pass and doSomething, refresh, same thing or it could live as an anonymous function right here. That's pretty cool. What I want to do here is I can say, "form.button.click." Only then does, do something else happen. See nothing else happens here. If I refresh, you'll see nothing in the console. This is really cool. For now, I'm just going to keep it as button.click, do something else. That's pretty boring. Let's start working in the play area, please. What I want to do here is you want to select the play area, and we want to change the html to WOoooohp. However you spell WOoooohp. Refresh, and then bang. That's what's happening. You can see that you can get the same button to do the same thing. So if we have a bunch of different buttons here, they all do the same thing, WOoooohp. Refresh, WOoooohp. You get the concept, it's pretty powerful. You just have one function, one selector, one function, one event listener and you're set. What other kind of events do we get? Well, now that you asked, form button.mouseenter, Yeeeehhhaaaa. How about that? Yeeeehhhaaaa, WOoooohp, Yeeeehhhaaaa. Do you see? This one's don't have that Yeeeehhhaaaa because they're not inside the form. I'm combining selectors with events. I can say, "button.first, mouseleave," and I can say, "Awwwww bbyyyyeee." "Yeeeehhhaaaa." "Awwwww bbyyyyeee." What we can also do is we can do a double-click. Let's just copy, and paste that. This now we can say, "dblclick," and we can say, "Buzzzzzz." I don't know why I'm saying buzz, but hey. Let's refresh here. Then when you click this, double-click, Buzzzzzz, WOoooohp, Buzzzzzz, WOoooohp, WOoooohp, Buzzzzzz, Buzzzzzz, Yeeeehhhaaaa, Awwwww bbyyyyeee. That is events in a nutshell. You can probably make head and tail of our document ready now. You can say, I'm selecting the document which is a special word. That's why we don't need it in quotes, and you say, "When it's ready, run this function." Fantastic. Now we can shorten this because that's pretty long. The shortened version of that, is that. One more thing I want to show you is keyboard shortcut. We'll say. "body.keydown." I'm going to put a function in here, and we're going to say "html, Keydow." The play area is going to say, "Keydown." We're going to get to which key it is in just a second. Let's just check this. I'm going to press S, it works. Space. Escape. Enter. Fantastic. Let's give it an event. It's quite a lot of information. I'm going to log that for you. Event, and then I'm going to say, "event.keyCode" over here. I'm going to save that, refresh here, and press A here. You see there's quite a lot of stuff that gets given to us. It tells us that the shift-key is being pressed. It tells us the target, it tells us the type of event, it tells us the keyCode. I'm saying, "keyCode, 65." Escape. Went about the buddy. Escape. Enter. Space. F, G, P, E, R, whatever you want. What I want to do is I want to say, "boom," when I press Enter, so I'm going to press Enter, I see it as keyCode 13. Let's say, if event.keyCode equals, equals 13, and the equals, equals means you're comparing. If you just did one equals, you'll be setting it. We're going to say, the play area is html is BOOOOOOOMMMMM. Let's try this refresh. I'm going to press A, S, D, space, enter. BOOOOOOOMMMMM, and that is Events for you, jQuery Events. 8. jQuery Getting and Setting: This lesson is about getting and setting. We're going to still make use of all the things we've learned before, so let's drag in to sublime text. You'll recognize index dot HTML and the script dot js. Let's seen what we've got here. Index dot HTML and to Google Chrome. Well, we've got a bunch of buttons now, plus the missing link and the play area again. Nothing is going to work just yet, but let's inspect and get our console. Go back to sublime text, we've got a bunch of styling. Most notably though, we've got a play area with a class of groovy, which will change the background color, and we've got a play area with the class of boring. If we go over here and we inspect our play area, and we change the play area to boring, well, it goes very boring. If we change it to groovy, that is groovy. We've got a bunch of buttons and they've all got different classes and different HTML. We've got the missing link, a tag, with a target of blank, which means opens in a new window when you click it. Then we've got the play area. The missing link, when you click it, it opens, but you'll see it has that little hash there. Fantastic. What we're going to do is we're going to do sum different things here, that you haven't scene before, except for that which you have seen. Dot click, we'll just be using click for now because this is about getting and setting. Now, we're going to do some pretty interesting things. We're going to say console dot log, and we're going to say clicked, and we're going to say event dot target. I'm going to put the events right there. Let's refresh here, I got our console, it's telling us which thing we've bean pressing, which is fantastic. But now, we can actually change this around a bit. We can say, and what I want to do is to say, if it's this class, do this, if it's this class, do something else. If it's this class, do this and you get what I'm saying. With the same selector, we're going to checked if it has a class and then do something different. On the button click, if, and now we're going to say this, now this is a pretty impressive thing. This, actually refers to the button that was clicked, not anything else, the button that was clicked, the selector that the event is talking about. You can say, if this dot has class, that's pretty interesting. This returns yes or no, true or false, it's a boolean. If it has class, dimensions, button, do this. Let's just remove this. We can say console dot log, and now we can get the play areas dimensions. What we're going to do here is we're going to say, var dimensions, or we can actually say, width equals the play area dot width. This fancy little functional here, this method, returns us the width. Then we are going to be the same thing with height. These are what we call getters. They are getting information, they're not setting information. Then what we're going to do is we going to say play area dot HTML, which is a setter, and we're going to say width plus, and this is string interpolation, which means we're adding it together, height. There we go. Or we could say, dimensions like so. Take out that log. Let's refresh hear. Let's close this and we say dimensions please, 576 by 76. There we go. We can just double check this. If we go two our elements and we go to the sky, and say inspect, 600 by 100? That doesn't look very right, but, it's talking about height and width, what about the padding, the margins, the borders? We can actually say outer width and outer height, and then we pass in true to say, yes please. Let's work with margins and padding's and borders. Refresh, dimensions please, 600, 120, has, and jQuery is pretty clever, it can deal with margins, and patterns, and borders, and without, yes, it can. That's just one, we've got a few more buttons the HTML. Well, I'm actually going to skip that. No, I want. If this class has HTML button, or at least if this button has HTML button, what I want to say is a console dot log play areas HTML. I'm going to say, cool, what is it? The getter and the setter is pretty similar, except when we're setting it, we're putting information in, and when we're getting it, there's no information. Let's save this, let's refresh, and we're going to console and say the HTML, play area HTML, this is the play area. Let's say dimensions please, which will tell us the dimensions, and then we'll say the HTML. It's dynamic, it's going to tell us what the HTML is. Fantastic. Now, css button. If this button has a class of CSS Button, what shall we do? I think we should change it to groovy and boring. But now, how does it know which one to change to? We can put some little data, new name'. We can change it. We can add this whole thing data new name equals groovy. I don't know what happened there but let's just leave that and say, data boring. When you click this one, I want to change it to groovy, when you click this one I want to change it to boring. When I say its, I want to change the plate area to groovy or boring. I'm going to save that. Now, I want to say, var newName equals this dot data. Now I'm going to get the data, which is an attribute actually. But now you see how data dash new dash name, always put dash between your attributes especially for data or data. Then when we are going to say, instead of new dash name, we're going to say new name, like CamelCase. Now the new name, we can log out over hear just to see that it's working. CSS 1, groovy CSS 2 boring. Now we're going to say play-area .addClass of newName. We're adding a class of newName. It's pretty easy. CSS 1, CSS 2 boring, CSS 1, still boring. What we need to do here is when you say dot removeClass, because it groovy, unboring. When we say removeClass of groovy and boring and then add it again, there's never both of them, there's only one of them. What this does, removeClass, is it removes it and then it gives you your array of elements to work with again. It's pretty cool. You could remove the Class of your selector and then you could filter it again. Or you could go up to to the parents or you could then relate to the siblings. Let's see if this works. CSS 1, CSS 2, boring, CSS 1 groovy. There we go. We're changing CSS, which has something to do with this. Fantastic. Now if the height was equal to 300 pixels, and we refreshed, and we said CSS 1 that's pretty big. Dimensions, please? 320. Pretty impressive. That's worth padding and margin and borders. That's pretty cool. Then we go down to CSS 2 dimensions, please? Things are getting interesting here. Now, ''link-button''. We could do the same thing here. Say if this dot is 'link-button' and you can see it hasClass doesn't have this little thing here. We can say 'is', and we can say is a 'p' or is it doable, is a list element, or is an ID. This one just talks about classes. If it is a link button, then what shall we do? I'm going to change the missing link. There's only one 'a' tag here, so I'm just going to say a'' tag dot attribute. Now we're going two change the href. We're going to give it an href. What shall we give it? That's my website's fantastic. I'll actually want to see what the href is or what the target is. Because there's a target attribute, I can say this, like so. I'm going to log the target and then I'm going to set the href of 'a'. Refresh. I clicked the wrong thing, Link 1. You see the href changed and it logged blank. It's correct and knows what it's talking about. Now what we can do here again is we can say data dash url equals, let me just say http star rey dot co. We can then say sweeandmoo dot com. That's another one of my blogs, and we can say uxfoundry dot co dot za. That's a company that I do work for. Data url. What we're going to do here is we're going to say var newUrl, this dot data dot url. You see we're leaving out the data and there's no CamelCase really because there's only one word of data or data. Yeah, newUr and then we're going to say the href attribute is newUrl. Fantastic. Save and refresh. Link 1, missing link goes to mrra dot com. Fantastic. Link 2, the missing link goes to sweeandmoo.com and then Link 3 changes us again and goes to uxfoundry dot co dot za. Fantastic. 9. jQuery Animation: The lesson you've all been waiting for, The Animation Lesson. Let's drag this into sublime text and let's see what index.html has for us. Two boxes and an Animate Button. Inside our html, we've basically got an Animate Button, and these two boxes. Inside the first box, we've got three li, has the class of box1, the other box has a class of box2. We've then got some styles making our web page looks so very pretty, and got a heights on all the li is pretty important for what I'm about to show you. Let's put a transition of heights onto this box, of two seconds. What we can do here, is we can inspect this, and we can say heights, let's say a 100 pixels. Well, that just change really fast, so let's refresh that. Because we haven't actually put that style in, it say height at 100 pixels. You see how it animates. If you change this to 300, animates again, and 100 it animates again, and 50, yeah, you get the point. That means with jQuery, we can actually do some animation, pretty simply. I'm going to say, let's get the button, all buttons on the page, and I'll say on click, let's do the following. I'm going to say, box1, make sure there's a class name of box1, and.box1lifirst let's change some CSS, and so we're going going to change the height to 100. You can either do 100 like that, or we can do 100 pixels, like so. I quite enjoy it, just doing it like that. Let's save that, refresh. animates. But that's cheating a little bit. Like you're not really doing jQuery, you're doing CSS animations. That is true. You're also doing inline CSS animations. What we're going to do here then, is we're going to say li.animates, and we're going to put a height on this one of 100 pixels. I really like this way because your styles are separate from your interaction, your jQuery, your JavaScript. That means that somebody can start it, somebody can work on doing the animates for the open. We can say box1 li:first.addClass open. Let's refresh here animate button, click it again, it's still there. We're getting there. What we can do now, two, is you can say toggleClass, so if you press that and press it again, there we go, the class animates. You can see it's saying open and not open. It normally say animate button, it's just going to toggle that open class. But now I want to do it for every single one. Maybe as I click on number 1, or 2 or 3, it's going to do the exact same thing. I'm going to stop using that button and just say, li.click, and remember that this keyword. Let's toggle that class. See what's happening here. Now, I don't want them all open at the same time. Maybe we can do something else. We can say this.siblings.removeClass of open, refresh here, cool. If I click number 2, It's going to remove. That means that anyone can actually have open, but at anytime you can close the others. But that's still using CSS. Well, actually prefer this method. But I'm going to show you some other things. What we're going to do now, is just comment that out and say this.fadeOut. Here we can say, fadeOut of a 100 seconds, 100 milliseconds, 1000 milliseconds whenever you want. Let's do this, and it's actually gone. It goes to display none, which is really important. It fades out and then disappears. Let's watch number 2. You can actually see the opacity changing. Let me show you, but maybe of a five seconds. You see the opacity, how it's changing, it erase, but we know who's going to win. That is actually some jQuery animation right there. It's changing the inline styles in a live manner. We could also say fade toggle, but once it's faded out, well, then we can't actually do much. What we can do again here, is we can say button.click, and then we can put a function there, and we can say, all of this.fadeIn. Can say this to 200. Refresh, it's going to fade out. I'm just going to change this to 500. Refresh, Animate button, you see how it pops in. What are the other things? Well, we can slide up, up all fadeIn. It's landing on, it can be pretty fun. Next thing that we want to do, is we can slideToggle. But again, slideToggle once it's gone, it's gone. What we can do here, is you can say first.slideToggle, let's change that to 500. But now we still haven't done much animating. Well, one thing is, is that animate and CSS can be fairly interchangeable. When you click this, what are we going to animate? Well, let's animate the height again. this.slideToggle, remember we could animate the height. We can say something like heights 100. Fantastic. Now I'm going to take this transition of height off, and then I'm actually going to animate this. But not animate it doesn't like this syntax, so we need to change it to an object which can be written on one line or two lines. I quite like it over two lines. We can say 100 and we can give it a speed. We can also give it some easing, Select, then here, easeInOut. But a lot of these require extra plugins, which we're not going to show you right now. Let's try this. You can see that this is all jQuery. If we had this back in the transition, it will make it pretty weird. You see how I'm clicking that, and then it's changing. That's because it's changing inline and then there's a transition on those inline changes. That's why I prefer CSS when it comes to animations. But what is cool, is that we can actually listen when this animation is done. When it's done, then I'm going to add it somewhere else. I'm going to say when the height is 100, of a one second, and then going to say, put it into box2. Then I'm going to say, this.appendTo, and there's various ways of doing this. I'm going to say box2. Make sure to close this and say, and animate into box 2. This one box 2, this one box 2. That's how we can do animations. One thing I must tell you is that you can't animate background colors, or colors with jQuery normally, there are some plugins that allow you to do it. That's why, again, I like CSS transitions, but that's animation for you. You can do a fair amount of really cool things with it. In the next lesson, I'll show you how to make a really cool accordion that'll show and hide based on what you click. 10. Build Your Own Accordion: We're going to build an accordion. Let's do a quick Google Search of what an accordion looks like. One of those things. But maybe you've seen something like this. This is on the jQuery UI website. Click something, see its contents. I've done not a lot of pre-work for a little bit of styles, even got some buttons styles, but we're going to have no buttons. I then got an accordion h2, and that's it. I've got script file with nothing much in it. We're going to be building HTML, CSS, and JavaScript jQuery for this. Open this in Google Chrome, you'll see I've got a light gray background, and let's get going. What I'm going to do is, I'm going to call this ul, and I'm going to give it a class of accordion, and then I'm going to give it a few li's, and inside the li's, there's going to be two div's. One div will be a title, and you can make these h2s or a's or whatever you want. The other will be a content. It should say Title 1, and then Content 1, maybe this should actually be a <p> tag, so let's just copy that and paste that, Title 2, Content 2. Let's do 3 and 4. The premise is that the title is always going to be visible, when you click a ''Title'', then the contents is going to show, it's going to slide down or animate. I'm going to use a slide, jQuery slide, it looks really nice you can control the speed and it will work across lots of different devices. That's the HTML. Let's do some CSS. There's a lot of default styling in the <ul>, so I'm just going to take all of that off. List-style: none. We should set that margin to zero, I'm going to set the padding to zero. Much better. I'm going to give it a border of CCC 1px solid, that's all the way around. It's a bit light, 999, there we are, it looks pretty good. My accordion <li>, what is this going to look like? Well, I don't want any margin, I don't want any padding. Not any much change there. Then I also want a border top for it to look like so but I don't want one on the top. Well first, <li>, I'm going to change that and say border top: none. Looks pretty good. Then I just want to say all of the <li's>, the <p> tags for now. I just don't want any margin. Fantastic. What we're going to do now, I also want some on the content. Content. Let's do exactly the same, then the title, I want a little bit of padding. Let's put some padding, and what? 10 pixels? Yeah, that looks good. Now I'm going to put some padding on the content, sorry, 10 pixels, fantastic. Then on the <li's> itself, I should have put a background of white, cool. We have something that looks fairly nice. I'm just going to change the background of the content to something like <ef's>. Yeah, that's okay. What I want to happen is as I click ''Title'', I want that one to appear. I actually want to display this as none for now, so I just have the titles. I've got a a bunch of <li's> inside my accordion. Inside my script tag, I'm going to say,.accordion. But now, how does this work? We've got <li> dot, I can actually say dot title, dot click. I'm going to put a function inside of here. We're basically saying, when I click the title inside of an <li> inside an accordion, let's do something. What I want to do is, I actually want to get the sibling and I'm going to say, ''Open it''. What we can do here is we can say, this.sibling.slideDown, or we can actually say toggleSlide. Let's see what that does. Nothing much. ToggleSlide is not a function. That's because it's meant to be slideToggle. There we go. That is our accordion. I mean, that was ridiculously simple. Well now I actually want to open one, and make sure that the others or close to. How do I do this now? Well, this is where it becomes quite tricky, but everything is possible. We're going to say slideToggle. Now I want to say, so if I clicked on "Title," I want to access all of the other ones, enclose them. Title, I'm going to go up to accordion, walk to this li, and then get its siblings. I'm going to say, I could put it in a variable. I want to say this.parent. Title goes up to li.siblings. Then once we have eight siblings, fantastic. We'll say.find.content.slideUp. We can make this very fast, 500, 400. Sliding up, we can make this 200. Let's seen what happens now, refresh. Looks like it's doing hiccups. But you might like that. If we change it to 400, lesser. Let's got sum special easing on here. If we change this to linear, it'll look much smoother, but maybe a little bit boring. We can actually change this to 250. There's an accordion. We can put a bunch of content in here. Fantastic. We can even put some more. That's quite nice is I had this little plug-in, I can say like lorem50, and then expand it, and then bang, there is some Lorem ipsum. You can see that the padding is also animating in and out. Fantastic. There's your little accordion, but now I want a little error. So Title 1, it's over here. Now, what I'd like to do is I'd like to position something right on that side. Let's just put a little span in here. Fantastic. I'm going to use a plus. See what that looks like. The title, span. I want to say display, block and we'll say float, right. Fantastic. It looks pretty good. I'm just going to copy, and paste all this. Yeah, that looks pretty good. Now when I click this, the title, cool. I'm going to say content slideUp, but then I'm also going to say find, title.html.span or just span. I'm going to say plus. I'm going to say, this.find span. I could also use children, somebody your children. I'm going to say.html is minus or big minus. There we go. Let's refresh here. Doesn't I really like that character. Just minus then, here we go. It's working well with the other ones. I don't known when you click it. What we can do here is we can actually tell it, "Hey, you're open or you're closed?" I'm going to say this.parents, parents, li. Parents goes up, and up, and up, and up until it finds exactly what it's looking for. Actually, it will give you a list or an array of all of us parents worth that selector. It was a parents, li.data isOpen I will say true. What I want to do is I will say var isOpen, and I'm going to checked, if it's open. Then I'm going to say, it's the opposite of isOpen. Now this is pretty cool because it means we can just check if these things are open. Refresh, isOpen, true, false, true, false. You don't really know if it's open on the first time, but once it starts getting opened and closed, you do. What we're going to do is we're going to say, if isOpen, then let's do something else. Do something else. If it's open, which it'll see if it's open. Then it will actually change the isOpen. It's meant to be the other way around. Fantastic. We will say this.parent.siblings.data isOpen, I want to say false. Let's refresh, Vala, and that is all working. We could change classes, we could do some animation here, but that is our accordion. Well done. You maid an accordion. Now, what is really cool is that we could actually make a whole another accordion. We could call it Second one. It would work, and it wouldn't interfere with the other one. There we go. That is an introduction to jQuery. You've learned about selectors, you've learned about setting and getting information. You've learned about events. You've learned a little bit about animation. There we go. You've just made your first jQuery thing. 11. Share It!: Now you want to share with the rest of the world, with the Skill share community, and especially with me. Because if you have any problems, this is where you want to put it. We're going to use Shape. Just Google useshape.com, or just type it in, useshape.com. Create your Shape account. I already have an account, so I'm going to login, and this little thing is called 1Password. I'm just going to click that, and bang. Now, the thing is, I've already created an accordion one, you can't use that. Go to new site and now choose your accordion name, accrion, mrraaccordion. Cool, and then once you've created it, tap it, and now what we need to do is we need say, upload assets. Double-click your folder, just remember that your folder, and then we got to go to Pages, and then we just select this one and say index. Fantastic. We say view, and there nothing's working. That's okay. What we need to do is, inside our assets, is you'll see the script actually has this really long filename. We need to go in here, and we need to change that, save that, and then we need to get jquery, because we actually didn't upload jquery. So we're going to search for jquery cdn, which means Content Delivery Network. Fantastic. Let's click on minified, copy, and let's lots over the whole of that script. Save it. Now, I'm going to go back to Shape, Upload Assets, click it twice sometimes, select the folder, upload, and there we go. Go back to pages click View, and everything should be working again. There we go. Just copy and paste this URL, and put it into your project gallery, share on Twitter, tweets at me, @mrra. You guys are amazing. Thank you for taking this class. I hope you've learned a lot.