jQuery Basics

Loading...

From the course by University of Michigan

JavaScript, jQuery, and JSON

95 ratings

University of Michigan

JavaScript, jQuery, and JSON

95 ratings

Course 4 of 4 in the Specialization Web Applications for Everybody

In this course, we'll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We'll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You'll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery). It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.

From the lesson

Using JQuery

This is a brief introduction to the JQuery library which is widely used to do in-browser manipulation of the Document Object Model(DOM) and event handling.

jQuery Basics19:46

Code Walkthrough: jQuery Basics13:03

Forms and jQuery13:11

Code Walkthrough: Forms and JQuery14:31

Meet the Instructors

Charles Severance
Associate Professor
School of Information

So, we've learned JavaScript.

We've learned about the Document Object Model.

We've learned how flawed the Document Object Model is.

And we've learned JavaScript Object-oriented programming.

To some degree, all that is so

that we can use jQuery, because jQuery makes our life really simple.

If we place all this in the grand scheme of things, right?

So we get some HTML.

We parse the response.

So some of it goes into the DOM and some of it actually is JavaScript.

And so JavaScript talks to the DOM and was shown all that stuff.

What jQuery is,

is a library, a client side library that makes JavaScript easier to use.

So everything that we're going to do in jQuery, which is manipulate the DOM, and

eventually we're going to talk back and forth to the server,

is just easier in jQuery.

You don't have to worry about browser portability, etc., etc., etc., etc.

So jQuery is just like it makes the things that we could do if we really wanted

to do it the hard way, we could do it.

But nobody wants to do the hard way anymore, so everybody uses jQuery, so

away we go.

So again, jQuery is all in the browser.

And again, you'll notice that most of the files and

all these sample codes are just HTM files,

they're not PHP code, because they're not really running anything in the server.

We just have a static file in the server, which we return that includes JavaScript.

And so all the coding that we're doing is coding that's running

in the context of the browser.

So that's sort of where we are at right now.

And literally, for the rest of this course, and

even in other courses, the tendency is going to kind of focus in this direction.

We're going to do more and more cool stuff in the browser and less and

less in the server.

We started out by doing everything in the server.

We still have databases to deal with, but we kind of move toward the browser.

And web applications in general are doing more and

more of their interactivity in the browser because it's a better user experience.

You could argue do you want to do it all in the browser,

that's a different argument.

But certainly there is no argument that a lot of the stuff is becoming interactive

in the browser because its so dynamic and it works more like a desktop application.

So by now or if you haven't, please watch the video of John Resig.

I give you these interviews because

I want you to understand the mentality of what produced these, right?

jQuery is a piece a code, yes.

But as also an expression of a personality in John Resig

is a person that created this, and so it's an expression of who he is.

So John Resig is a really smart computer scientist.

In 2005, he was just tired of building interactive web applications that use

JavaScript and he was tired of doing non-portable stuff, and

he also saw the elegance of JavaScript itself.

How JavaScript's object pattern worked.

Stuff I just talked about in the last lectures.

He's like JavaScript is not a crappy language,

it's actually an impressive language.

And so as a computer scientist, as a young, undergrad computer

scientist at RPI, I think Rensselaer Polytechnic in upstate New York.

He's like,

this is kind of a neat computer science place to do kind of respectable work.

This is something that's not just crap work.

And if you go and listen to Brendan Eich talking about JavaScript,

he'll say, JavaScript was originally thought of as the crappy language.

And it sort of does silly things, and puts up pop ups, and annoys you and

has scrolling and whatever, but in this 2005, 2006, 2007 timeframe,

JavaScript was sort of coming, and the browser, was coming into its own as

a respectable place that talented computer scientists would want to work.

And certainly, sitting here, ten years after that, we see things like Angular,

and React, and all these things where JavaScript is really the focus.

And then, JavaScript is taking over the server as well with things like Node.js.

So, John Resig was like what are the kind of things we have to do

in the browser all the time.

Well, one is you gotta go find stuff in the DOM and do stuff to that,

like change its color or hide it or show it or whatever.

