fUtil is a small JavaScript helper library that comes built-in with FacetWP.

Its functionality is similar to jQuery, with the difference that fUtil relies entirely on modern, vanilla JavaScript.

fUtil can be used as a lightweight substitute on websites that don’t need or load jQuery. FacetWP itself does not need jQuery to function, and you can disable loading it in FacetWP’s settings if your theme or other plugins don’t need it.

fUtil methods

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
 * fUtil library
 * 
 * Unless stated, methods return the fUtil instance
 */

// document.ready handler
$(function() { ... })

// select the document
$()

// get an element
$(selector)

// create a new fUtil instance
$(selector).clone()

// get the number of matching elements (returns int)
$(selector).len()

// add CSS class
$(selector).addClass(val)

// remove CSS class
$(selector).removeClass(val)

// has CSS class
$(selector).hasClass(val)

// toggle CSS class
$(selector).toggleClass(val)

// check for a match (returns bool)
$(selector).is(selector)

// check for a match
$(selector).find(selector)

// get first matching element
$(selector).first()

// get last matching element
$(selector).last()

// get previous matching element
$(selector).prev(selector)

// get next matching element
$(selector).next(selector)

// prepends selected element(s) with a value
$(selector).prepend(val)

// appends selected element(s) with a value
$(selector).append(val)

// get selected element(s) parents
$(selector).parents(selector)

// get selected element(s) closest parents
$(selector).closest(selector)

// remove current element(s)
$(selector).remove()

// adds event listener
$(selector).on('action', callback)

// removes event listener
$(selector).off('action', callback)

// trigger an event
$(selector).trigger('action', callback, extraData)

// set an attribute
$(selector).attr(name, val)

// set data values
$(selector).data(key, val)

// set HTML
$(selector).html(val)

// set text value
$(selector).text(val)

// set input value
$(selector).val(val)

// get all matching DOM nodes (returns array of DOM nodes)
$(selector).nodes

// get first matching DOM node (returns DOM node)
$(selector).nodes[0]

// make an ajax POST
$.post(url, data, settings)

// check if a value or variable exists
$.isset(var)

// loop through an iterable
$.each(items, callback)

Usage examples

Do something on document ready:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
(function($) {
    $(function() {
        console.log('document ready');
    });
})(fUtil);

Remove the is-loading class from all “facet-wrap” elements:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
$('.facet-wrap').removeClass('is-loading');

Prepend “Name: ” to all elements with class “the-name”:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
$('.the-name').prepend('Name: ');

Loop through text inputs (class my-input) and, if empty, remove the closest .item parent:

How to use custom JavaScript?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also add it with a wp_head or wp_footer hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info
$('.my-input').each(function() {
    if ('' == $(this).val()) {
        $(this).closest('.item').remove(); // adios!
    }
});

More examples

See also