Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Selectors and Events

Before we get in depth with the concept of user experience, let’s become acquainted with jQuery. In this lesson, you’ll learn how to use jQuery to identify objects on the page and to create event listeners for those objects.

Relevant Links

2.1 Selectors and Events

Hello and welcome back. In this lesson I wanna start by giving you a quick primer on jQuery. We're gonna talk about how to do two very specific things in jQuery. Namely we're gonna learn how to point to an item in your web page. In this instance we're going to point to this send or submit button and then we're going to learn how to create a click event for that button using jQuery. And these two basic jQuery tasks are going to form the foundation for a lot of what we're gonna be doing as we move forward. Now you'll notice we're building a contact form here, this is not a course on how to build contact forms. This is a course on enhancing the user experience with jQuery. So as we move forward I want you to think outside of what we're building here and try to apply the concepts we're gonna be talking about to other areas of your own website. And focus on how to enhance your user's experience using these techniques that we're going to talk about. So you can find all of our code here at codepen.io. And I will include a link to this particular starting pen in the course notes for this particular lesson. And once you click on that link, you'll be able to open that up and see exactly what we're looking at here. And once you have that open, I want you to come up here to the top and click on this fork button. This fork button will create a new copy of that pen. And then you can go in and make your own edits to that forked copy. So if you're familiar with Bootstrap you might notice that we are using some Bootstrap markup in our code here. We're using a Bootstrap well. As well as form groups and things like that. And that's what's giving our contact form it's basic styles that we're seeing over here. If we click on our settings and go to the CSS tab, we can see that Bootstrap is included here. You can add it by clicking on this dropdown menu. And that first item is Bootstrap. If you click on that, it will add it to one of these text fields. And in this second one here, you can see that I'm pointing to a Google font called Railway. And you can learn more about that at Google.com/fonts. Then if we click on our JavaScript tab you can see that we're also pointing to jQuery. You need to include a link to jQuery if you're going to use jQuery obviously. So if you're using jQuery in your own code on your own website, as opposed to just using it in code pen, then you would need to include a script tag with this link or you can download the Jquery framework at Jquery.com and include it that way. Let's go ahead and close that, and you can look through that HTML yourself but I just want to focus on the button down here near the bottom which has an ID of btnSubmit. We're gonna be using that ID in just a moment because in jQuery we can point to items on the web page using CSS selectors. So we're gonna use a CSS selector for that ID in order to point to that button. So if we collapse that and jump into our CSS, you can see we just have some basic CSS applied here, including a link to that railway font, so our entire form is using that font and then if we go into our JavaScript tab, you'll notice that we have a clean slate to start with. So to point to an item we're going to start by typing in a dollar sign. Any time you see that dollar sign you're going to think of jQuery and then immediately following that dollar sign we're going to have a pair of parentheses with a pair of quotation marks inside them. And then inside those quotation marks, we can enter in whatever CSS selector we want to use to point to whatever item we wanna point to on the web page. And we wanna point to our Send button which has an ID applied to it of btnSubmit. So the way we would point to that in CSS is we would type pound since it's an ID, and then the name of that ID which is BTN Submit with a capital S. And this is all you need to know to point to an item on your page. Now it's a little cumbersome to have to type that selector in every time you point to that button. So, we're going to make it a lot easier by storing that inside a variable which will also make it more efficient from a code perspective. But the way we do that is we type Var and then the name of the variable we want to use which I'm going to call dollar sign BTN submit. And then we'lll set that equal to the Jquery selector that we just entered in. And then we'll end our statement here with a semi-colon. So now anytime we want to point to that button we just point to this variable name here. Now you can call this variable whatever you want to. I chose to call it btnSubmit and this dollar sign at the beginning is just a personal preference of mine. I like to start my variables with a dollar sign any time I'm pointing to an item on the stage, anytime I'm pointing to a DOM element. That way when I look through my code, I can tell if a variable is actually pointing to an item or if it's just another type of variable that might just be holding some kind of information. So now that we know how to point to an item, let's talk about how to create an event listener for that item. And there are a couple of different methods in jQuery you could use to do that. We're gonna do it using the on method. So the way this works is you type in the name of the item you're going to apply the event to. And we're talking about a click event here. So the name of the item is btnSubmit. It's the name of that variable that we stored it in. And then we're going to type .on(); to end our statement, and then inside those parentheses we need to include a couple of different things. Now we can use this on method for click events, hover events, things like that. We're going to use it in this case for a click event. So the first thing we need to include inside these parentheses is the name of the event we're listening for and we're going to put that inside quotation marks and we're gonna type in the word click. So after that closing quotation mark we're gonna type comma space and then the second item we need inside the parentheses is the function that we're gonna run whenever we click on that button. And the way we do that is we type in the word function, open and close parentheses and then an opening and closing curly bracket and then all of the code that we want to run, whenever the user clicks on that send button is going to go in between these curly brackets. So, I'm going to nudge that closing curly bracket down a couple of lines so that we can put all of our code in between those curly brackets. So these two simple items pointing to an item on the stage and creating a click event are going to form the foundation for what we're going to do moving forward. And now that we've got that out of the way, we can now focus on techniques that we can use in JavaScript to enhance the user's experience. So we'll get started with that in the next lesson. Thank you for watching.

Back to the top