Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:11Length:33 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.7 jQuery Code Snippets

In this lesson, I will walk you through another snippets extension. This one provides snippets for most commonly used jQuery tasks.

Related Links

2.7 jQuery Code Snippets

Hello and welcome back. The next extension that we're gonna talk about is another set of snippets. And this set of snippets is specific to jQuery. So if we jump into our Extensions section and do a search for jQuery. We can see this right away, jQuery Code Snippets, let's go ahead and install that. So I'm gonna install and then reload the window. And then once that has reloaded, we can get started with our snippets. So if we jump down to the bottom of our document here, I'm just gonna create a script tag. And inside that script tag, we can start inserting these jQuery snippets. Now all of these jQuery snippets are going to start with jq, and then once we type jq we can get a list of all the ones that are available to us. So as you can see, there's a lot that we can do with this. And I just wanna cover a few of the highlights in this particular lesson. So one of the first ones you might wanna do is the docReady function. So if we click on that, you'll see that it creates the document ready function that you're familiar with if you've used jQuery for any length of time. Basically everything that goes inside this document ready function will run after the document has finished loading. And typically I like to put all of my jQuery code inside these document ready functions. So I use this very, very regularly. Now there's another version of this we can use. Again, if we type jqdoc, you'll see that there's a short version, jQuery DocReadyShort, or jqDocReadyShort. So if we click on that one, you'll see it gives us the shortened version of that, the shorthand version I should say. And this is the one you might find yourself using more often. It does the exact same thing that the other one does, it's just a shorthand way of doing it. So then inside this function we can do other jQuery or JavaScript-related things. So one thing you might find yourself doing a lot is creating click events for buttons. So let's say we have this btn-primary button here that we wanna create a click event for. If we go into our document ready function here, type in jq and then start typing out click. You'll see that there is an option for that here, and when it fills it out you'll see it puts the cursor right where we need it, where the selector is. And it's highlighted the word selector so we can just hit Backspace to get rid of it and then type in whatever selector we want. So we could do that here, we could type in .btn-primary and we now have our click event here. And inside that click event we can enter in whatever code we need. As you might imagine we can do the same thing for other types of jQuery events. So let's say that we want a hover event, we just type jqhover. And when it fills that out for us it gives us the same thing, it gives us a place to type in our selector, so we can do that here. And I'm just leave the word selector there for now since we're not really creating any code here. But then it gives us that entire skeleton of that hover event. So we have our first function here, which defines what happens whenever we hover over a certain item. And then our second function, which will define the functionality for when we move our mouse cursor away from that item and are no longer hovering over it. Now if you don't need the second function, if you just want something for hover, you could delete this second part. But that's how you use this plugin to get a hover function. We can also use a snippet for setting CSS properties for example. So if we type jqcss, and you can see a few options for Css, I'm gonna choose the CssSet. Here we type in a selector, so let's say that we want to change all of our buttons. So we'll say .btn, everything with a class of btn. And then we would type in our property name here, let's say that we wanna change the background color, background-color. And then next to that we would put our values. So we want them all to be red, or you could use a hex value if you want, that's how you would do that. So again we can get to that very, very quickly using the snippets. We can also fade an object in or out. If we do jqfade, we can see FadeIn, FadeInFull, FadeOut, FadeOutFull. Let's just choose fadeIn and then we would just type our selector here. Same thing for fade out, we would do jqFadeOut and then change the selector. We can also hide or show an item on the screen, so we can use jqHide to hide an object and that'll fill out the hide method here. Or, as you can imagine, jqShow does the same thing but for the show method. And then others you might use often might be slideUp and slideDown. So SlideUp, fills that out for us, and then jqSlideDown, there you go. Now, obviously we need to change the selector for all of these whenever we do that. But I just wanted to show you that they're there. So at any time, you can see a full list of these if you just type in jq and then you can browse through these. Another way we can view them a little easier is if we go to our Extensions and then find our installed extensions here. And then we're gonna look for this jQuery Code Snippets. And then over here on the right it will give us more documentation for that. So if we scroll down, we can see a full list of all of the jQuery snippets that we can use. Now keep in mind, these are not in any sort of categorized order, these are just alphabetical. So it might take some searching to find what you're looking for but those are all there. So that's how you use the jQuery Code Snippets extension for Visual Studio Code, thank you for watching.

Back to the top