MooTools Pseudo Selectors Gone Wild

By  on  

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!

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

  • By
    Fancy FAQs with MooTools Sliders: Version 2

    A little over a year ago I authored a post titled Fancy FAQs with MooTools Sliders. My post detailed a method of taking boring FAQs and making them more robust using the world's best JavaScript framework: MooTools. I've taken some time to...

Discussion

  1. Anton

    Without steering away from the subject too much, what about grabbing all elements that have an event attached to them?

  2. @Anton: Great question. I’ll be researching this very soon, as I too have interest in such a functionality.

  3. 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! :)

  4. Brett

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!