Skip to main content

Yaj.js - Yet Another jQuery Replacement

Build Status Opensource ByJG GitHub source GitHub license GitHub release

Basic usage​

The Yaj library like jQuery and Zepto exposes the "yo" instead "$".

"yo" requires a selector and all methods are based on the element (or elements) returned.

yo('selector').addClass('my-class');

The selector can be all valid HTML5 selector:

  • Element Id (#name)
  • Class (.name)
  • Sequences ("#name #name2" OR ".name .name2" OR ".name #name2" and other combination)
  • More than one on the same object (".name.name2")
  • HTML Elements ("p", "div", etc)
  • HTML Document (document)
  • Window (window)
  • HTML string (eg. "'
    text
    '")
  • List of selectors (eg. "p, span, .class")

You can call more than one method in sequence:

yo('selector').removeClass('oneclass').addClass('otherclass');

Lightweight​

Yaj is also lightweigth. Yaj have less than 18kb uncompressed, 8kb minified and 3kb minified and gzipped.

Installation​

Yarn or NPM​

yarn add yaj

or

npm i yaj

and then:

<script src="node_modules/yaj/yaj.min.js" />

CDN JSDELIVR​

Latest version​

<script src="https://cdn.jsdelivr.net/npm/yaj@1/yaj.min.js" />

Specific version​

<script src="https://cdn.jsdelivr.net/npm/[email protected]/yaj.min.js" />

CDN UNPKG​

Latest version​

<script src="https://unpkg.com/yaj/yaj.min.js" />

Specific version​

<script src="https://unpkg.com/[email protected]/yaj.min.js" />

Yo Events​

  • yoReady() ref - The ready method makes sure that code is only executed when all DOM elements are safe to be manipulated.

Yo Dom Manipulation Reference​

  • yo(selector).el() ref - Get the first DOMElement defined by the selector
  • yo(selector).els() ref - Get all DOMElements defined by the selector
  • yo(selector).els(n) ref - Get the n-nth DOMElement defined by the selector
  • yo(selector).eq(n) ref - Get the n-nth Yaj object defined by the selector;
  • yo(selector).first() ref - Get the first node returned by the selector;
  • yo(selector).last() ref - Get the last node returned by the selector;
  • yo(selector).hasClass(class) ref - Check if the selector has the class.
  • yo(selector).isVisible() ref - Return true if the 'selector exists.
  • yo(selector).exists() ref - Return true if the selector exists (or was found)
  • yo(selector).addClass(class) ref - Add a class to the selector
  • yo(selector).removeClass ref - Remove all classes from the selector
  • yo(selector).removeClass(class) ref - Remove a class from the selector
  • yo(selector).toggleClass(clsss) ref - Add a class from the selector if it does not exists or remove otherwise
  • yo(selector).toggle() ref - Alternate between show and hide
  • yo(selector).show() ref - Make the selector visible
  • yo(selector).hide() ref - Make the selector invsible
  • yo(selector).append(data) ref - Append a HTML or DOMElement to the selector
  • yo(selector).appendTo(selector2) ref - Append the selector one to the selector two
  • yo(selector).remove() ref - Remove the DOM Elements defined by the selector
  • yo(selector).isCollideWith(data) ref - Return true if the object collides/overlaps the object referenced by data
  • yo(selector).attr(property) ref - Get the property value of the selector
  • yo(selector).attr(property, value) ref - Set the property value into the selector;
  • yo(selector).attr(property, value, convertHtmlEntity) ref - Set the property value converting HTML Entity into the selector;
  • yo(selector).css(property) ref - Get the CSS style value of the selector
  • yo(selector).css(property, value) ref - Set the CSS style value of the selector
  • yo(selector).html() ref - Get the selector content as HTML
  • yo(selector).html(data) ref - Set the content of the selector with data
  • yo(selector).text() ref - Get the selector content as TEXT
  • yo(selector).text(data) ref - Set the content of the selector with data without parse the HTML
  • yo(selector).children(data) ref - Return the first level child nodes of the current selector.
  • yo(selector).find(data) ref - Find some element from the current selector.
  • yo(selector).on(event, fn) ref - Attach an event to an element
  • yo(selector).bind(event, fn) ref - Attach a custom event to an element
  • yo(selector).trigger(event) ref - Trigger a custom event
  • yo(selector).off() ref - Remove all events attached to the element
  • yo(selector).offset() ref - Get the offset of the selector
  • yo(selector).scrollTo(to, duration) ref - Scroll the object.
  • yo(selector).fadeIn(ms) ref - Fade in the element
  • yo(selector).fadeOut(ms) ref - Fade out the element
  • Yaj.isElementInDocument(element) ref - Return true if the element is attached to the document

Yo Ajax Reference​

  • Yaj.get(url, data, success, error) ref - Make an ajax GET request
  • Yaj.post(url, data, success, error) ref - Make an ajax POST request
  • Yaj.request(options) ref - Make an ajax request. You can choose the method
  • Yaj.getJson(url, data, success, error) ref - Make an ajax GET request and returns a JSON object.
  • Yaj.postJson(url, data, success, error) ref - Make an ajax POST request and returns a JSON object.
  • Yaj.getScript(src, func) ref - Load a javascript dynamically
  • Yaj.loadCss(href, rel, type) ref - Loads a CSS dynamically and append it to the document.

Yo Polyfill replacement​

Yaj creates polyfill replacement for important DOM implementations like:

  • document.querySelector
  • document.querySelectorAll
  • window.localStorage (in this case the fallback is cookie which have some limitations about size and quantity)
  • Element.prototype.matches()

If you add the yaj.js or yaj.min.js to your page, you can instantly use this implementations. The code below will work in the most modern broswers but also in browsers like IE8 and even IE7.

<head>
    <script src="yaj.js"></script>
</head>

<script>
localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key'));
</script>

Yo Polyfill Utilities functions​

  • yoXhr() ref - Return a XmlHTTPRequest object for your current environment/browser;
  • yoIsFunction(object) ref - Check if the object is a function.
  • yoIsWindow(object) ref - Check if the object is the Window.
  • yoIsArray(object) ref - Check if the object is an Array.
  • yoIsDocument(object) ref - Check if the object is the HTMLDocument element.
  • yoIsHtmlElement(object) ref - Check if the object is a HTMLElement.
  • yoIsYaj(object) ref - Check if the object is an Yaj object
  • yoIs(objectToCheck, type) ref - Check if the object is of the defined type.
  • yoCopy(source, dest) ref - Copy the attributes from one object to another.
  • yoClone(object) ref - Clone an object;
  • yoGetParameter(name) ref - Get the value of the query parameter name;

Yaj is FAST​

Yaj is faster than JQuery. See here the benchmark tests

FAQ​

Click here