Getting started with jQuery (tutorial) - Beau teaches JavaScript

jQuery is a very popular lightweight JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on websites. jQuery simplifies a lot of the complicated things from JavaScript like Ajax calls and DOM manipulation. To use it, you can either download it and host it yourself or you can just link to a CDN. A lot of people just use a CDN. So, to do that, you just go into HTML file and put this line. So, right within the head tag, you can see we have the head tag here and inside that you're going to put this line script and the source equals and then you just link to the jQuery here, the jQuery CDN. If you can't remember what that is, you can just go to Google and type in jQuery CDN and you can also download it from jquery.com. And if you are creating something on CodePen like I am right now, there is an even easier way to add jQuery. You just go to settings and then on the JavaScript tab, quick add, you go down to jQuery and then you just click save and close and then you you don't even have to put the script here. It adds it for you. So, down the JavaScript code here, I'm going to show you the basic syntax of jQuery. You're always going to start with the a dollar sign and then in parentheses you're going to put a selector. Now, this selector can be any CSS selector. And then you're going to put dot and then you're going to put the action. So, whatever action you're going to have jQuery perform with that CSS selector. So, I'm going to get rid of this. I'm just about to copy and paste some code that has three jQuery commands and what we're going to talk about those. Okay, so here are three jQuery commands. So, this first jQuery command is is kind of special. Uh you're usually going to want to put your entire code in a document.ready event. So, document.ready just means when the document is ready or when the document is completely loaded, then you're going to run the rest of your code. If you don't put your code in a document.ready event, your code may try to access an element from the HTML that has not yet loaded. So, this just selects the document and when it's ready, it runs this code. So, now let's look at the code inside the document.ready event. Again, we start with the dollar sign and then we have a CSS selector, button is just going to select the the button tag right here. And then we're going to add a click action or a click event. So, this is going to be the action click and when the button is clicked, we're going to run the command that's inside that. So, inside we have another jQuery command. You know it's jQuery cuz it starts with a dollar sign and then we're going to select the P tags and we're going to hide them. So, there's two P tags here. You can see these two right here. So, if I click the bell button, the P tags are hidden. I'm just going to reset that and we're going to change the code a little bit. So, I'm just going to change this one right here. I'm going to change this to serial with the hash sign or the pound sign right before this. That's just the CSS selector for ID. So, you can see up here, ID of serial. So, now it's going to select this whole thing right here. So, if we run that and then we click the button, it just hid the paragraph element with the ID of serial. And you can see these two lines, one of them is a has a paragraph tag, one of them has a div tag, but they both have the same class of unicycle. So, if we just use the CSS dot unicycle, that's how you would show a class, the dot. If I click the button, it hides everything that's unicycle. Now, let me show you one more way you can mix this up. Um here, we've been selecting the button to add the click event, but we can also make this H3. So, we can we can really add the click event to anything. And now we're going to hide the button. So, let's see what happens there. When I click the button now, nothing happens. But if I click the heading, the button disappears. Okay, that's just a quick introduction to jQuery. I'm going to be going over more information about jQuery in future videos. Thanks for watching. My name is Beau Carnes. Don't forget to subscribe, and remember, use your code for good.