Lesson 8 - Selectors in jQuery, part three

In the previous lesson, Selectors in jQuery, part two, we continued with our exploration of jQuery selectors. In today's JavaScript tutorial, we'll finish this topic.

Preparing the document

Just like last time, we'll try the selectors on the same HTML document. For completeness' sake, I'll put here its HTML and CSS code 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 document looks like this so far:

jQuery selectors

$(":header")

The :header selector selects all headings, i.e. the elements <h1>, <h2>... up to <h6>.

An example:

$(":header").addClass("blue");

The result:

$(":animated")

Using the :animated selector we can select all the elements that are being animated. We can use to edit animations in progress.

$(":hidden")

Using :hidden we can select all elements that are hidden, i.e. with display: none set.

$(":visible")

On the contrary, the :visible selector selects all elements that are visible. That means its display is set to something else than display: none.

$(":lt(i)")

This selector selects a given number of the elements of the selection which index is less than specified. Technically, the first i elements are selected. If we enter a negative number, the indexes will be counted from the end.

An example:

$("ul li:lt(20)").addClass("blue");

The result:

And let's try a negative index as well:

$("ul li:lt(-20)").addClass("blue");

The result:

$(":gt(i)")

The :gt selector will select all of the elements whose index is greater than i. Indexes are zero-based. We can also enter a negative value, causing the indexes to count from the end.

An example:

$("ul li:gt(20)").addClass("blue");

The result:

Let's have a look at using a negative index too:

$("ul li:gt(-20)").addClass("blue");

The result:

$(":odd")

This selector selects all items with odd index. Indexes are zero-based.

An example:

$("ul li:even").addClass("blue");

The result:

$(":even")

This selector, as you probably expect, selects all elements with an even index. Indexes are zero-based.

An example:

$("ul li:even").addClass("blue");

The result:

$(":first")

Using :first, we can select the first element from the elements matching the given selector.

An example:

$("ul li:first").addClass("blue");

The result:

$(":last")

And using :last, we select the last element from the elements matching the selector.

An example:

$("ul li:last").addClass("blue");

The result:

$(":eq(i)")

If we want to get an element of a specific index from the elements selected by the selector, we can use :eq. When a negative value is entered, the index is computed from the end.

An example:

$("ul li:eq(5)").addClass("blue");

The result:

And a negative index:

$("ul li:eq(-5)").addClass("blue");

The result:

$(":has(selector)")

The :has selector selects all elements that contain a given child element.

An example:

$("ul:has(li)").addClass("blue");

The result:

$(":parent")

This selector selects the parent elements of all the elements in the selection.

An example:

$("ul li:parent").addClass("blue");

The result:

jQuery form selectors

The jQuery library also provides several form selectors. They are actually shortcuts of our already-known selectors.

$(":input")

This selector selects all inputs elements.

$(":button")

The :button selector selects all buttons. It's the same as $("button") or $("input[type='button']").

$(":checkbox")

Selects all checkboxes, the equivalent may be $("input[type='checkbox']").

$(":file")

The same selector as $("input[type='file']"). A file input is a button that lets us select a file from our computer and then upload it to the server.

$(":image")

This selector selects all inputs with type="image". This corresponds to the $("[type='image']") selector.

$(":password")

Password inputs will be selected by this selector. It's the same as `$("input[type='pas­sword']").

$(":radio")

This selector selects all radio buttons, it can be written as $("input[type='radio']") as well.

$(":reset")

This selector selects all reset buttons, you might not have heard of them. It can be written as $("input[type='reset']") too. The reset buttons set default values to all fields of a form.

$(":selected")

This selector selects all selected options represented as <option> elements. It doesn't work for :checked, i.e. for radio buttons or checkboxes.

$(":submit")

This selector is made for selecting inputs of the submit type. Or those that submit the form. It works as the $("input[type='submit']") selector.

$(":text")

Selects inputs of the text type. Alternatively, it can be written as $("input[type='text']").

We explained all jQuery selectors! In the next lesson, Styling in jQuery, we'll talk about styling.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.