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
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