Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Wield the power of special jQuery selectors.
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
[MUSIC]
0:00
We've learned a lot about jQuery so far.
0:04
You've learned how to select major
elements, respond to user events,
0:08
chain jQuery methods together to create
simple animations, traverse the DOM,
0:12
work with the event object, and create and
insert new elements onto a page.
0:17
We're going to finish up with
one more small jQuery project.
0:22
For this project,
we'll use jQuery to add some styling and
0:26
functionality to a simple prototype
of a newsfeed application.
0:29
We'll dynamically add some status
warnings based on the type of link.
0:33
If a user tried to click to
download an insecure PDF link,
0:37
we'll present them with a confirmation
message before triggering the download.
0:41
You'll learn more about jQuery selectors,
0:45
events, looping through
jQuery collections,
0:47
using jQuery to style elements, and
another handful of useful jQuery methods.
0:50
We'll add some additional functionality
to these links in the next video.
0:55
As you can see,
0:59
jQuery gives you many flexible powerful
ways to access different items on a page.
1:00
Let's keep moving.
1:05
There are two categories
selectors you can use with jQuery.
1:07
First, standard CSS selectors
from the W3C specification.
1:10
Nearly any selector that you would
use to select an element with CSS,
1:15
you can use to select
an element with jQuery.
1:19
This includes selecting an element or
collection of elements directly by a tag
1:21
name h1, p, image, anchor, etc, or
selecting elements by ID or class.
1:26
And even selecting elements by some
pseudoclass selectors such as :first and
1:33
:last.
1:38
Then there are jQuery specific selectors.
1:38
Selectors that were added to jQuery to
make some common types of selections
1:42
easier, like selecting your radio
checkbox or a password field, odd or
1:46
even elements in a list, or selecting
currently visible or hidden elements.
1:51
There are even more jQuery
specific selectors.
1:56
Check the teachers notes for
a link to a more comprehensive list.
1:59
Go ahead and open up the workspace
with this video and click preview.
2:03
We have what we're going to
pretend is a simple prototype
2:07
of a newsfeed application,
like Reddit or Hacker News.
2:10
Much like the blog previewer we did
in the first part of this course,
2:13
we won't be creating a whole newsfeed app.
2:17
We'll be using jQuery to
prototype some simple features for
2:20
what could be a part of a larger and
more complex project.
2:23
Let's take a quick look at the HTML.
2:26
The idea is that the user would
eventually be able to add or
2:30
remove links to articles in this list.
2:33
And the programming we're gong to write
will dynamically add a safe flag to secure
2:37
URLs, URLs that start with HTTPS and
2:41
a locked flag to any URLs
that point to a PDF.
2:46
We'll also write jQuery to check if
the user wants to allow PDF downloads or
2:51
not, and to allow and
prevent those downloads accordingly.
2:55
jQuery is already included on the page and
so is app.js.
3:00
Open the app.js file and
you'll see that it's empty.
3:05
Let's look at how we can
practice selecting some elements
3:09
with jQuery's specific selectors.
3:12
Say I wanna select and do something
with every odd element in the list.
3:14
First let's create a variable to
store all of the odd elements.
3:21
One thing I could do is
I could go to my HTML,
3:25
go through this list and
add a class of odd to every odd element.
3:28
And then use jQuery to select and
do something to those elements.
3:37
That would work, but what if I had
a list with dozens of elements, or
3:41
I don't know how many elements
the list will ultimately have.
3:44
That's where jQuery's custom
selector odd can come in handy.
3:48
We can select all of the odd
anchor elements like so.
3:52
Let's call hide on these elements.
3:58
If I save and refresh the preview,
4:04
you'll see that only the elements
with an even numbered index remain.
4:06
Remember, the indexes of these elements
are zero, one, two, and three.
4:11
So the second and
fourth elements become hidden.
4:18
You may have noticed that
just like in the last video,
4:21
when we select these anchor items,
we don't need a for
4:24
loop to cycle through all of the links and
apply a method to each one.
4:27
Many of jQuery's methods provide
a kind of built-in looping feature.
4:32
When we use the hide or
equals method, for example,
4:36
it's applied to a selection of
multiple items, like these links.
4:38
jQuery loops through the collection and
applies the hide method to each element.
4:43
Remember that the jQuery function doesn't
return a regular collection of DOM
4:48
elements like when you
use plain JavaScript.
4:52
It returns a collection of jQuery objects,
meaning a collection of objects that come
4:55
with all of the handy
methods that jQuery offers.
4:59
Because of that, many developers like to
add a dollar sign to denote variables that
5:03
contain jQuery selected elements.
5:07
So let's add a dollar sign
before the variable name odd.
5:10
Let's explore a couple more selectors
by selecting all secure external links.
5:18
First, I'll create a variable.
5:23
Let's get rid of this hide first.
5:27
I'll name my variable secureLinks.
5:33
To select secure external links,
we can use the attributes starts
5:36
with selector to find and
select all links that begin with https.
5:41
Here's what that selector looks like.
5:45
Don't worry if the syntax of this example
looks a little scary or confusing.
5:59
The caret basically means starts with.
6:04
So we're asking jQuery to
find all the anchor tags with
6:07
an href attribute that starts with https.
6:11
So that will be the Learn jQuery,
jQuery Docs and jQuery Glossary links.
6:15
Let's hide the secureLinks by calling
the hide method to make sure this works.
6:26
And it does, hurray.
6:34
If we delete the hide method and
refresh the page, the links come back.
6:39
Remember JQuery runs in
the current webpage.
6:45
So refreshing the page reruns JQuery and
all of the JavaScript code on the page.
6:48
The starts with selector isn't just for
anchor tags,
6:53
it will work with pretty much any
attribute on any HTML element.
6:56
For example, if you had a form and wanted
to hide all inputs with a name attribute
7:01
starting with a particular string of
letter say inputs dealing with addresses,
7:06
you can type something like this.
7:10
And that would return to you any input
fields that have a name that start with
7:17
the letters ADD.
7:21
Now let's use the attribute endsWith
selector to select PDF links.
7:23
I'll start by creating a variable.
7:28
And we can copy and
paste the startsWith selector and
7:33
replace the caret symbol for
a dollar sign.
7:36
A dollar sign matches the string
at the end of an attribute value.
7:43
We can change https to PDF to
find all anchor elements on
7:50
the page that end in PDF.
7:55
Let's call hide on this
element to see if it works.
8:01
And it does, the PDF disappears.
8:07
We'll add some additional functionality
to these links in the next video.
8:11
As you can see,
jQuery gives you many flexible,
8:15
powerful ways to access
different items on a page.
8:18
Let's keep moving.
8:21
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