====== jQuery migration ====== jMini was designed to replace heavier frameworks in situations where there is no need for their more advanced features. In particular [[https://jquery.com/|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: ===== jQuery() or $() ===== The ''jQuery()'' function (often simply written as ''%%$()%%'') has multiple uses in jQuery, which also contributes to a lot of confusion. ==== jQuery wrapper ==== 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. ==== Selector function ==== 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 [[https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector|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 [[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement|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. ==== HTML Parser ==== jQuery’s ''%%$()%%'' function is also used to parse HTML code into DOM elements, as in the following code:


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

The same can be achieved in plain JavaScript as follows:


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

Or in jMini:


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

In some situations, the [[toolbox:element:sethtml:index|.setHtml()]] method may be more convenient:


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

==== Document ready event handler ==== 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 [[toolbox:event:onready:index|onReady]] method:


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