Made withjQueryTutorial

Javascript Tutorial - jQuery Tutorial for Beginners Pt 2

L

LearnCode.academy

Creator on the jQuery channel

Watch on YouTube ↗

187K viewsJan 25, 201417:21 runtime

Learn the fundamentals of client-side web development by integrating JavaScript directly into your HTML page. This tutorial introduces the powerful jQuery library, simplifying DOM manipulation with CSS-style selectors. Discover how to dynamically change an element's HTML, append…

Chapters

#jquery#tutorial#frontend

Getting Started with JavaScript & jQuery

JavaScript can be embedded directly into an HTML file using <script> tags.
The alert() function creates a pop-up message box, while console.log() writes messages to the browser's developer console, which is essential for debugging without interrupting the user.
jQuery is a JavaScript library that simplifies tasks like HTML document traversal and manipulation, event handling, and animation.

Important
To use jQuery functions, you must include the jQuery library via a <script> tag before your own scripts that depend on it. It's common practice to place script tags just before the closing </body> tag.

Manipulating the DOM with jQuery

jQuery makes it easy to find and modify HTML elements (the DOM) using CSS-style selectors inside the an $( ) or jQuery( ) function.

Key Methods:

$('selector').html('new content'): Replaces the entire inner content of the selected element(s).
$('selector').append('<li>New Item</li>'): Adds content to the very end of the selected element(s).
$('selector').prepend('<li>First Item</li>'): Adds content to the very beginning of the selected element(s).
$('selector').remove(): Deletes the selected element(s) from the page.
$('inputSelector').val(): Gets the current value from a form element like an <input> field.
$('li:eq(1)'): Selects a specific element from a matched set by its index number (starting from 0).

Handling User Events

jQuery simplifies the process of making a web page interactive by responding to user actions like clicks, mouse movements, or key presses.

The .click() method attaches an event handler function that runs every time the selected element is clicked.
The function provided to the event handler is called a callback function.

Tip
The syntax $('button').click(function() { ... }); is a fundamental pattern in jQuery. The code you place inside the anonymous function's curly braces {} is what will execute on click.

JavaScript Functions

Functions are reusable blocks of code that perform a specific task. You can define a function once and call it many times.
An anonymous function is a function without a name. They are commonly used as one-time helpers, such as callbacks for event handlers.
String Concatenation: You can join strings and variables together using the + operator. This is crucial for building dynamic HTML content. For example: '<li>' + inputValue + '</li>'
Arguments (also called parameters) are like placeholders in a function definition. They allow you to pass values into the function when you call it, making the function more flexible and powerful.

// A function that accepts two arguments, 'val1' and 'val2'
function addTheseTogether(val1, val2) {
  alert(val1 + val2);
}

// Calling the function and passing it the values 10 and 20
addTheseTogether(10, 20); // Alerts "30"

Embedding JavaScript & Using the Console

Alright, this is lesson number two about learning JavaScript. If you missed lesson number one, you might want to watch it. The link's in the footer or I'll put an annotation on here somewhere. We're just going to keep moving forward.

So we are now into a super basic website. Have it up over here. Um, and it's going to automatically reload as I enter stuff. You might have to tab over and hit reload. What I'm going to do here is I'm just going to create a script tag. And whenever I add a script tag, by default, that's going to be JavaScript straight in my page.

And so I'm going to go alert(). You'll notice Sublime gives me cool, nice new colors. That's very nice. So now if I hit save, oh, my page reloads and says "Hi there." Every time I reload my page, it's going to say "Hi there." So we're using the exact same code that you can use here in the console, and we're now just putting it in the page.

I can also do console.log("hi there"). So that's kind of the use of console.log. It's a way to kind of debug when stuff's breaking and you don't know what's going on. You can spit stuff out to your console and your normal user doesn't see it, but you can open your console and see there your notes to yourself as to what kind of stuff is going on. So that's kind of how you do JavaScript right there on your page.

Introducing and Loading jQuery

And let's go ahead and load up what's called jQuery. If you go to jquery.com, jQuery is what's called a library and it gives you some great, great ways to do stuff very, very easily. And actually we're going to go to code.jquery.com because we just want to get the actual code.

And you can click on minified and there we go. I just want the link right there. I'm going to copy the link. And right down here in the bottom of my page, now we'll just go and add script and source equals and then paste that link you got there. Awesome. So now jQuery is going to load in onto my page. Hit refresh. You don't notice anything because jQuery doesn't actually do anything. It just gives you a bunch of predefined variables, remember we talked about variables and commands. Kind of gives you a bunch of predefined things that you can use.

DOM Manipulation: Select, Change, and Append

