JQuery Tip – 3: Custom JQuery Selector

       Though JQuery comes with a bunch of selectors, there are situation where we need to have additional functionality. JQuery has provided the interface using which we could harness our selector with the already available selectors. In this blog we are going to see 4 easy steps to do the same.
Step 1:

  Write your HTML file, include JQuery script and decide on the name of selector (important one ;))

Step 2:

 Extend the ‘:’ selector using JQuery extend function as follows,

  $.extend($.expr[':'],{
    selectorname>:function( elem, index, match, array ){
    }
  });

Step 3:

     For each element our method will be called by JQuery,  passing the element (note this is not JQuery element). If the element satisfies the condition return true, if not return false. JQuery will add the element to the resulting array if the function returns true.
Step 4:
                Use It and Test It

This is my first blog with screen cast.

Have easy learning, and let me know your comments on it.  The code that we developed in our screen cast is below, 

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Custom Jquery Selector Demo</title>
        <script type="text/javascript" src="jquery-1.3.js"></script>
        <script>
         <span style="white-space: pre;"> </span>/*
           * Demonstrating Custom Selector
           * Objectives
           * Select all elements whose value for mySpecialAttr is greater than 9
           */
          $.extend($.expr[':'],{
              mySpecialAttrValueGreaterThan9: function( elem, index, match, array ){
                 var $element = $(elem);
                 var specialAttrValue = $element.attr('mySpecialAttr');
                 console.log("specialAttrValue="+specialAttrValue);
                 if(specialAttrValue != null && specialAttrValue.length > 9){
                      return true;
                 }
                 return false;
              }
           });
          $(document).ready(function() {
              console.log("Ready function getting executed");
              var $mySpeciaAttr = $(':mySpecialAttrValueGreaterThan9');
              $('#results').html("myspecialattribute result=<b>"+$mySpeciaAttr.size()+"<b>");
          });
        </script>
    </head>
    <body>
     <input type="text" name="name" value="" />
     <input type="text" name="Age" value="" mySpecialAttr="Small"/>
     <input type="text" name="Address" value="" myspecialAttr="Length greater than nine"/>
     <input type="text" name="Address" value="" myspecialAttr="Length greater than and second"/>
     <span class="test" id="results"></span>
    </body>
   </html>

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Furl

About these ads

One Response

  1. Yep, yep… You too on board for jQuery , Nice to hear.
    Got idea about screen cast and snap shots.
    Thanks Veerabhagu :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: