jQuery migration

jMini was designed to replace heavier frameworks in situations where there is no need for their more advanced features. In particular jQuery was often the inspiration for many of the core functions, which also makes migration much easier.

It should be clear that jMini is neither a “drop in” replacement for jQuery, not does is have all of its features, nor the modules available. If any of these are of importance to you, you will be better off with jQuery instead.

For all the others, here is a list of important jQuery functions that can easily be replaced with jMini:

The jQuery() function (often simply written as $()) has multiple uses in jQuery, which also contributes to a lot of confusion.

The most important of these functions is to “wrap” JavaScript objects and turn them into jQuery objects to enable the jQuery functions.

This function is not needed in jMini, as all the methods are added to the core JavaScript objects. Such wrappers can simply be removed.

When used as a selector function, this can be used to find elements that match a specific selector.

Example:

const textfields = $('input[type=text]'); // jQuery

A similar query can also be performed by using the document’s querySelector method:

const textfields = document.querySelector("input[type=text]");

Alternative, if only results in a branch of the DOM tree are wanted, the same method also exists for the HTMLElement:

const search = document.getElementById('search');
const field = search.querySelector("input[type=text]");

Note that performance-wise, the HTMLElement’s querySelector brings no advantage, as the method works by first collecting all matches in the document and then filtering them down.

jQuery’s $() function is also used to parse HTML code into DOM elements, as in the following code:

$('<p>Hello world!</p>').appendTo('body'); // jQuery

The same can be achieved in plain JavaScript as follows:

const parser = new DOMParser();
const p = parser.parseFromString('<p>Hello world!</p>', 'application/xml');
document.body.appendChild(p);

Or in jMini:

document.body.appendNew('p').setText('Hello world!'); // jMini

In some situations, the .setHtml() method may be more convenient:

const p = document.getElementById('note');
p.setHtml('Hello <em>world</em>!'); // jMini

Last but not least, the $() function in jQuery can also be used to attach a callback function to the DOMContentLoaded event of the document:

$(function() {  // jQuery
  …
});

The same can be achieved in jMini in a sightly more verbose, but also much more legible form, using the onReady method:

document.onReady(function() {  // jMini
  …
});