Lesson 6 - Selectors in jQuery, part one

In the previous lesson, Classes in jQuery (DOM), we learned to work with classes using the jQuery library. In today's JavaScript tutorial, we're going to show the selectors we can use in jQuery. Besides the selectors we know from CSS, it offers many others.

Selector

What's a selector? We know that the page is made by the DOM structure that contains different elements. We have to select them in order to be able to e.g. style them in CSS or to animate them in JavaScript (or to work with them in any other way). Selectors allow us to select these elements from the DOM.

We write all selectors in the parentheses of the jQuery() function, shortened as just $(). A selector may consist of multiple selectors specified next to each other.

Let's have a look at the selectors.

Preparing the document

We'll demonstrate everything on a relatively large HTML document styled using CSS. We'll assign different classes, which we can already do from the previous lesson, to verify that the selectors really work.

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 will look like this:

Basic selectors

As first, let's explain a few basic selectors that are most common and we can find them in CSS as well. These selects elements by their name or location.

$("element")

The selector selects all the elements of a given type. We can also use the $('element element2') selector, which will specify the location of the elements. Here, specifically, we select <element2> nested in <element>.

An example:

$("li").addClass("blue");

The result:

$("*")

This is a selector that selects everything. If we use it after some other selector, e.g. as $("div *"), it will select all the elements the <div> contains.

$("#id")

We select elements according to their id, which is their unique identifier, by providing this id prefixed with the hash sign - #. For example as #myID.

An example:

$("#colors").addClass("blue");

The result:

$("selector1, selector2, selectorN")

We can also specify multiple selectors which are not related in any way. By this, we'll select different parts of the page. We always specify everything as a single string, so we write quotes only on the sides.

An example:

$("#colors li, #web li").addClass("blue");

The result:

$(".class")

Similarly to id, we can also select by class. We prefix the class name with a dot, for example as .myClass.

$("parent > child")

The > character between the elements in a selector says the elements must be nested directly. There can't be any other descendants between the elements for the selector to work.

An example:

$("#web > li").addClass("blue");

The result:

$("previous + next")

We can also use the + character, which will select the element located right after a given element (e.g. is right next to it). The elements must be on the same level.

An example:

$("#desktop + ul li").addClass("blue");

The result:

$("previous ~ siblings")

This selector uses the ~ character and selects all the following siblings of an element. Siblings are elements on the same level.

An example:

$("#desktop ~ ul li").addClass("blue");

The result:

That will be everything regarding the basic selectors. Let's move to the more advanced ones

Attribute selector

We can use HTML element attributes (for example placeholder, type, href, or any custom as data-any) in selectors as well.

Each item in the NONSENSE list has some value written in the data-nonsense attribute. Let's show how we can filter this value and select only the content we want.

$("[attribute|='va­lue']")

This selector selects only the elements with a given attribute containing a given value. They can also have this value followed by a dash - and something else.

An example:

$("[data-nonsense|='69']").addClass("blue");

The result:

$("[attribute*='va­lue']")

This selector selects the elements with a given attribute containing a given substring.

An example:

$("[data-nonsense*='69']").addClass("blue");

The result:

$("[attribute~='wor­d']")

This selector selects the elements with a given attribute containing a given word. The value of an attribute can contain multiple words such as "today is sunny", where the words are separated by spaces.

An example:

$("[data-nonsense~='69']").addClass("blue");

The result:

$("[attribute$='va­lue']")

When using this selector, the value of a given attribute must end with a given substring.

An example:

$("[data-nonsense$='69']").addClass("blue");

The result:

$("[attribute='va­lue']")

This selector selects only those elements where a given attribute's value equals to a given value.

An example:

$("[data-nonsense='69']").addClass("blue");

The result:

$("[attribute!='va­lue']")

This selector selects elements that don't have a given value in a given attribute.

Be especially careful with this selector, as it selects the entire page if used alone. Therefore, use it as a complementary selector, for example after ul li.

An example:

$("[data-nonsense!='69']").addClass("blue");

The result:

$("[attribute^='va­lue']")

This selector is similar to the one with $ but here, the attribute's value must start with a given substring.

An example:

$("[data-nonsense^='69']").addClass("blue");

The result:

$("[attribute]")

We can also select only those elements that have a given attribute defined, regardless of its value.

An example:

$("[data-nonsense]").addClass("blue");

The result:

$("[attribute='va­lue'][attribu­te2='value']")

We can use the selectors introduced above even for multiple attributes.

We'll continue in the next lesson, Selectors in jQuery, part two.

 

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