Lesson 8 - Selectors in jQuery, part three

JavaScript jQuery basics 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:

Your page
localhost

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:

Your page
localhost

$(":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:

Your page
localhost

And let's try a negative index as well:

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

The result:

Your page
localhost

$(":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:

Your page
localhost

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

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

The result:

Your page
localhost

$(":odd")

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

An example:

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

The result:

Your page
localhost

$(":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:

Your page
localhost

$(":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:

Your page
localhost

$(":last")

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

An example:

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

The result:

Your page
localhost

$(":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:

Your page
localhost

And a negative index:

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

The result:

Your page
localhost

$(":has(selector)")

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

An example:

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

The result:

Your page
localhost

$(":parent")

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

An example:

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

The result:

Your page
localhost

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.


 

 

Article has been written for you by Honza Bittner
Avatar
Do you like this article?
1 votes
Everything is possible.
Thumbnail
All articles in this section
jQuery basics
Thumbnail
Next article
Styling in jQuery
Activities (3)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!