- 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
What is Traversal?
8:42An introduction to DOM traversal with jQuery.
DOM traversal, sounds serious, doesn't it?
0:00
Not really, traversal just means
to travel across or through.
0:03
Traversal, in the case of jQuery,
means to traverse the DOM, or
0:08
to move from one element
on our webpage to the next.
0:12
If you've done DOM scripting before,
0:16
you're probably aware of some of
the terms associated with traversal.
0:17
We've used similar terms in this course
when talking about using the CSS
0:21
selectors.
0:25
But here's a refresher.
0:26
If I selected this unordered
list through jQuery,
0:28
the list items would be
described as the ul's children.
0:31
If I selected an item in the list,
the second item for
0:36
example, the ul would be the parent
of the selected list item.
0:39
While the first, third and
0:44
fourth list items would be known as
siblings to the selected list item.
0:45
The EQ, or
0:50
equals method in jQuery allows you to find
an element in a set of elements by index.
0:52
So in our example,
0:57
you could use the equals method to find
one of these list items by its index.
0:58
This is because each
list item is represented
1:04
as an array of children to the ul.
1:07
For example, going over to our Console,
to Select the second list item,
1:09
you would first select the list
items on the page using jQuery.
1:14
Then call the equal method on it, and
pass it an index of 1, like this.
1:19
We would pass an index of 1
to get the second object,
1:26
because the elements are zero index,
just like a normal array.
1:29
To demonstrate that we're selecting it,
let's use another jQuery method, CSS,
1:33
to change the element's color.
1:38
The CSS method takes an object
with the style property name,
1:42
along with the value you wanna set it to.
1:46
Don't worry too much about
the CSS method for now.
1:49
We'll revisited in an upcoming lesson.
1:52
For now,
1:54
I'm going to give it an object that will
change the color of the text to green.
1:55
And you can see that the second
item in the list turns green.
2:04
You can read this jQuery
statement as select the list
2:08
element with an index equal to 1,
and change its color to green.
2:12
Keep in mind, however,
2:17
that this jQuery collection doesn't
behave quite like a normal array.
2:18
For example, you can use the equal
method to access the array backwards,
2:23
by passing it a negative number.
2:27
If I were to put a -2 here, the equals
method starts at the end of the array and
2:33
counts backwards, to select the second
to last element in the list.
2:40
Lets refresh and
go back to selecting the second list item.
2:45
To traverse or move from the second
element in the list to the first element
2:56
in the list,
you could use the previous method.
3:00
I'll then use the CSS method to
turn that item green and hit Enter.
3:04
When I hit Enter, you'll see that
the first item in the list is selected.
3:11
The previous method returns
the sibling element immediately before
3:16
the selected element.
3:19
What we're saying here is, get the list
item with an index equal to 1.
3:21
That's Item Two.
3:25
Now go to the previous sibling element.
3:28
That's Item One.
3:30
jQuery then returns us that element,
3:32
with all the handy dandy
jQuery methods attached.
3:34
So we can change the style,
hide or show it, or
3:38
virtually anything else
we've learned about so far.
3:40
So in this case, we're saying,
take that element and turn it green.
3:43
To traverse from the second list
item to the third list item,
3:47
you can use the next method.
3:51
Refresh the page to clear
the current selection.
3:54
Use the up arrow to get the last line
of code and change previous to next.
3:57
Hit Enter, and in this example the next
method will return the third list item.
4:03
So we're saying here,
get the element with an index equal to 1.
4:09
Now get the next element,
and now turn it green.
4:13
You can also chain multiple
traversal methods together.
4:18
Refresh the page to clear the selection,
4:21
hit up to get the last line of code, and
add another next method to the chain.
4:24
Chaining two next methods here,
4:31
will traverse down the list to
get to the fourth list item.
4:33
Something to keep in mind,
if we were to add another next onto here.
4:37
We'll be returned an empty jQuery object,
because another sibling doesn't exist.
4:45
There's no fifth list item.
4:51
So nothing turns green, but we also don't
get an error in the console or anything.
4:53
Open up the workspace with this videos,
and
4:57
we'll use traversal to fix our
spoiler revealer from earlier.
4:59
Let's recap the problem.
5:03
First, make sure the spoiler
span .show is uncommented,
5:05
if you still had it commented
out from the previous video.
5:09
Then we'll wanna save and preview.
5:12
Our problem is that when
we click either button,
5:17
all the spoilers are revealed,
not just the spoiler that was clicked.
5:21
As a first step to solving this problem,
let's refresh the page and
5:26
open DevTools to look at the HTML we're
generating So when the button is clicked,
5:29
we wanna traverse to the previous element,
the sibling element to
5:37
this specific button that was clicked,
and show that span only.
5:42
Let's go to our code and delete the line
that selects and shows the spoiler span.
5:48
Instead, we'll select the button again,
using event.target.
5:55
Then, because we're going back
to the span before the button,
6:01
we can use the previous method.
6:05
We're using event.target to
determine which button is clicked.
6:07
And we're passing that information to
jQuery to select the correct element.
6:13
Then we're saying, whichever button was
clicked, go to the previous element.
6:18
That's the span element
containing the spoiler text.
6:24
And finally, show that element.
6:28
So let's save and refresh the preview.
6:31
Now when we click on the first button,
only the first spoiler is revealed.
6:39
And when we click on the second button,
only the second spoiler is revealed.
6:43
Now, note for
the purposes of our small project here,
6:48
this is a perfectly fine way to do it.
6:51
But it could potentially create a problem,
6:54
because it assumes our HTML
markup is never going to change.
6:56
For example, if we were to add another
sibling element between the spoiler
7:00
text and the spoiler button,
we'd end up breaking our code here.
7:04
So this is always something to consider
when you're traversing the DOM.
7:08
One final thing, when selecting the target
of an element, as we're doing here and
7:12
here, there's a simplified
syntax that people use.
7:16
And that's using the this keyword.
7:20
So instead of writing event.target,
we can use the keyword this.
7:23
The this keyword in JavaScript
is quite a complex subject.
7:33
But for
the purposes of the scope of this course,
7:37
here's what you need to
understand about it.
7:39
It's another way of
selecting event.target.
7:42
What we're saying here in plain English
is, this button, this particular
7:45
element that was clicked, traverse to the
element before it, and show that element.
7:51
Also, hide this particular
element that was clicked.
7:58
So let's save and refresh the preview, and
make sure it still works as we expect.
8:02
And it does, great.
8:08
Our spoiler revealer is complete.
8:11
Without adding any extra JavaScript,
8:13
we can now add as many spoilers
to the page as we want.
8:15
All of our buttons work, and
the correct spoilers will be revealed,
8:19
depending on which ones are clicked.
8:22
Additionally, our JavaScript code
is unobtrusive, fantastic work!
8:24
In the next and
8:29
final part of this course, we'll delve
deeper into more complicated selectors and
8:30
traversal methods, and learn how to
loop through collections of elements.
8:34
When we're finished, you'll be ready
to take on the world with jQuery.
8:38