|Just jQuery The Core UI - Selectors|
|Written by Ian Elliot|
|Friday, 27 May 2022|
Page 1 of 2
Selectors are what jQuery uses to pick out particular objects in the DOM. While this might start out simply enough, it can appear to be complicated in more testing examples. The trick is to always remember what the selector is doing.
This is an extract from my book Just jQuery The Core UI.
Available as a Book:
buy from Amazon
buy from Amazon
One of the main uses of jQuery is in finding sets of DOM objects so that we can work with them. While this starts out simply enough it can become very complicated. Mastering the use of selectors is the first stage in becoming a jQuery expert. The second stage is finding out how to make changes to the elements you have found.
In this chapter we focus on finding elements, leaving manipulation to another chapter. Of course, jQuery isn't of much use if all you can do is find elements, but it is the first, and necessary, step.
In an ideal world any element, or its corresponding DOM object, would be easy to find because it would have a unique id. Even sets of DOM objects that share a set of common properties should be easy to find because they should all belong to the same class.
Before going any deeper, it is worth saying that the three most used jQuery selectors are the ones introduced early in Chapter 2:
So, for example:
selects all the DOM objects that correspond to div elements;
selects the one element with id set to mydiv;
selects all elements with class set to bigdiv.
For many jQuery users these are the only selectors needed because in an ideal world you would be able to find every element you needed using just these.
The reason is that if you are creating the HTML in question and you knew ahead of time that you need to find a particular element then you would give it a unique id. If you knew that you needed to find a set of elements then you would give them a class name. In other words, if you are in charge of the HTML you can nearly always arrange for the elements you want to be easy to find using jQuery.
So when does the need for a complex or sophisticated selector arise?
In other words, it is sometimes not possible or not easy to modify the HTML so that the elements you want to select all have ids or belong to a single class. In such cases you may well have no alternative but to use a sophisticated selector to pick out HTML elements based on their type and their relationship to other elements on the page.
What follows is a full introduction to the range of CSS selectors that jQuery supports. You don’t have to master them all in one go. The best strategy is to read through and get an idea of how everything works and then come back when you have a particular problem and see if there is a selector solution waiting for you. As well as CSS selectors, jQuery adds many of its own selectors and extends the way you can search for objects using filters and traversal functions – more of which in later chapters. In this chapter we focus on the basic CSS selectors.
Once you graduate beyond the three basic selectors you need to have a framework to organize things – without a framework everything looks like a special case.
Before going on it is worth remembering that jQuery always returns an array of elements that match the selector, even if there is only one match. It is also worth remembering that many jQuery methods operate on the first element of the array – which makes working with a single element much easier - or on all of the elements.
We already know that that the fundamental selector is the type selector, i.e. name, which selects all elements corresponding to <name>. All other selectors take the form of extra conditions on this basic selector.
selects elements corresponding to all <p> tags. All other selectors are modifications and extensions on this basic selector.
There is also a universal type selector, the asterisk *, which matches every element type. This may not seem to be very useful at first, but it is often used within a larger selector to mean any element type that satisfies other conditions. This will become clear in a moment.
The basic type selector can be modified with additional conditions, usually indicated by a colon or with square brackets or another special symbol. For example, if you want to specify a type with a particular id you can write:
to select all <p> elements with id equal to name.
Of course, there can only be one element with id equal to name so you don't really need to specify the type. This can be done using the universal type selector, that is:
selects any type of element with id equal to name.
The convention is that if you don't specify a type then the universal type selector is assumed. This means that you can simply write:
Now you can see that the id selector is just a special case of the more general type selector.
In the same way the .class selector is a shorthand for:
which selects all elements with the class attribute equal to name.
In general the class selector is:
which selects all elements of type T with class set to name.
|Last Updated ( Friday, 27 May 2022 )|