What is needed and how is the jQuery selector written?
A modern web designer should not only ownthe basics of HTML, CSS and JavaScript, but also be able to work in the library of jQuery, which 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 needed to select the elements of the HTML-file, so as to use them to call one or another method of manipulating them (the team). 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 belonging to the main group is used. 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 only the elements of p of this class are needed, then we will write: $ (p.par).
Attribute selectors
The main JQuery selector can be used ifwe 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 an HTML element, for example, by href or src. This attribute is written in square brackets [].
The simplest example: $ ([src]) - selects all elements that have the src attribute. You can narrow the sample area by setting the attribute to a specific value: $ ([src = "value"]).
You can use several in jQueryselectors, if necessary, 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 items 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 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 selectedare the direct descendants (child) of the given element (ancestor). For example, to select the list items in the light class that 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.
