What are Handy jQuery selectors

jQuery is a famous javascript library used widely. It allows the developer to create very complex client side operational web tools easily. The jQuery is actually allows us to work on the DOM tree which has various html elements used in the webpages.

jQuery provides a various selectors which could be used to manipulate DOM elements in different ways. Usually we use the selectors to select DOM elements based on class name or id of the elements. But there are more powerful selectors available with jQuery which could be used to select elements with more ease.

The main advantage of using these selectors are that these will help us to handle the DOM elements more precisely and help us to cut the lines of code we need to write. Since the jQuery execute, within the client RAM reducing the lines of code will increase the code execution efficiency.

Selectors list

1. Attribute contains prefix or suffix values.

   These selectors are more precise in selecting the elements for which a particular prefix or suffix values are preset for a particular attribute. For example: if we have class names like abc-def, abc-ghj etc you can select based on the prefix "abc".

          Format:[attribute|='value']

   Example:

             $('[class|='abc']').click(function(){
               alert('Hello');
             });

   This will select all the classes that start with the string 'abc'.

   To select elements with a text at the end of the value for an attribute,

         Format:[attribute$='value']

   Example:

             $('[class$='abc']').click(function(){
               alert('Hello');
             });

   This will select all the classes that end with the string 'abc'.

2. Multiple attribute selector

   This could be used to select elements that have matches for multiple attributes, example, select an element with an id "abc" and having the class of "def" and of type "input file" etc. So we can used this as an "AND"ing of the attribute selection.

          Format: jQuery("[attributeFilter1][sttributeFilter2][attributeFilterN]")

   The following example will find all elements which has an id of "abc" and a class ends with "def".

         $("[id='abc'][class$=def]").click(function() {
           alert("click");
         });

3. Multiple selector

   The above selector will select an element which met with all the conditions given, but there will be other conditions where you need to select the elements that have any of the specified conditions(a kind of ORing). This could be achieved easily by this way of choice.

          Format: jQuery("selector1,selector2,selectorN")

   The following example will select the selects the elements that are either having any of the conditions met.

         $("p.abc, div.def").click(function() {
           alert("click");
         });

   This will work with both the p tags having a class abc and div elements having class def.

4. Header selector

   This could be used to select all the elements that are of type h1, h2 etc. So it will be easy to set an action for all the header elements.

          Format: jQuery(":header")

   The following example will bind an action to all the header elements in the page.

         $(":header").click(function() {
           alert("click");
         });

5. Has attribute selector

   This selector could be used to select elements that have particular attribute. For example: it could be used to select elements that have id or class attribute.

          Format: jQuery("[attribute]")

   The following example will select the div elements that have a class attribute.

         $("div[class]").click(function() {
           alert("click");
         });

These are some selectors that will make our work easier with jQuery. There are many other selectors out there which will help you to manipulate DOM elements more easily, try to use them. Happy coding.