Selectors in jQuery

Selectors are used to select page elements from a string of text that we pass to the jQuery function.

As the word itself indicates, selectors are a mechanism, available in jQuery, to select certain elements on the page. The selector is nothing more than a string of characters, created under some rules that we will see below, with which we can refer to any or any of the elements that are on a page.

Everything in jQuery involves using the selectors, to access the elements of the page that we want to dynamically alter with Javascript. Even in the most basic examples of you have to use selectors to access the elements you want to alter, so inevitably, if you have read this manual up to this article, you will have used them already.

In my opinion, one of the most powerful things about jQuery are the selectors, at least comparing this Javascript framework with others I know. We will see in this article how to use them and take advantage of their power.

To get started, let’s look at a selector, to clear things up and refresh your memory. When we use the what we pass as a parameter is the selector. The jQuery function returns just the page elements that match the selector passed by parameter.

$(“p”);

In this call to the jQuery function, we are passing a string “p” as a parameter and as I said, that same string is the selector. In this case, “p” is a selector that is used to select all the P tags on the page, that is, the paragraphs.

Basic selectors in jQuery

The selectors, at least the most basic ones, are similar, or the same, to those used in CSS to select the elements to which certain styles are to be applied. Since I understand that all people trying to dig deeper into the jQuery framework must have known CSS before, there will be no problem with them.

Label selector:

We simply indicate the label we want to refer to, that is, the label we want to select. We will obtain with it all the labels of the page indicated in the selector.

$(“h1”) //select all level 1 headers

Selector by identifier:

They are used to select the elements that have a given identifier, which is assigned to the tags through the id attribute of the HTML. To use this selector, first indicate the “#” character and then the identifier of whose element you want to select.

$(“#iditem”) //select a tag that has the attribute id=”iditem”

Selector by class:

We can indicate the name of a class (CSS class) and select all the elements to which this class has been applied. To do this, as in CSS, we begin by placing the character “.” and then the name of the class we want to select.

$(“.myclass”) //selects all elements that have the attribute class=”myclass”

Selector by several classes:

If we wish, we can indicate several CSS classes, to get all the elements that have those classes applied to them: all at the same time. This is achieved by starting with a “.”, just like the class selectors, and then another “.” to separate the different classes that we want to use in the selector.

$(“.class1.class2″) //select elements that have class=”class1 class2”

Selector asterisk “*”:

It helps us to select all the elements of the page.

$(“*”) //select all the elements that the page has

Concatenate several different selectors:

Finally, we can use several selectors, to obtain all the labels that meet one of them. It is not necessary that all the selectors comply at the same time, but that one of them agrees is enough. To do this we place all the selectors we want, separated by a comma “,”.

$(“div,p”) //select all division and paragraph elements

$(“.class1,.class2”) //selects elements that have the class “class1” or “class2”

$(“#myid,.myclass,ul) //select element with id=”myid”, elements with class=”myclass” and all UL lists

Conclusion on selectors

Up to this point we have seen the basic jQuery selectors, which we will use to make most of our examples and also solve most of the element selection needs that we can find in real examples. However, the Javascript framework includes a good range of additional selectors that can be useful in some more specific cases and that we leave for future articles.

Now, we recommend you continue learning with the following article, in which we will put into practice the selectors that we have known so far:.