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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

  • By
    Introducing MooTools LazyLoad

    Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that...

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!