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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    &#8220;Top&#8221; Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

  • By
    Implement jQuery&#8217;s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

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!