MooTools Pseudo Selectors Gone Wild
Over the past few weeks, I've covered how you can create your own pseudo selectors in MooTools. In looking at jQuery's documentation and considering other often-checked element traits, I've created a bunch more useful MooTools pseudo selectors.
The MooTools JavaScript
/* grab "checked" elements */ Selectors.Pseudo.checked = function() { return ('input' == this.get('tag') && ('radio' == this.get('type') || 'checkbox' == this.get('type')) && this.checked); }; /* grab "selected" option elements */ Selectors.Pseudo.selected = function() { return ('option' == this.get('tag') && this.selected); }; /* grab random elements */ /* credit: http://blog.kassens.net/custom-pseudo-selectors */ Selectors.Pseudo.random = function(probability, local) { return Math.random() < (probability || .5).toFloat(); }; /* grab elements with no value */ Selectors.Pseudo.noValue = function() { return '' === this.value; } /* grab elements with a specific empty attribute */ Selectors.Pseudo.emptyAttribute = function(att) { return this.get(att) == ''; } /* grab disabled elements */ Selectors.Pseudo.disabled = function() { return this.disabled; } /* grab enabled elements */ Selectors.Pseudo.enabled = function() { return !this.disabled; } /* grab each type of input */ ['text','password','radio','checkbox','submit','image','reset','button','file','hidden'].each(function(type) { Selectors.Pseudo.(type) = function() { return type == this.get('type') && 'input' == this.get('tag'); } }); /* form element ? */ Selectors.Pseudo.input = function() { return 'textarea' == this.get('tag') || 'select' == this.get('tag') || 'input' == this.get('tag') || 'button' == this.get('tag'); }
Have any more to add to the pile? Share them!
Without steering away from the subject too much, what about grabbing all elements that have an event attached to them?
@Anton: Great question. I’ll be researching this very soon, as I too have interest in such a functionality.
I am a RSS feed subscriber and I don’t miss a day without visiting this blog: your MooTools tips are tremendous! and this one is very useful!
Thanks! :)
For selecting all headers in order. like jQuery: $(“:header”)
Selectors.Pseudo.header = function() {
return this.get('tag') == "h1" || this.get('tag') == "h2" || this.get('tag') == "h3" || this.get('tag') == "h4" || this.get('tag') == "h5" ||this.get('tag') == 'h6'
}