Minified.js beta 2: Features and Changes

I got a lot of great feedback for beta 1, including many feature requests. So Minified's beta 2 is mostly about adding new features. Here's a short overview of the API changes:

New: Property-based DOM tree traversal with trav()

The new method trav() lets you traverse the DOM tree for each element in a Minified list and puts the result into a new list. You can specify a selector to limit the type of elements to include and a maximum number of elements to return per list element. trav() will automatically remove duplicates from the result.

Example: Finding all parents
var parents = $('.myChild').trav('parentNode', 1); // returns immediate parent of each element
Example: Finding all <table>s that contain <th> elements
var thTables = $('th').trav('parentNode', 'table', 1); // tables with
Example: Finding all <li>s following a <li class='marker'>
var followLi = $('li.marker').trav('nextSibling', 'li');

New: Checking list elements against a selector with is()

is() executes a selector on the list elements and returns true only if all list members match. It is optimized for checking for classes and/or tag names, but will work with any selector.

Example: Check whether list members have a class
var areMyElements = $('li').is('.myElement');
Example: Check whether input elements are in a form
var areInForm = $('input').is('form input');

New: Selecting child elements with select()

select() is a convenience method for selecting elements in a context. In beta 2, if you had a list and wanted to find all <p> elements in it, you had to write

var paras = $('p', list);

Having to write the list element inside the $() is a bit inconvenient when you are chaining methods, so select() does exactly the same with a different syntax:

var paras ='p');

New: Filtering HTML elements with only()

only() is a new way to filter a list containing HTML elements with a selector. Like is() it is optimized for checking for classes and/or tag names, but will work with any selector.

Example: Getting a list of all table cells that have two classes
var areMyElements = $('td.myFirstClass').only('.mySecondClass');

New: Registering for mouse-over events using onOver()

onOver() registers event listeners to be invoked when the mouse cursor enters or leaves the list's HTML elements. As first parameter it receives a boolean that's true when the mouse is over the element and false when it left the element. This makes onOver() compatible with toggles.

Example: Creating your own mouseover handler
$('.monitored').onOver(function(isOver, index) {
    if (isOver) 
        console.log('Mouse entered: ', this);
        console.log('Mouse left: ', this);
Example: Creating a mouseover toggle
$(elem).onOver($(elem).toggle({backgroundColor: '#000'}, {backgroundColor: '#f00'}));

New: Triggering existing and custom events with trigger()

The new method trigger() can call any event previously registered with on(). You can call regular event handlers such as 'click', but also create your own event handler names and call them. trigger() emulates event bubbling, but will not send a DOM event to the browser and thus does not emulate the event default behavior.

Example: Calling a click handler
Example: Calling a custom event handler with event object
$('#layoutRoot').trigger('relayout', {width: 800, height: 600});

New: Reading forms with values()

values() will read forms or individual input elements and store them in a format that's compatible with $.request().

Example: Posting a form
$.request('POST', '/myService', $('#myForm').values());

New: Extending Minified lists with MINI.M

In beta 1 there was no good way of adding your own methods to Minified lists. Beta 2 exposes Minified's internal list class with the property MINI.M.

Example: Extending Minified with a method to get all child elements
MINI.M.prototype.children = function() { return $('*', this, true); };
var children = $('#parent').children();

New: Reading and writing data attributes with a % prefix

As data attributes (attributes with a 'name-' prefix) are quite popular, I have added a new prefix to get(), set() and all other methods that share the syntax. The prefix '%' is now equivalent to '@data-'.

Example: Reading a data attribute
var mymeta = $('#myElement').get('%mymeta'); // same as .get('@data-mymeta')

New: Selectors for on() (live/delegated events)

Due to popuplar demand, on() now has an optional selector parameter that can be used to filter events that bubbled up from child elements. This allows you to set up event handlers in parent elements and let events bubble up, so you need fewer (potentially resource-hungry) event handlers. Also, you may not need to add new event handlers when you add child elements to a monitored parent element, which is mostly useful if you work with innerHTML.

Example: Creating a selecting event handler
$('#container').on('click', 'div.clickable', clickHandler);

Change: $() will remove duplicates

In beta 1, lists returned by $() may contain duplicate elements. In beta 2, duplicates caused by selectors or having multiple elements in the context will be automatically removed.

Change: Animated toggles return their Promise

Toggle functions with animations will now return the animation's Promise. This allows compositing more complex animations with toggles, which may be part of the upcoming App module.

Removed: hasClass()

The hasClass() method has been removed because is() allows checking for classes.

Removed: wait()

wait(), which returned a timed Promise, has been removed from the Web module, but will re-appear in the Util module.

Removed: Promise.always()

Promise.always() has been removed because it is not that useful and in order to keep the Web module small, but will probably re-appear in the Util module.

Implementation: Preventing legacy IE memory leaks

Beta 2 tries to prevent event-related memory leaks in IE by removing event handlers from deleted nodes and also unregistering all handlers on unload. In beta 2 the user was responsible for managing old event handlers. Please note that in order for the automatic code to work, you must remove DOM nodes only using remove() and fill().

Builder: IE9 Compatibility Optional

In the wake of IE11's coming release, I have made some smaller IE9-compatibility fixes optional. If you only need to support the latest two versions of any browser, you can save a couple of bytes (but not more!) by disabling IE9 in the builder. The main reason for this change is to make sure fixes for IE9-compatibility are properly marked in the source and can be removed at some point in the far future.


You can download beta 2 on the download page.