Please navigate to the bottom of the page for Table of Contents

Saturday, June 4, 2011

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.

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.

4 comments:

  1. Nice tips, also check out this little tutorial for extending and creating your own selectors: http://www.websanova.com/tutorials/jquery/12-awesome-jquery-selector-extensions

    ReplyDelete
  2. Thanks a tone vey awesome airticle

    ReplyDelete
  3. Hi There,


    What a brilliant post I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this.

    hi i have a table with two columns as primary key i what to trap exception if the use in UI try to enter duplication in the table i don't what to throw ORA ERROR i what to display meaningful error massage,my database is oracle 11g

    this is how i what to do it
    i what to add integrity constraint to the table, and i use explicitly name it.

    - i test the database to figure out what exception it returns for that constraint. With luck the name i used will be in the text of the exception.






    Anyways great write up, your efforts are much appreciated.



    Thanks and Regards
    Irene Hynes
    -------------------------------------------------------------------------------------------------------
    Hi There,


    Amaze! I have been looking bing for hours because of this and i also in the end think it is in this article! Maybe I recommend you something helps me all the time?


    Okay, so I have to make a programm where the user gives you the bank sorting code and the account number and you give him the IBAN. That was so far no problem and I was done within minutes except of one thing that I simply can't figure out even though im trying since weeks. At some point I have to convert a string to integer. My research told me its with parseInt() and I dont get a syntax error when I compile my programm (using BlueJ). But when executing the programm stops and gives me some weird bug message. Anywhay without further ado I really hope you guys can help me, because I am growing desperate Here is my code and my bug message:





    Thanks a lot. This was a perfect step-by-step guide. Don’t think it could have been done better.



    ,Merci
    Irene Hynes

    ReplyDelete