So here I'm going to make my own script after jQuery, because we want to make sure we're doing this after jQuery, otherwise jQuery won't be loaded yet.

And now you can do some things like jQuery sign is the dollar sign. This is basically the main function you get. I can go jQuery. I can go jQuery and I'm going to look for the tag of header. And these are just like CSS selectors. That's the beauty of jQuery. I'm going to go header h1, .html() and I'm going to change the HTML of header h1. Once again, this looks just just like CSS, doesn't it? That's why everybody loves jQuery. And I'm going to go "My Awesome Site". I'm going to hit save. You notice it starts off at "My Site" and then instantly goes boom, "My Awesome Site". So now we are real time changing stuff in jQuery, which is, or or in using JavaScript.

Let's go ahead and do this. I'm going to go <ul>, <li>. I'm going to go say, thing, milk, eggs. And I'll just leave that there. <ul>, I made that a UI, didn't I? Whoops. <ul>.

Let's try doing something else. Let's go ul. That'll just find an element just like CSS again. And I'm going to do append. Append means we're going to add another thing in there, veggies. And I'm just going to put some straight HTML code in there. So <ul>, it's now going to add an <li> to my <ul> with veggies. So there you go. Milk, eggs, and now veggies is in there, even though it's not in the code. I'm going to copy and paste this. Now we got a lot of veggies. So you can add a whole lot of things. This is kind of where the web, like I said, really starts getting fun because now you're changing your web page real time.

Advanced Selection and Removal

I can also come over here. This will be a lot more fun. Let's do it like this. Let's do it in the console. Nice. And so then I can go... let's clean this thing out. ul.html() and let's just give it a single <li>. When you hit .html(), it's going to completely... it's going to completely wipe out what's in there and it's going to give it all new stuff. So there we go. Now I completely wiped out my HTML. Or you can and I added an <li> in there. So now we're real time starting to mess with our stuff.

Instead of append, let's say I wanted to add something before milk, then you can do this: ul... prepend. Now eggs showed up before milk because prepend is basically going to do it at the very beginning of my element. append is going to go at the very end. Gosh, there's some other things.

And the other great thing about jQuery is it just all makes sense. If I go $('ul') and just hit enter down here, then you'll notice it gives me an array of all my elements. I can go ul:eq(), and this is going to get an... it's going to get an index. So eq(0). So I'm just getting the zero index of that, if you guys remember from doing JavaScript. eq(1) is milk. So I can go li:eq(1).remove() and it's gone. Then I can go li:eq(0).remove() and it's gone. So that's kind of the super basics of how you're going to use jQuery to start changing all sorts of stuff in your website.

Handling User Events with `.click()`

Let's, uh, let's add a link. And let's make a link do something smart.

I'm going to make this href equal pound because we're not going to go anywhere with this. This is just going to be a link. Actually, I'll just do a button. This button will be ID "add-one". So there's a button that says "add one". It does absolutely nothing.

So now what you can do with jQuery though, is you can go... let's grab add-one. I'm going to go .click(). And this is the one thing you'll have to remember here: function and then this syntax just feels really weird. So you're doing .click() and then you're typing function open close brackets. This is probably one of the weirder things if you're brand new. It's like, oh man, this looks crazy and confusing. You just memorize it and then you're done with it. So type it out 10 times in a row to force yourself to memorize it and you're going to be okay.

Now, whatever you add in here is going to happen whenever the function, whenever it gets clicked. So whenever I click on add-one, it's going to do all this fun stuff, so if that makes sense. And then I'm going to space it so it's clear. So now when I click this, it's actually going to add a whole lot of veggies. Let me just do it where it does it once. So now every time I do this, it's going to add a row of veggies.

Capturing User Input with `.val()`

Don't know why I did that sound. Uh, let's make this get even smarter, if I'm not going too fast for you. I'd rather go too fast so you feel like you're drowning and then all of a sudden you wake up and realize, wow, I know quite a bit of JavaScript already. You can always rewatch the video.

So I'm going to do an input, which is a... Let me give this one an ID. You'll see what an input is here soon. name, I'll just call it ID equals name. So that's what an input is. It's, you've seen them in forms all over the place. They allow you to input stuff. We didn't talk about them before because we didn't have JavaScript to do anything smart with them. So I had an input named name with an ID of name and the button add-one. So when add-one clicks, let's do this.

Let's go... we're going to go var val =... and v gets the value of name. It'll get the value of any input. So here, let me do this. Watch. Let me delete this and then I'm going to go alert value. So now let me type in whatever here. Ah, alert test. So now I've grabbed my value out of name, remember, because my ID is name here. So whenever I click on add-one, then it's going to say value equals name's value and I'm going to alert it. Or if you want, you can console log it. Now it's going to appear in my console. So that's kind of how that's going to work. So I've grabbed my value out.

