jQuery Tutorial for Beginners

JQuery Tutorial for Beginners – 3 – First JQuery code

we’re going to pick up right where we left off in the last video and we’re going to write our very first jQuery code in this video and we left off of course specifying our jQuery library in

this script tag now we’re going to do of course is at our jQuery code but we don’t want to put our jQuery code inside of this script element we want to actually create another script element

where we can specify our jQuery code and of course we want it after we load the library not before because remember we want the web page to be loaded first and our jQuery library to be downloaded and

then we can go ahead and manipulate the Dom you will remember in the JavaScript series it’s all about manipulating the Dom and you’ll remember the Dom is just a tree right it’s just a tree that

represents our HTML document and that’s of course always what we are manipulating so let’s create a script element tag to hold our jQuery and we’ll just close it down here and there we go

now before we actually write our jQuery code I’m going to copy and paste a jQuery function in here and there it is it’s called the ready function now this is X more like a wrapper we will put

from this point on we will put all of our jQuery code inside this ready function that jQuery provides now all this does is it basically waits until the web page is actually downloaded

before any of our jQuery code is executed and that’s nice because remember we cannot manipulate the Dom until the Dom has been created so that’s why this jQuery ready function that

jQuery provides is very nice to use and like I said you can just forget about this you really don’t have to remember anything else the only thing you really have to remember is that we’re going to

put all of our jQuery code inside this function and so that’s all you need to know so before we actually write our jQuery code let’s actually fire up the web page and see what it looks like and

you can see I’ve got three content areas a left center and right if we stretch this out they would be side-by-side okay so now let’s write our jQuery code now to call the jQuery library you always

start out with a dollar sign that really just stands for the jQuery library now you could write out just jQuery you could actually do that in instead of writing the dollar sign but

that’s not really how people do it so you really just want to use the dollar sign now once we specify this dollar sign again we are calling the jQuery library and jQuery creates an object for

us to use it will remember objects from the JavaScript series so I’ll go ahead and copy and paste this here now this is the basic format there’s an open parenthesis and we have either single

quotes or double quotes in here in this case we’re using double quotes and then we just use a selector in this case a CSS selector to select whatever element or elements that we want to manipulate

it’s that easy so let’s manipulate this right content area here first so as you can see in the HTML we gave it an ID and we called it right so you will remember from the CSS

series we always specify a pound sign for that type of selector and then we can just put in right it’s that simple now you will remember from the JavaScript series remember all the code

we had to do we had to use the get element by ID method and then we had to sign it to an a variable which of course was an object that’s all done right here look how easy that is we simply put in

our selector and we’ve got our object it’s that easy and so that’s why jQuery the fundamental level is so much easier to use than JavaScript we can just use CSS selectors to select the elements

that we want to manipulate now you will remember in the JavaScript series the dot allows us to access two main things from an object you will remember there are properties and there are methods and

so that’s what we’re going to use we’re going to use our very first jQuery method and that is the hide method and you’ll remember that we use open parentheses to specify a method and then

we close it with a semicolon and so here is your very first jQuery method so let’s go ahead and save this now if this works our right content area now should disappear let’s refresh the page and it

did take a look at that now isn’t that really amazing think about this if we were doing JavaScript we’d probably need at least three to four lines here to do all this here we’re just doing this in

one line isn’t that amazing and so you can see just how much easier jQuery is to use now let’s say we want to select another el let’s select this div here with the

center ID now you remember and CSS to do that we just put a comma and then we can use another selector and in this case it’s going to be pound Center so we’ll go

ahead and save this will refresh our page and now the center element is now gone now if we were doing this in JavaScript we have to do a whole slew of things to get both of these elements

selected but here is just as simple as adding the correct CSS selectors so you can see how nice jQuery is to use and really at its basic level jQuery is all about knowing the selectors to use and

learning the methods and properties once you do that you have about 90 percent of jQuery down and so that’s what we’re going to spend a lot of time in this series doing we’re going to learn all

the selectors and by the way it’s not just about CSS selectors there are selectors that jQuery provides to us that are not in CSS so we have to learn those as well and as I said we need to

learn the methods and properties so that’s the main thing we’re going to be doing in this series okay see you guys in the next video

In this tutorial we create our first JQuery code. I am going to start adding notes (link below) for each item we discuss in a particular video. This will be sort of a running list.

HTML Code: http://pastebin.com/46KmysS6
CSS Code: http://pastebin.com/0e6LSBHs
Notes: http://pastebin.com/DaGmGiWQ