And the other thing is that there's events and that's the events that we've looked at

so far like unclick equals or unchange equals, those kind of events.

And jacking into those events was simple things like clicking,

that worked pretty well.

But things like knowing when the document fully loaded and all the images were done,

that turned out to be very different in every browser.

And so jQuery standardized that as well about knowing when the document [COUGH]

is loaded enough so that you can run JavaScript to start playing with the DOM.

You want the DOM to be complete.

You don't want JavaScript to be looking for things that aren't quite there yet.

So it came on in 2006 which is about ten years after JavaScript was created.

John, as of this moment, works at Khan Academy and

some of you who have high school students may have taken some

of the John Resig inspired computer science classes on Khan Academy.

And he is like me, a big fan of everybody learning to code.

And he, like me, is also a big fan of moving coding down into high school,

eighth, ninth, tenth grades in high school.

And so he's a great guy and it's a fun interview.

So I encourage you to take a look at John Resig.

So this lecture is not going to sort of give you speeds and feeds for jQuery.

One of the things that John talks about is there were other competitors to

jQuery in 2005, 2006, like Prototype and NewTools.

And they were like religions and jQuery was just one of the religions.

But jQuery in a very short period of time won.

And John credits, and I think I agree with him, that he

credits the reason that jQuery won in '05, '06, was that it had better documentation.

And he put a lot of time into documenting what he did, not just writing great code

and making it so he could use it, but making it so others could use it.

So literally, you'll say things like,

how do I animate an image to appear and slide in from left to right with jQuery?

You type that in and then bang, you're on stack overflow or you're on a jQuery page.

The jQuery documentation is superb.

It's both thorough but it also gives you these little tiny snippets

of like five lines that do pretty much what you want to do.

So you just ask the question into your search engine.

You either go to stack overflow or jQuery.

You copy and past five lines.

You stick in your thing.

It starts working and then you changed two of them to do exactly.

So, I'm really going to just spend this lecture talking about the real

basic things that jQuery does, knowing that you can figure this out on your own.

So here is the first kind of jQuery thing.

Okay, so

the first jQuery thing that we gotta do is we gotta load the jQuery library.

And that's just a, so you have to have these files somewhere.

You can actually loaded off of the Internet, Google has hosted copies of it,

there are things called CDN, Content Data Networks, which are unlimited,

super fast bandwidth things, so

you don't even have to load it off of your server if you don't want to.

So if you go look at jQuery documentation, they will give you

a couple of version of how to pull jQuery in to your application and

there is different versions of jQuery and there is plugins.

But for now we're just going to start with a copy of jQuery somewhere and

we'll stick right on.

In this, I'm just giving to you in the file.

So that's got a version of jQuery in the file.

So we just load it.

Now, I'm including stuff like this.

It probably shouldn't produce any output or anything like that.

It just says function, function, function, function,

or may just be some classes that are being created but no objects and no output.

And so that's what that does.

It just defines jQuery.

Now the interesting thing about jQuery is the biggest thing that it does is it

defines a global object with the name of dollar sign.

Now, when you look at jQuery, you look at how the code of jQuery looks like,

you see this dollar sign parentheses, dollar sign parentheses.

And most people look at that and say, that's just like a JavaScript magicism.

It's not, it's actually a function on object named dollar sign.

If you go all the way back into our script,

you'll say variable names can be letters, it can start with upper and

lower case letters or underscores or dollar signs.

And if you recall what I said was, dollar sign is tacky because it reminds

us of pearl and bash and all these other scripting languages.

And so for the first 10 years of JavaScript,

no one used anything with a $ sign.

And so along comes John Resig, and he goes like, what should I name my object?

Whoa, no one uses $ sign.

Turns out about that time, people were figuring it out and

there was a couple other things that used $ sign.

But jQuery used dollar sign, and so it looks like language syntax, but it's not.

That's just the name of an object.

And now we're calling that object with parenthesis, and so

we're passing in a parameter, okay?

And so that helps us understand.

And I'll tell you what,

when I first looked at jQuery, I was like, it's just a bunch of curly braces,

