What is necessary and how is the jQuery selector written?

A modern web designer must not only be familiar with the basics of HTML, CSS and JavaScript, but also be able to work in a jQuery library that focuses on the interaction of JavaScript with HTML documents. It allows you to quickly access and manipulate any DOM elements (the program interface that opens access to the contents of html-files). The main structural units of this library are the teams. In order to apply this or that command, you need a jQuery-selector.

The formula of selectors in the jQuery library

JQuery selectors are based on the ones used in CSS. They are necessary for selecting elements of the HTML-file, in order to use them to call one or another method of manipulating them (commands). Search by the selector is carried out by means of function $ (). For example, $ ('div').

Selectors can be classified according to the way the elements are selected:

• Basic;
• By attribute;
• By hierarchy;
• By content;
• By position;
• Selection of form fields;
• Others.

Basic selectors

In 90% of cases when working with this library, a jQuery selector is used that belongs to the main group. All of them are quite simple and understandable. Let's consider each of them:

• * - selects all elements of the page, including head, body, etc .;
• P / div / sidebar / ... - selects all elements related to the given tag (i.e., p.div, sidebar, etc.);
• .myClass / p.myClass - selects elements with the specified class name;
• # MyID / p. # MyID - selects one element with the given ID.

Let us give an example. Let's say we need to select all the elements of a page with the class par, the entry will look like this: $ (.par). If we only need the elements of p of this class, then write: $ (p.par).

Attribute selectors

The main JQuery selector can be used if we need to select an element that belongs to a class that has an ID or select all the elements of the page. However, there are times when the desired element does not have a class or ID. That's why there are selectors by attribute. They allow you to sample on some attribute of the HTML element, for example, by href or src. This attribute is written in square brackets [].

The simplest example: $ ([src]) is the selection of all elements that have the src attribute. You can narrow the sample area by setting the attribute to a specific value: $ ([src = 'http: // site / article / 132222 / value']).

You can use several selectors in JQuery, if you need to narrow the selection area. For example, $ (p [color = blue] [size = 12]) - only those elements of p that are blue and size 12 will be selected.

Content selectors

In the event that it is not possible to select elements by attributes or by main selectors, then it is worthwhile to refer to their content. There are 4 selectors of this type:

• : Contains - selects elements containing the specified text;
• : Has - selects elements that contain other elements that are specific to that line;
• : Parent - selects elements that contain any others;
• : Empty - selects items that do not contain any others.

Let us give an example. In order to select all the div elements containing the Hello text, you need to write $ (div: contains ('Hello')).

Hierarchy selectors

There is one more way to select items in JQuery, namely, according to their hierarchy (that is, the relationship to each other on the HTML page). There are a lot of them, so here are two of the most popular: "child" and "child."

In the first case, the elements that are direct descendants (the child) of the given element (the ancestor) are selected. For example, to select list items in the light class, which are the child of the nav list, you need to write: $ (ul # nav> li.light).

The second case is more general. Here, the indirect descendants of an element can also be selected. For example, to select links within the nav list, we'll write: $ (ul # nav a).

Thus, in JQuery, elements can be selected in various ways using parameters such as class, ID, attributes, content, or hierarchy of elements of the HTML document.