Selectors are the same—be they CSS or jQuery. It is not that selectors were designed that way, it is that jQuery was designed that way. To start, let us recall that a selector in jQuery is no special construct. Anything written like $(‘.class’) becomes a selector. For the sake of demonstration and full dimensional understanding, we will use the same examples and cases that we did for CSS selectors wherever possible, and we will take up some other examples as well, so that the subject becomes clearer.
Type selectors in jQuery can be used in a very simple way. You just have to know the basic selector and pass on the type of the element to be selected in the form of a single-quoted or double-quoted string: $(‘input’), $(‘span’), and so on.
Universal selectors in jQuery can be used in a similar way as using CSS. You would have to pass on the universal selector expression as string to the jQuery selector function. A demonstration of this is
$('body *') $('form *') $('form > *.test')
The attribute selector can be used in a similar way to CSS. You would have to pass on the selector expression to the jQuery selector, just as you have been using other selectors. For example, we do the following:
to select all the input elements for which the type attribute has the value “text.” In short, we select all the text boxes present inside the web page.
As another demonstration, you can select all the span elements inside the DOM tree that have the title attribute available, by using the selector
Similarly, jQuery will let you select all those image elements that have the alt attribute as the text “test,” by allowing you to use the selector, as follows:
jQuery will also let you select all those image elements that have the exact word test somewhere in the title you used for the selector, as follows:
Similarly, you can select all the image elements in the DOM tree that have the word test anywhere—even inside other words—by using the following jQuery selector:
The class selector in jQuery is used in much the same way as the type selector, and it selects the element that matches the CSS class attribute as specified in the selector. An example is
in which apress would be the name of some CSS class attached to the target HTML element.
Similarly, using an ID selector, you can select some HTML element from the DOM tree on the basis of the ID attribute attached to the target element. An example is
in which ankur-pen-color is the ID attribute attached to the target HTML element, such as <div id=”ankur-pen-color”>The color of pen does not govern the content it delivers</div>.
Pseudo Class Selector
Next you have the jQuery selector to select the HTML elements for which some pseudo classes have been attached. You can have a selector such as
which would select the first child of the span element in the HTML we presented to you when we took up the pseudo class selector. You are encouraged to try out more examples on the HTML we provided, because the best learning comes when you learn yourself.
Other jQuery Selectors
Here, we would like to continue the discussion by stating that jQuery selectors are not solely dependent on CSS selectors. There are a number of methods available that do take you that extra mile. Walking this extra mile could either have been difficult with CSS or, at most, lengthy and laborious. We will take up some commonly used methods and explain each with an analogy to CSS, so that you will be able to relate jQuery and CSS in this potentially hostile environment!
Let us take up the :eq() selector. This selector works by treating the child elements as indexed from 0, and whatever index you pass on to them, and attempts to select for you that particular element from the DOM tree. As a demonstration, we take up the same HTML as shown in the fiddles in the immediately preceding topic. So, if you want to select the 0 child inside the div with the class value apress, you would have to use
Then, we have the :gt() selector, which works in a similar way as :eq(), with the exception that this selector will select that HTML element that has the index greater than the value passed on. Thus, in the same example, if you want to select all the p elements that are in an index greater than 0 (because this method has a zero-based index), you would have to use the :gt() selector, as follows:
If there is a greater than selector, there must be a less than selector as well. So, here is :lt(), provided in jQuery, which does the same thing as expected. It selects the elements that are in an index less than the index you specify. So, considering the same example again, here is a demonstration of this selector:
that does the task of selecting all the paragraph elements that are in an index less than 1. Following the HTML example that we have been using for the topics in this chapter, the selection would be as simple as selecting just one paragraph element.
There is additionally the :has() selector, which checks if some HTML element has some other HTML element as a child (not necessarily direct) somewhere in the DOM tree. So, citing the same HTML example in the immediately preceding topic, if you had to select the p element that has the span element, the following could be your answer:
Besides the previously mentioned selectors available to the web development community, there are some other pseudo-class-type-appearing selectors available in jQuery that are outside the scope of our coverage. If you wish to have information on them (we always recommend acquiring knowledge), you can go to the jQuery official API documentation web site located at http://api.jquery.com/category/selectors/ to find information on such selectors as :animated and input[name!=’newsletter’].