- Adding jQuery to a Project 2:43
- Spoiler Revealer: Breaking it Down 6:28
- Understanding Unobtrusive JavaScript 4:38
- Adding New Elements to the DOM 5:06
- Progressive Enhancement and Unobtrusive JavaScript 5 questions
- Adding New Elements to the DOM 2 objectives
- Using on() for Event Handling 2:26
- Using Events with Dynamically Added Elements 4:41
- The Event Object 4:44
- Events with jQuery 2 objectives
- What is Traversal? 8:42
- DOM Traversal with jQuery 2 objectives
- jQuery Events and DOM Traversal Review 5 questions
Preview
Video Player
00:00
00:00
Spoiler Revealer: Breaking it Down
6:28We start planning our spoiler revealer and learn a bit about using descendant selectors with jQuery.
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