How to use jquery selectors in easy way

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 Selector

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 Selector

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')

Attribute Selector

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:

$('input[type="text"]')

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

$('span[title]')

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:

$('img[alt="test"]')

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:

$('img[alt~="test"]')

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:

$('img[alt*="test"]')

Class 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

$('.apress')

in which apress would be the name of some CSS class attached to the target HTML element.

ID Selector

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

$('#ankur-pen-color')

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

$('span:first-child')

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

$('div.apress:eq(0)')

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:

$('p:gt(0)').css('background', 'powderblue');

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:

$('p:lt(1)')

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:

$('p:has(span)')

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’].

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)