‹‹ 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

animated=function(a){return c.grep(c.timers,function(b){return a===b.elem}).length}
button=function(g){return"button"===g.type||g.nodeName.toLowerCase()==="button"}
checkbox=function(g){return"checkbox"===
g.type}
checked=function(g){return g.checked===true}
disabled=function(g){return g.disabled===true}
empty=function(g){return!g.firstChild}
enabled=function(g){return g.disabled===false&&g.type!=="hidden"}
file=function(g){return"file"===g.type}
has=function(g,h,k){return!!o(k[3],g).length}
header=function(g){return/h\d/i.test(g.nodeName)}
hidden=function(a){var b=a.offsetWidth,d=a.offsetHeight,f=a.nodeName.toLowerCase()==="tr";return b===0&&d===0&&!f?true:b>0&&d>0&&!f?false:c.curCSS(a,"display")==="none"}
image=function(g){return"image"===g.type}
input=function(g){return/input|select|textarea|button/i.test(g.nodeName)}
parent=function(g){return!!g.firstChild}
password=function(g){return"password"===g.type}
radio=function(g){return"radio"===g.type}
reset=function(g){return"reset"===g.type}
selected=function(g){return g.selected===true}
submit=function(g){return"submit"===g.type}
text=function(g){return"text"===g.type}
visible=function(a){return!c.expr.filters.hidden(a)}

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

nothidden=function(a) {
		return a.type&&a.type!='hidden';
	}
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')));
	}

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';
	}
})