- What is jQuery? 3:10
- jQuery: History and Relevance Today 2:51
- jQuery vs. JavaScript 6:02
- Review: What is jQuery? 5 questions
- Animating Elements with jQuery 7:43
- jQuery Syntax and Animation Effects 2 objectives
- Blog Previewer: Changing Content Inside Elements 7:13
- Using text() and html() 3 objectives
- Blog Previewer: Getting Values from Form Fields 6:06
- Getting Values from Form Fields 2 objectives
- Introduction to jQuery Review 5 questions
Preview
Video Player
00:00
00:00
jQuery vs. JavaScript
6:02Some of the differences between JavaScript and jQuery syntax.
Go ahead and open up the workspace for
this video, and click the Preview button.
0:00
You'll see we have a very basic web
page with just a header and a green box.
0:05
For simplicity's sake, I've already
added jQuery to this project and
0:09
hooked it up, so everything's ready to go.
0:13
Open up this js folder here, and
you'll see a blank app.js file.
0:16
This is where we'll do our coding.
0:21
Later in the course I'll show you how
to add jQuery to your projects and
0:23
set up these files on your own.
0:26
Say we wanted to use JavaScript
to make the box disappear.
0:28
First we'd need to select it, so
let's go to the index.html file and
0:32
see what classes or IDs it has on it.
0:37
We can see that it has a class of box.
0:40
To hide the element
using plain JavaScript,
0:44
you could do something like this.
0:46
Let's go to our app.js file.
0:48
Use the querySelector method to find and
0:50
select an element that has
a CSS class attribute of box.
0:52
Then we'd save it to
a variable called box.
0:57
Then change the style's
display property to none.
1:01
Save, refresh the preview,
and the element disappears.
1:10
Let's comment out this code.
1:14
Refresh the page to bring the box back,
and see the same thing in jQuery.
1:17
JQuery is a JavaScript function that
you call just like any other function.
1:26
This is an important thing to note.
1:32
jQuery is just JavaScript.
1:34
It's essentially a collection of functions
that make things a bit shorter and
1:36
easier to code when working with the DOM.
1:40
Similar to the querySelector function, we
can pass the jQuery function, the element,
1:42
with the CSS selector class of box.
1:47
Once you've selected an element on your
page, jQuery provides a ton of special
1:50
methods you can use to animate,
change, or manipulate that element.
1:54
Let's call the jQuery
hide function on the box.
1:58
Save, refresh, and the element is hidden.
2:06
When you're writing a jQuery application,
2:10
you'll be calling the jQuery
function over and over again.
2:12
To save a bit of extra typing, jQuery
provides a shorthand, the dollar sign.
2:15
So instead of using jQuery here,
2:21
I can replace this function
name with a dollar sign.
2:23
These two lines of jQuery
are functionally identical.
2:33
They do the exact same thing,
only one is shorter.
2:36
So we can comment this out,
save, refresh, and
2:40
you can see it works
in the exact same way.
2:43
As you can also see, this line of code
is concise and extremely easy to read.
2:48
You can look at it and tell exactly
which element you're manipulating and
2:53
how you're manipulating it.
2:57
And it's probably gonna be a little easier
to remember than document.querySelector
2:59
and style.display = 'none'.
3:03
It's also worth noting that the JavaScript
method querySelector is relatively new and
3:05
was actually inspired by
jQuery's convenience methods.
3:09
Before querySelector came around,
you had to use much more specific and
3:13
long-winded methods to select elements
such as document.getElementById.
3:19
Get elements by tag name, and
get elements by class name.
3:26
I can bring the box back by using
another jQuery method called show.
3:31
And it comes back.
3:42
Let's comment out all this code and look
at one more comparison, a click event.
3:44
jQuery's click method is part of
a group of methods that listen for and
3:49
run code in response to an action
that has occurred on your webpage.
3:54
Like the user clicking a button,
submitting a form,
3:58
moving the mouse around the screen,
hovering over an element, and so on.
4:01
I'll write some code so
4:05
that this element with the class of box
displays an alert when it's clicked.
4:06
Here's what the code for a click event
would look like in plain JavaScript.
4:10
First you would select the element using
querySelector which we've already done and
4:15
saved to a variable at
the top of the document.
4:19
So I'll just uncomment that.
4:21
Then you'd call the addEventListener
method on that element.
4:25
A pass up the type of event you
want to listen for, which is click.
4:32
And then the event handler callback,
4:37
a function that you want to run
when the element is clicked.
4:38
Remember a comma here.
4:42
Let's save and refresh.
4:55
And as you can see, now when I
click on the box, I get an alert.
4:58
Let's comment this out and
see the same line of code in jQuery.
5:04
With jQuery, you select
the element using a CSS selector.
5:10
Then you use jQuery's click method to
do something to the element you just
5:16
selected by passing it
a callback function.
5:21
Save and refresh.
5:36
As you can see,
this code is pretty concise and
5:39
readable as well and
works in the exact same way.
5:42
If this feels like a lot to take
in at the moment, don't worry.
5:46
We'll revisit jQuery events and explore
them in more depth in later videos.
5:49
Now that we have a bit of
background on jQuery and
5:54
some idea of how it works,
it's time to get started on some projects.
5:56
Let's dive into it.
6:00