semicolons and parentheses that just like someone threw a bunch of punctuation.

There was a car accident and a box full of punctuation just fell all

over the place and we picked it up and that's what jQuery looks like.

But when you write this stuff, you gotta have it work.

So let's understand really quickly what's going on here.

Dollar is the name of an object.

We're calling the object with a parameter, and the parameter is document.

Document is the JavaScript concept that is the Document Object Model.

That's predefined in all the JavaScript it runs in a browser.

That sort of passing document in.

That's one of the predefined values, or

predefined objects that's in the browser already.

And now what we're doing is, this is returning code, remember,

first class functions.

And we're going to within that call the ready method.

That's from here to here is the ready method.

The ready method has one parameter, ready, we could call it x.

But that's not what we're calling.

We're still passing in one parameter, but we're passing in is code.

Because the function In JavaScript,

because of first class functions, returns code.

So this bit right here is in effect a constant that's being passed into ready.

And what we're supposed to pass into ready is code that we want to have executed.

So this is delayed execution.

This code doesn't execute until jQuery decides that the document is fully loaded

and ready to be viewed.

And so it will call our code, win and only win.

This is registering an event.

The event is, when the document is ready.

And so we register the event, and then we have to put the code in to run.

So we're passing, so at this point when the code runs,

jQuery simply retains this code and remembers it.

It runs it later sometime after this body is done and

the things have loaded etc, etc, etc.

And then it runs our code.

So this is delayed execution.

This is an event.

That's another way for it to say the same thing, delayed execution, event.

It's also asynchronous.

You don't know exactly when the code is going to run.

jQuery knows the moment that your code is supposed to run.

You have handed it the code that you want to run when this thing happens.

And it's first class functions.

If you understand it, it's absolutely gorgeous.

And you can kind of see why early sort of folks like Resig,

who were building JQuery were like, wait a sec.

This is a gorgeous language.

And first class functions make this different than any other programming

language that you've experienced.

Like I said earlier, small talk, and Lisp and others, had this concept but

JavaScript is like the first language, the first class function is right here.

Okay, so now let me clear the screen and

let me explain to you what this does.

So that's the syntax.

But after a while, you're going to be cutting and pasting.

You'll be like, cut paste, cut paste.

And you'll stop thinking about it.

And all you'll think about is this stuff right here.

So in some level this becomes a magic idiom that we just do over and

over and over again.

Okay, and so we're loading the jQuery library.

This line right here is like an idiom that says,

when the document is ready, run this code.

This is also an idiom that sort of completes the parenthesis and

semicolons and all that stuff.

So what we're telling jQuery is, after the body is done and

when other stuff is finished, come and run our code, okay?

That's what we're asking.

And so when it happens, we're going to run an alert.

We're going to do a console.log, okay?

And that's just so we can see what's going on and

if you run this, you'll see that happen, okay?

So if you run it, you'll see that happen.

So, the next concept, again,

one of the two things that jQuery does is sets up events.

So, the first thing we saw is setting up an event.

So, in this one, we are going to ask to be called when ever the window is resized.

So again, we just load the jQuery library.

And this time we parse the window.

Let me see if I can draw us a picture of this.

So the window is what you're seeing and

there is, the Document Object Model is all the stuff.

And so if you have a scroll bar,

the window is only seeing some of the Document Object Model.

So you've scrolled up or down.

Maybe you're seeing this part.

Maybe you're seeing this part down here.

So, not all of the Document Object Model is showing in the window at

any given time.

So, the window is the part you can see, window, DOM, Document Object Model.

And so, for example, this window has width and height.

The Document Object Model does not have width and

height, because the window is what you're seeing;

Document Object Model is what is the entire webpage that's behind it.

Part of the Document Object Model is what is being shown in the window, but

it's not the thing.

So, there is no width or height for the document, so

you have to say, hey, how wide of a window am I in right now?

And so we parse window in through jQuery, and

we have a different set of events that we jack into.

So we say okay, I would like you to call me whenever this window is resized, and

what resizing means is you grab the corner of this and made it bigger or

smaller, right?

