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>
Yep, yep… You too on board for jQuery , Nice to hear.
Got idea about screen cast and snap shots.
Thanks Veerabhagu