jQuery Selectors reviewed

Simply put, jQuery selector allows you to find (match) a set of elements in a document. jQuery selectors provides you additional syntax for matching elements in addition to the ones provided by CSS (1 – 3). A complete list of selectors provided can be found at http://api.jquery.com/category/selectors/.

In an interview, or while solving a problem that involves jQuery, you have to understand and use selectors to match elements to do the necessary operations. Simple selectors can be grouped into a few easy to remember categories: Basic, Forms, Attribute, hierarchy, filters and so on. The selector grammar has three layers. “#test” selects an element with an id attribute of “test”, “p” selects all <p> tags in the document, and “div.status” selects all <div> tags with a class attribute of “status”. Simple selectors can also be combined together to form more complex selections.

Explain the basic jQuery selectors

The following selectors are based on the CSS 1 specification, as outlined by the W3C.

• All Selector (“*”) Selects all elements.

• Class Selector (“.class”) Selects all elements with the given class.

• Element Selector (“element”) Selects all elements with the given tag name.

• ID Selector (“#id”) Selects a single element with the given id attribute.

• Multiple Selector (“selector1, selector2, selectorN”) Selects the combined results of all the specified selectors.

Find the element with the class "myClass".

$(".myClass").css("border","3px solid red");

Finds every DIV element.

$("div").css("border","3px solid red");

Finds the element with the id "myDiv".

$("#myDiv").css("border","3px solid red");

Finds the elements that match any of these three selectors.

$("div,span,p.myClass").css("border","3px solid red");

Explain the Form based selectors

The form selectors allow you to select elements of a <form>. the form based selectors return an array of jQuery objects containing the list of matching elements. The general syntax is $(“:<controlName>”) where control name is one of the following: button, checkbox, file, hidden, image, input, password, radio, reset, submit and text.

var input = $(":checkbox").css({background:"yellow", border:"3px red solid"}); 

While we are on the subject of forms, let’s review a few form filters. A good question I like to ask is: Find all the input elements that are checked on the page. The answer is simple. We use the form filter selection mechanism.

function countChecked() 
{       
       var n = $("input:checked").length;
       $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
}     
countChecked();     
$(":checkbox").click(countChecked);

 

Other form filters include :disabled, :enabled and :selected.

 

Explain Attribute filter selectors

The last category I want to touch upon in this post are attribute based selectors. The key idea is to find elements that have that specified attribute and match a certain condition. These conditions include contains, startsWith, endsWith, equals, just the attribute, multiple attributes and not equals. Let’s review a few examples that use the attribute filters.

 

Q: Find all inputs that with a name attribute that contains 'man' and sets the value with some text.

$("input[name*='man']").val("has man in it!");

Q: Find all inputs with an attribute name that ends with 'letter' and puts text in them.

$("input[name$='letter']").val("a letter");

Q: Find all inputs that have an id attribute and whose name attribute ends with man and sets the value.

$("input[id][name$='man']").val("only this one");

jQuery selectors is perhaps one of the largest topics to cover. This post should give you enough background to grasp and understand the basics. You should look at the jQuery Selector API documentation to dig more.