You made this bigger or smaller.

When the window gets resized, call my code.

So this is sort of an idiomatic way of saying, I have

a couple lines of code that I want to run every single time the window gets resized.

Okay, and so

the code that we're going to run every time the window gets resized is this code.

We're going to console.log, say it's been resized.

And you run, show the width, $(window).width,

that's a method within jQuery's window object that tells you how wide it is.

So now we're looking at that window and we're seeing the width and

we're seeing the height.

And again, Document Object Model is over here.

Window DOM, not NOM, right?

It shows the subset of this.

So subset of this is actually what you're seeing.

But if you move this, it's going to call this code.

You change this size, it's going to call this code.

What it's also going to do, is this turns out to be hard to calculate.

Go Google on the stack overflow and say,

how do I find the Windows width without using jQuery.

And they'll give you like this much code.

And they tell you well, what browsers do you want it to work on?

Do you want it to work on IE7, blah, blah, blah, blah.

Here's what you write on IE7.

Here's what you write on blah, blah, blah.

And you're like, no, don't do it.

Use jQuery, window.width, it tells you exactly the number of pixels and

it tells you windows.height tells you the exact number of pixels.

Now, generally not going to print this out.

You might have to resize some of the stuff that you got in the DOM or something,

so that if you make it small, you want to like the height of column or

something like that, you're doing something like that in this code.

But it's another example of jacking into the event structure

of the Document Object Model in the Window to say, call me back, right?

This basically says, call me back when they resize the window and

run this code when they resize the window.

And this part and

this part are kind of just like idiomatic things that you cut and paste from

one thing to another even though you should know what the syntax really means.

Okay, the other things you can do other than jacking into

events is you can change the Document Object Model.

So if you go back a couple of lectures where I used by id,

and we changed the Document Object Model, this is kind of doing that same thing.

So this is an example of those little animated spinners that are spinning around

that you see all the time.

It's kind of indicating you're waiting.

What we're going to show you is how to hide and show those things, right?

And so what we do is we put out image tag.

Right here, and we're going to give an id, remember id equals,

there's only one per document.

And we're going to have spinner.gif.

We're going to have height and a width.

And then we'll say display:none.

And that means, by default,

on this page, that spinner is there on the page, but it's hidden.

And then we're going to have a little toggle.

And we're going to have an event, an onclick.

There's a way to register events in jQuery that I didn't show you.

This is an old school onclick, but it's okay, because whenever we click on toggle

this JavaScript is going to run, so it's going to be jQuery.

And so we say $(, and instead of sending the whole document or the whole window,

we say '#spinner, and that says go look up the ID spinner.

And that grabs this whole tag, and

then this is a jQuery function called toggle.

What toggle does, is it looks to display none, it checks it.

If it's not currently displayed, it changes it.

And then, if it is displayed, it sets a display:none.

So it's toggling, if you were to watch this in your inspect element,

you would notice that this is changing.

And, you don't have remember, you'd have to write a variable to figure it out.

You're just saying, show it or don't show it.

There's a dot show and a dot hide as well.

And dot hide.

If you want to hide it and show it, you can do that.

So this is a way to grab a chunk of the DOM, and

then you have certain methods that you can execute on that based on,

you have to go read the jQuery documentation to see them all.

So that's hiding and showing an element.

We can also grab something and change its color.

So here I have a little button called Red and we're going to grab this paragraph,

because we're going to say $#para, it says give me this paragraph.

Now this has no CSS on it, no other CSS.

And then once we grab that paragraph $#para.CSS.

This is a jQuery method CSS and

we pass in a CSS variable background-color and we set it to red.

And so that means that whatever this paragraph is,

it's going to have a background color of red every time you click that button.

And similarly if you click this green button,

it's going to go grab that, set the background color to green.

So you go red, green, red, green, red, green and

this little paragraph is going to pop back and forth as red and green.

And so that's basically how jQuery works to grab things and operate on them.

And again, that's just very much the beginning.

So the next jQuery example we're going to show is how you can actually like,

look at forms and auto submit forms and talk to the server in jQuery

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play