Lesson 7 - Selectors in jQuery, part two
In the previous lesson, Selectors in jQuery, part one, we started to examine jQuery selectors. In today's JavaScript tutorial, we'll continue and introduce more of them.
Preparing the document
As with the previous selectors, we'll demonstrate everything on the same HTML document. For completeness' sake, I'll put here its HTML and CSS parts again.
HTML
<ul id="web"> <h2>WEB</h2> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>PHP</li> <li>ASP .NET</li> <li>JAVA</li> </ul> <ul id="desktop"> <h2>DESKTOP</h2> <li>JAVA</li> <li>C# .NET</li> <li>VB .NET</li> <li>PYTHON</li> <li>PASCAL</li> </ul> <ul id="animals"> <h2>ANIMALS</h2> <li>DOG</li> <li>CAT</li> <li>PARROT</li> <li>LION</li> <li>DRAGON</li> <li>TURTLE</li> </ul> <ul id="colors"> <h2>COLORS</h2> <li>PINK</li> <li>BLUE</li> <li>BLACK</li> <li>GREEN</li> </ul> <ul id="nonsense"> <h2>NONSENSE</h2> <li data-nonsense="69">69</li> <li data-nonsense="69 xoxo">69 xoxo</li> <li data-nonsense="69-nth">69-nth</li> <li data-nonsense="nu69kl tik">nu69kl tik</li> <li data-nonsense="hute 69p ui">hute 69p ui</li> <li data-nonsense="qwe 69rty" id="qwerty">qwe 69rty</li> <li data-nonsense="69 BIT">69 BIT</li> <li data-nonsense="party 69">party 69</li> </ul>
CSS
body { background: #e5e5e5; color: #3d3d3d; margin: 0px; font-family: 'Open Sans'; } * { margin: 0px; padding: 0px; text-decoration: none; list-style-type: none; border: 0px; } ul { float: left; padding: 10px 20px; text-align: center; } ul li { background : #CACACA; color : #444; width : 80px; border : 2px solid #A6A6A6; margin : 10px 0; padding : 5px 10px; font-family: 'Open Sans'; font-size : 18px; text-align: left; } .green { background : #61E452; color : #ededed; border : 2px solid #1A7010; } .blue { background : #0080C0; color : #ededed; border : 2px solid #004080; } .yellow { background : #F4FF2F; color : #444; border : 2px solid #D0CB04; } .red { background : #ed1c24; color : #ededed; border : 2px solid #7f0011; }
The page looks like this:
Pseudo selectors
Pseudo selectors are selectors which select elements according to some property.
$(":first-child")
The :first-child
selector selects, as you can surely guess from
its name, the first child or children of a given parent element or elements.
An example:
$("ul li:first-child").addClass("blue");
The result:
$(":first-of-type")
Using :first-of-type
we can select the first element of a given
type in a given parent element. The type can be e.g. a paragraph -
p
.
An example:
$("ul li:first-of-type").addClass("blue");
The result:
So what is the difference between :first-child
and :first-of-type
?
If we try to use these selectors in our example, we'll find that only
:first-of-type
works. It's because in our list the first element is
always a heading. That means li:first-child
is not in the list.
$(":last-child")
It's the opposite of :first-child
, it selects
the last element of a given parent element. As with all jQuery methods, it's
possible to select multiple elements (e.g. the last elements from multiple
lists). For the other methods and selectors we'll no longer mention this
information.
An example:
$("ul li:last-child").addClass("blue");
The result:
$(":last-of-type")
The :last-of-type
selector selects the last child of a given
type from a given parent element.
An example:
$("ul li:last-of-type").addClass("blue"); // in our case the same effect as the last one
The result:
$(":nth-child(n)")
This selector selects the n-th child element in a given parent.
An example:
$("ul li:nth-child(3)").addClass("blue");
The result:
$(":nth-of-type(n)")
And now we'll select the n-th element of a given type.
An example:
$("ul li:nth-of-type(3)").addClass("blue");
The result:
$(":nth-last-child(n)")
This selector is similar to :nth-child(n)
but here we select
from the end.
An example:
$("ul li:nth-last-child(3)").addClass("blue");
The result:
$(":nth-last-of-type(n)")
As the previous selector, it selects from the end, but now only elements of a given type.
An example:
$("ul li:nth-last-of-type(3)").addClass("blue"); // in our case the same effect as the last one
The result:
$(":only-child")
The selector selects all the elements that are alone in a given parent element.
An example:
$("h2:only-child").addClass("blue");
The result:
$(":only-of-type")
A variant of the previous selector, there has to be a single element of a given type in a parent element. In this case, there can be elements of another types in the parent element.
An example:
$("h2:only-of-type").addClass("blue");
The result:
We can also include the special jQuery selectors here which are
:lt()
, :gt()
, :odd
,
:even
,:first
, :last
, and
:eq()
. But we'll talk about them next time.
Filtering content
At the end of today's lesson, we'll introduce selectors to filter the contents of a parent element.
$(":not()")
The :not()
selector negates any selector. It selects elements
that doesn't match it.
An example:
$("ul li:not([data-nonsense='69'])").addClass("blue");
The result:
$(":contains()")
This selector selects elements that contains a given substring (e.g. a word) in their inner text. Be careful about letter case, the selector is case-sensitive.
An example:
$("ul li:contains('A')").addClass("blue");
You can notice case-sensitivity in the last column where nothing containing a
lower-case a
is colored.
$(":empty")
The :empty
selector selects elements that don't contain any text
nor nested elements.
$(":checked")
This selector selects checked inputs of the radio
or
checkbox
types.
We'll continue next time and complete jQuery selectors in the lesson Selectors in jQuery, part three.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
Download
By downloading the following file, you agree to the license terms
Downloaded 2x (2.12 kB)
Application includes source codes in language JavaScript