"React Router 4 Basics " was retired on October 1, 2023. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
We start planning our spoiler revealer and learn a bit about using descendant selectors with jQuery.
Click event listener example:
$( "#target" ).click(function() {
alert( "I've been clicked!" );
});
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay, we've got everything set up and
we're ready to code.
0:00
Here's what our project
looks like currently.
0:03
We've got this spoiler and this revealer
button, that doesn't yet do anything.
0:06
Lets start by opening up a workspace and
going to the app.js file.
0:11
We'll take some quick notes about what
we'd like our programming to accomplish.
0:18
The idea is to take the task at hand and
break it down into smaller steps.
0:22
To be able to reveal the spoiler,
it will need to start out hidden, right?
0:26
So first,
we'll hide the spoiler on page load.
0:30
Secondly, when the button is pressed,
show the spoiler and hide the button.
0:37
Let's take a look at the HTML document,
0:53
to see which elements we'll
need to select with jQuery.
0:55
We'll be working with a paragraph
with the class of spoiler.
1:01
Inside the spoiler paragraph element,
1:05
there's a span element that
contains all of the spoiler text.
1:08
And there's also a button.
1:12
We don't wanna hide
the whole paragraph tag,
1:14
because that would hide
the button as well.
1:17
We wanna hide the span inside
the paragraph with the class of spoiler.
1:20
In a jQuery function call,
going back to app.js,
1:24
we can pass the descendant
CSS selector of spoiler span.
1:28
This selector is telling jQuery to select
any span elements that are descendants, or
1:32
children, of the elements that
have a spoiler CSS class.
1:37
In other words, any span tags that
are nested inside of the spoiler element.
1:41
Note that the span isn't a class or
ID here, it's actually a tag name.
1:45
In addition to classes or
1:50
IDs, you can use jQuery to select
any element by its HTML tag name.
1:51
Not only spans, but buttons,
images, anchor tags,
1:56
heading tags, paragraph tags,
unordered lists, even body.
2:01
Keep in mind, however, that it will select
and act upon every tag on the page,
2:06
unless you're more specific.
2:10
Which is why we're specifying
here that we only want span
2:12
tags that are descendants of
elements with the class of spoiler.
2:16
Now we can use the hide method to
hide the spoiler when the page loads.
2:20
So let's save and preview.
2:25
You can now see that
the spoiler text is hidden.
2:28
When we click the button,
nothing happens, yet.
2:31
To respond to a click,
2:34
we need to add a click event
handler to this button element.
2:35
First, we'll use jQuery to
select the button element.
2:39
Remember that the button element is nested
inside the spoiler paragraph as well.
2:42
Let's use a similar CSS
selector to what we just used.
2:48
Only instead of span, we'll use button.
2:52
We've selected the spoiler button,
so now we can use the click event,
2:59
just as we did in the last video.
3:02
Go ahead and pause the video here, and
3:05
see if you can set up
a click event on your own.
3:06
Feel free to Google it or
3:09
revisit the last video if you
don't quite remember the syntax.
3:10
It's extremely common as a developer
to look things up when you can't quite
3:14
remember, or
just getting familiar with something.
3:18
In fact, there are many things you will
never memorize, or that will slip in and
3:21
out of your mind, depending on the day.
3:25
So definitely get used
to looking things up.
3:27
I'm gonna go to my browser and
Google jQuery click event.
3:30
Your own search may yield results
that are slightly different, but
3:38
one of the first things that should
come up is the jQuery documentation.
3:41
I'll click on that.
3:46
And you'll see a lot of stuff at the top
here that kind of explains what this
3:48
method is and what it does.
3:52
I've found that when you're a beginner,
3:54
this stuff can often just feel a bit
jargony and difficult to understand.
3:56
You'll get better and better at reading
documentation with time and experience.
4:00
But what I found really helpful at first
is to scroll down and look at an example.
4:04
So we'll scroll down a bit.
4:09
And here's an example of what
a click event should look like.
4:11
You could copy and paste it straight
in and plug in your own values, but
4:15
it's probably a good idea to
use this as a reference and
4:19
type it out until you feel
really comfortable with it.
4:21
So I'll copy this, Go back to app.js and
4:24
just paste it to the bottom here,
just so we can see it.
4:28
And then we can use it as a model to
finish typing out the click event.
4:32
Now we can delete this example,
cuz we don't need it anymore.
4:46
And then, let's move the rest of
the notes inside the click handler.
4:50
So now we need to show
the spoiler on click.
4:59
How do we do that?
5:02
With the show method we
saw in a previous video.
5:03
To display the message, select the spoiler
span again, and then call show.
5:06
Let's save and preview,
and see if this works.
5:17
Great, now when we click the button,
the spoiler is revealed.
5:22
Next, let's hide this button.
5:26
Let's go back to app.js, And
select the spoiler button once again.
5:29
And then we'll call the hide
method on the button.
5:41
Now, let's save and preview.
5:44
And as you can see,
when we press the spoiler button,
5:47
the spoiler is revealed and
the button is hidden.
5:50
Great work, a lot of our first task was
review, but you've learned how to include
5:53
jQuery in a project, had some practice
consulting jQuery documentation, and
5:58
you've used the hide, show, and click
jQuery methods a couple of times now.
6:02
Hopefully you're becoming more comfortable
using some basic jQuery methods and
6:08
click events.
6:12
Responding to clicks and
hiding your showing elements is something
6:13
that virtually every website, or
web application, needs to be able to do.
6:16
Now, let's get into some new concepts.
6:21
We'll program the next
part of the spoiler,
6:23
using an idea called
progressive enhancement.
6:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up