jQuery Crash Course [1] - Intro & Selectors

hey guys welcome to a crash course on jQuery in this course we're going to be covering all the fundamentals of the jquery javascript library now before we get started I just want to go over a few things before we jump into some code so first of all I want to talk about what jQuery actually is it's a small fast and feature-rich javascript library and it makes things a lot easier such as Dom manipulation event handling Ajax and much more and it allows us to create extensive functionality with much less code than if we were to just use regular JavaScript alright so what you should know before attempting this course is HTML CSS and JavaScript ok you need to know HTML because we're grabbing HTML elements and we're using jQuery to manipulate them to do different things with them you need to know CSS because all of the jQuery selectors are the same as CSS selectors and then of course JavaScript you need to know at least the basics just to to know for instance how to create a variable and what a variable is an array things like that alright you don't have to be a JavaScript whiz but you should know at least the fundamentals all right so if you don't know these things I do have plenty of videos on them if you want to go back and check those out and then come back and that would be fine all right so we'll be breaking this mini-course up into a few different parts so we're going to start with jQuery selectors and this is where knowing CSS comes in handy as I said they use the same selectors that CSS does whether it's the element itself at an ID class anything like that and then we'll move on to event handling so Mouse events form and input events and then after that we'll talk about Dom manipulation so we can add remove and change things in the document object model and then we'll also discuss some really helpful methods that jQuery offers to do various tasks we'll talk a little bit about effects such as fade in fade out slide up and slide down and we'll also look at the animate function and then finally we'll be working with Ajax methods that jQuery offers such as load get post and the Ajax function itself alright so if you like this course this mini course I would suggest checking out my 10 project JavaScript and jQuery course at edge' wanax you'll be working with all the stuff that we go over here and much more and you get to build 10 different projects ok right now I think it's only around 19 bucks so it's well worth it I'll put a link in the description and that's it so without further ado let's get started on selectors alright so let's get started on the basics and jQuery selectors now in my browser I have jQuery comm open and there's a couple ways you can use jQuery you can go ahead and download it from here and the latest version at this time is three point one point zero you can also download version two which has a slightly different API and then version one is only recommended if you need compatibility on browsers like ie6 ie7 and eight which you know nobody really uses anymore so we're going to be using three point one point zero all right now you can download it here and you can include it in your script you can just you know download it into your folder but we're not going to do that we're going to use the CDN which is just an external link now if you're building a production project then you probably want to include it within your application just so you can use it without an internet connection and so on but just for simplicity we're going to use the CDN alright so I don't know where is that available okay so this is actually the link right here that we need alright now I have this empty folder jQuery crash course and when I'm done with the course I will upload it to github and I'll include a link to that in the description but basically what we want to do is just create our first folder which is going to be called selectors and inside there we're going to have our index.html okay well go ahead and open that up I'm using sublime text as my editor but of course you can use whatever you like so we're going to put some standard HTML tags in here and for the title will say jQuery crash course and this is selectors now we're going to build kind of a really simple UI just we're going to have a header and then just an area to do all of our output alright so let's go ahead and include jQuery so we're going to put a script tag here with a source and we're going to dot that we want to grab that and paste it in okay that's the CDN and that's all we have to do to be able to use jQuery all right now what we're going to do is go into the body and we're just going to build out the UI real quick we'll have a header I mean this isn't needed but I think it just makes things look a little cleaner so in the header we'll just put an h1 will say jQuery crash course alright and then under that let's put a div give it an ID of container I apologize for that bang and that's my son running around upstairs all right now everything we do is going to go in this container well as far as our HTML our JavaScript is going to go down here we're going to create a custom script tag there for us to put all of our jQuery in all right so let's save that and then we'll open it up in chrome or whatever browser you want to use and we just want to style it just a little bit okay I'm not going to go overboard I just want to add a little bit of styling to it and where is it right there alright so we're just going to put this right in the header will put our style tags if you want you can put it in a separate CSS file just want to have everything in one file so let's start with the body so we'll set I'm going to set the font size to be slightly bigger than usual so I'm going to set it to 17 pixels we're going to set the font family to Arial and let's set the background to light gray and then I'm going to set the line height to 1.5 m okay so that's the body now for the header I'll set a background it's going to be a dark background so we'll say the text color will be white I'm going to give it a padding of 20 pixels and we want everything aligned to the center okay and then let's set a border bottom of 4 pixels and we're going to make that black and solid all right and then finally we'll add a margin bottom of 10 pixels okay last thing is going to be the container that's where all of our output will go so I'm going to set a width to 90 percent it's going to be fluid or responsive and set the margin to auto to push everything in the middle and then just a padding of 10 pixels all right so let's take a look at that okay so nothing too fancy but you know we have some padding here and we made the font a little bigger to make it a little more readable all right so enough of this CSS crap let's get into jQuery now we're going to be talking about selectors so we need some elements to work with I'm going to create an h1 here and we're going to give it an ID of heading 1 okay and in here we'll just say heading one and then let's put in a paragraph so we'll say P we'll give it an ID of power one and I'm just going to grab some dummy content to put in here so I'll paste that in and you'll notice that I do have a span around just a couple words here okay we're going to work with that later and then what I'm going to do is copy that h1 and that paragraph and then just put paste it in again and I'm going to change this to h2 and power too but I'm also going to make them classes okay we'll change this to heading two all right now let's go down to our script tags here and I want to use a selector to let's say grab the headings alright so Jake with jQuery we use money sign that represents jQuery and in here inside quotes it could be single quotes or double quotes usually you see double quotes but with myself I like to work with single quotes all right so that's usually what I do by default even if I try to use double quotes I'll end up switching over in the middle of the script to single quotes so I'm just going to start with single quotes so let's say we want all the h1 so we can put an h1 and then we can do something with it in this case I'm just going to call dot Hyde which is a jQuery method alright so if we go ahead and let's first of all run it without that I'll comment it out and you'll see we have our two headings and paragraphs now if we say h1 hyde and we reload now you can see that all the H ones are gone even the one that was in the header so if we want to target a certain heading we can use its for instance its ID we have heading one here so we can say h1 and then we're going to use the number sign for an ID and then heading one so now if we save that and we you can see that only the heading one has been selected and is hidden alright and I'm just going to comment this out I want to kind of leave all the code for you guys to have as a reference so I'm also going to put that back without the ID like that and I'll just comment it out okay now of course we could also use classes so if we want to grab heading to that as a class so we'll say H 2 and then classes are represented with dots so we're saying H 2 class heading 2 and we want to hide that so we reload and that doesn't work oh it's an H 1 there we go all right now see how we have H 1 dot heading 2 we actually don't need this element we could just say heading 2 and save that and you'll see it's still hidden all right so now even if we put a paragraph with the class of heading 2 that would still be in effect that would still hide okay now we can use certain selectors and then use inner elements as well so see how we have a paragraph here and then inside that paragraph we have a span so what we could do is we could say paragraph and then span and let's say let's do something else we'll change the color we'll use the CSS method alright and I'm going to go over these types of methods later on right now I'm just focusing on the actual selectors but CSS will take in a value or a property let's say color and we'll change it to red okay so if we go ahead and save that reload now you can see that all the spans that are within the paragraph are red if I were to take that span and put it outside of a paragraph you'll see that it's not red if we were to remove the P here and just say span then it would because now all fans no matter where they are will be read alright I'm just going to take that out all right now we can even get more specific and use some of the css3 selectors what I'm going to do is up here still in the container just tab that over in the container we're going to put in a UL and let's just give this give it an ID of list and put in a couple L eyes here I'll say list item copy that okay so now we have this list to work with now let's say that we want to grab this first list item okay so what we could do is we can say li if we want to be more specific we could say ul with the ID of list and then Li and what we can do is we can put a colon here and then say first okay and then we'll use the CSS method here and it'll say color red whoops save that reload and now you can see that the first item of that list is now red okay at the same time we can do last which I'm sure you can project what that's going to do so last and we'll change this to green and reload and now you'll see that the last item in the list is green okay we also have even even an odd if you want to target those even in odd elements so let's just copy that and then we'll change this to even and instead of the color let's do background-color okay we'll set that to let's say yellow save that reload and now every even element is yellow all right now of course we can also do odd so let's change that to odd and for the background color we can also use hexadecimal values so we'll put a light gray all right now what if we want to choose let's say every third item we could do that using an nth value or an enter so let's copy that and we're going to change this to nth - child and that's going to take into parameter we're going to say 3 n now you can put all kinds of formulas in here but I'm not going to really get into that that's more css3 stuff so for this one let's change the property to list style and we'll set this to none and what that will do is it'll remove the bullets okay so we'll save that reload and now you can see that every third doesn't have a bullet okay so we can pretty much target these items however we want so now what I want to do is move on to inputs so up here I'm going to put in an input and this is going to have a type of button and we'll set a value of just say fun one what input doesn't need an ending tag all right and then we'll put a submit type and let's put a text type okay that doesn't need a value all right so if we reload now we have a button a regular button of submit button and a text so we can actually use the type attribute as a selector so for instance let's say let's say that we want to grab all of the button types so what we could do is say : button and then we'll say dot hide okay so if we reload that you'll see that the button is now hidden it could also take submit which I should probably change the text will say so we met reload and now that's gone okay and then finally if we want the text now the text is gone so you can use that as a selector as well now we can also work with attributes as selectors so what I'm going to do is up here I'm going to create a couple links okay so let's say this goes to google.com and then this one will go to yahoo.com okay so we got two simple links throughout reload that and let's say we want to change all of the elements that have an href attribute okay we want to use that as a selector so what we can do is in here we'll put in some brackets and we'll say href and then let's do dot CSS and we'll set color to red all right so let's see what that does we reload and now both links are now red now we can take it a step further and we can actually talk get the actual value of an attribute so let's say we want we want the element with the href value of yahoo.com so we'll go in here we're going to put a and then some brackets and then we'll say href equals HTTP yahoo.com and then we'll just use our CSS method here and we'll say color green so now if we go and we reload you'll see that the yahoo link is now green okay so we can target attributes as well as the attribute values and then we also have the asterisk which will grab everything okay so if we were to say pop that in there and we'll say dot hide and we reload everything is gone okay because this is just a wild-card for anything all right I'm going to comment that out all right so hopefully this helps you with understanding what types of selectors we can use okay we can use the element themselves we can use IDs classes we can nest selectors we can use the css3 pseudo selectors all right so plenty of ways to do it to grab certain elements all right so that's it for selectors now we're going to move on to events

Channel: Traversy Media

Views: 325,154

Keywords: jquery, jquery selectors, jquery tutorial

Id: 3nrLc_JOF7k

Length: 21min 12sec (1272 seconds)

Published: Sun Sep 18 2016