Query selectors are used to select DOM elements in the HTML page. Query contains a wide range of selectors which can select HTML5, CSS3, jQuery PDF elements based on their element name, id, attribute values, visibility, element order and many other criteria. I will cover each of these options in the sections below.
Formez-vous au développement Web ou approfondissez vos connaissances grâce à cet ouvrage accompagné d’un site compagnon et de vidéos explicatives. Apprenez toutes les techniques, les méthodes et modèles d’architecture de bases qui vous permettront de créer, animer et transformer vos site web avec les langages HTML, CSS et le framework jQuery. De nombreux exercices, tout au long de l’ouvrage, pour une véritable pédagogie pratique. Chaque exercice est accompagné d’une vidéo de corrigés sur le site compagnon de l’ouvrage.
Since the example only selects a single element, only one element will get the new CSS class. As hinted, this technique is called method chaining. Query’s fluent style API makes it very easy to make changes to the DOM. That is, the children and their children etc. This example will find all li elements inside all ul elements.
It does not modify the selection set it was called on. This example selects all a elements, and then filters them using a filter function. The filter function returns true if the given a element contains an href attribute. You can also get the index of the element to inspect, by inserting an index parameter in the filter parameter function.
Here is the example from before with and index parameter added. This example first selects all div elements, and then it selects those of the selected div elements which contain one or more p elements. It does not select any descendants, even though it uses the descendants to determine what elements to select. All elements matching the given selector will be part of the returned selection set. In other words, it finds matching elements inside the elements in the selection set. Not among the selected elements themselves.
In other words, it filters all elements in the selection set and their descendants according to a selector. That is the three top level div elements. That will be the three child p elements. This example selects all a elements, but it doesn’t really do anything with the elements.
This example sets the background color of all a elements to green. An elements id is specified in its id attribute. The id must be unique in the page, and is case sensitive. CSS classes are set via the class attribute of an HTML element. There are several different attribute selectors which I will cover below. To specify an attribute selector you write the attribute name inside square brackets in the selector string. This example will select all elements that has a height attribute.
You can combine the attribute selector with other selectors, e. This example selects all div elements with a height attribute value of 200. This is done by putting a ! This example selects all div elements that do not have an attribute value of 200. This also includes all div elements without any height attribute at all. In other words, where the attribute value contains a certain prefix.
This example selects all elements which have an href attribute where the value ends with . The first line selects all visible elements in the page. The second line selects all hidden elements in the page. For instance, you can select the third div element in the page, or all odd div elements etc. This example selects the first div element in the page. 4th div element in the page.
This example selects all input fields in the page. Notice the : before the text input. This colon is necessary to not confuse it with a selection based on element name. In this example there might not have been any difference between input and :input, but for several of the form field selectors, there is a difference.