Building Dynamic HTML with String Concatenation

And now I'm going to go ul.append(). And here's where I'm going to do a string. Let me show you real quick about... so I want to go <li> and I want the value to be in here. And this will not work. This will just say value, value, value. Great. It's actually putting a string of value. I want it to get that in there.

Let me come over here and show you how you insert different strings together. If I go name + value, well now it says name value. So I can actually go name space + value, and that's kind of how you can add two strings together into one. What happens if I go name + 20? So now I'm adding a string plus a number. JavaScript is smart enough to say, okay, treat the number as a string, because clearly you can't add name to 20. So that's kind of how you add stuff together.

So I'm going to do <li> and I'm going to go plus and I'm going to go an ending </li>. So I've got a string, we're going to add in the string, we're going to add it to our other string. So now let's give this guy a try. So now I go veggies and I get add one. Ha! Boom, I feel like we're doing real programming here. This is awesome. And let's pick up some friends at the store because who wants to go shopping with friends? I do, I do. That's kind of your very, very, very, very basics of using jQuery.

Demystifying JavaScript Functions

I don't know if you can see, but jQuery kind of makes it pretty easy. This is the most complicated bit of jargon we had to memorize that actually feels like code: function open close, what the heck does that do? And yeah, I'll get into functions here before I let you go for today.

Let's go back to our console real quick. Let's say jQuery is all good and all. Let's describe this so you understand what that means. I'm going to actually... we know that we can describe, we can do variable name = 30, uh, age = 30. And now name is defined. So I can name equals Will. So I want to do a function that alerts both of these, or I want to do something that's reusable. Those are called functions. When we do alert(), that's just a function that does something.

So I can go function alertName Remember I told you there's about six types in JavaScript? Well, here's your next type. It's called function. alertName. And that's... you notice that looks pretty similar? function alertName and this is going to go alert(name). So now I just go alertName. There you go. And it's always going to alert the name.

Let's say I want it to do something a little smarter than that. Plus... let's call this alertNamePlusAge. Let me add a space there. There you go. Now this is going to alert name plus age. So now I go alert... oh, it already knows that it exists. Will 30. So now I'm kind of defining this thing that does something for me. And so that's what's going on here, is when you... the actual official JavaScript .click() is that, but then it needs to know what do I do when you click? I need to do something. So we're creating what's called an anonymous function. We're creating a function right now with no name to it. I mean you can give it a name, addValue. You can use the exact same thing we were using here: function alertName(addValue). And that's what we're doing. We're just creating a function and we're saying do this stuff. Right now this name is completely pointless because you're never going to call it again, but this works. There you go. And then this works. So that's kind of a little explanation of why we added that. We're creating a function and we're giving it some functionality.

Creating Flexible Functions with Arguments

One other thing, and this is the last thing, since you've got a lot to learn and you probably want to go have some fun. Last thing with functions that you can do is you can give them arguments. Remember if you do alert(), it's just going to do a blank alert. And then you can give it something to alert. You can give it your argument of 30, or I can say name, age = 30. Yeah, I can give it an argument. How do we do that? Well, you just go function alertThisPlus10. And then I'll say I'm giving a variable name here. I want you to give me... I'm just going to call it the_thing. And then we're just going to go alert(the_thing + 10). So now whatever we pass it is going to be referenced as the_thing whenever we're inside the function. This is going to kind of be what bends your brain a little bit. Show you how this works. alertThisPlus10(20). It's going to alert 30. Why is it doing that? Because I said alertThisPlus10 and I gave it 20. So now the function fires. The function alertThisPlus10 fires, and it calls the_thing = 20. It kind of creates that variable for us. So then it's going to alert 20 + 10 because we gave it 20 and called it the_thing.

You can call that whatever you want. I'll call it val for value. val is kind of something developers will say a lot. So I can go val + 10. Now I say alertThisPlus10(20). Yeah, exact same thing. It doesn't care what you call this. It just knows that whatever the first thing you give it is going to be called val. You can actually do several things together. addTheseTogether(val1, val2). alert(val1 + val2). That's what it's going to do.

And what did I type wrong? Oh, I didn't spell function right. There we go. Okay so now if I go add these... together, there we go. I still get 30. 10, 30. Now I got 40 because it doesn't care what those two things are. This function just goes take val1, take val2, add them together, and alert them.

So that's kind of functions. And I'm definitely going to leave you there because I hit you with way too much. This should have been two lessons, but oh well. Please forgive me. Have some fun with jQuery, write a couple functions, annoy your friends with a million alerts, and have an awesome day.