‹‹ homejQuery Custom [:] Expression Test

jQuery provides some very powerful selection expressions using colon (:) syntax. Things like :first, :odd, and :even let you write code like: $('#content a:first') to get the first anchor within #content, or $('tr:odd') to get the odd numbered rows of a table. What's even cooler is that you can extend this behavior to add your own convenience selectors by extending the jQuery.expr[':'] object. This page adds these two expressions:

This test form below is just a way to demonstrate the usage of these selectors. Click the 'Test' buttons to run queries againt the test form elements.

h1 h2 PWD

:selectedDisplay value of currently selected option
:submitableCount the number of submitable elements in the form (use radios and checks to change output)
:nothiddenCount the non-hidden 'input' elements (8)
:hiddenCount hidden 'input' elements using build in jQuery expr (2)
inputCount the number of 'input' elements using built in jQuery expr (10)

core jQuery.expr[:] expresssions


        
sample custom expresssions added to jQuery.expr[':']

        

        

        
the code

        
// Add this code anywhere you want (after jQuery has been loaded).
// Edit it to add your own expressions.
jQuery.extend(jQuery.expr[':'], {
    ///////////////////////////////////////////////////////////
    // form elements that are submitable based on these criteria
    //    element is not disabled
    //    element has a selected or checked attribute
    //    element is a textarea
    //    element is an input of type text or hidden
    //
    //  @usage: $(':submitable')
    //  @usage: $('#myForm :submitable')
	submitable: function(a) {
		return !a.disabled&&(a.selected||a.checked||(a.nodeName.toUpperCase()=='TEXTAREA')||(a.nodeName.toUpperCase()=='INPUT'&&(a.type=='text'||a.type=='hidden'||a.type=='password')));
	},
    ///////////////////////////////////////////////////////////
    // elements that have a type attribute not equal to hidden
    //    use if you want to select all input elements that are not hidden
    //  @usage: $('input:nothidden')
    nothidden: function(a) {
		return a.type&&a.type!='hidden';
	}
})