Jlite

Jlite is a ultra lightweight javascript library with similar syntax as jQuery.

Jlite supports all major browsers Chrome, Firefox, Safari and Internet Explorer 9+ with file size 1kb minified and gzipped.

Using Jlite

<script src="/path/jlite.core.js" ></script>
// your custom script here

jlite.core

The following methods are suppported by jlite core with similar api to jQuery

• selector
• ready()
• load event
• each()
• on()
• addClass()
• removeClass()
• hasClass()
• attr()
• prop()
• css()
• show()
• hide()
• toggle()

Extending jlite core

The Jlite core has commonly used methods from jQuery to keep it small & lightweight. Lot of the additional functionaly can be written in pure javascript see references. But if you need additional methods it is very easy to implement

Write your own implementation for any additional methods as required in jlite.extra.js

// see example in jlite.extra.js
$.fn.toggleClass = function (className) {
    this.each(function (i, el) {
        var classes = el.className.split(" "); 
        var existingIndex = classes.indexOf(className);

        if (existingIndex >= 0)
            classes.splice(existingIndex, 1);
        else
            classes.push(className);

        el.className = classes.join(" ");
    });
};

// Using in your html document
<script src="/path/jlite.core.js" ></script>
<script src="/path/jlite.extra.js" ></script>

Jlite Core Methods

selector

<button id="btn" class="btn btn-primary">Blue</button>

// selector can any one below
var selector = document.getElementsByClassName("btn"); // HTMLCollection
var selector = document.getElementById("btn"); // HTMLElement
var selector = document.querySelectorAll(".btn"); // NodeList
var selector = $(".btn"); // jlite elements array
var selector = ".btn"; // css selector
var selector = [5,6,8,12]; // any array

$(selector).each(function (index, item) {
   console.log(item);
});

ready()

// to execute any code after dom is ready
$(document).ready(function () {
    console.log("jlite dom ready");
});

// shorthand & the recommoded way from jQuery 3.0 
$(function () {
    console.log("jlite dom ready");
});

load event

// to execute any code after document & resources loaded completely
// could be use for lazy loading images or scripts
$(window).on("load", function () {
    console.log("document is fully loaded");
});

each()

var nums = [5,6,8,12];
$(nums).each(function (index,item) {
    console.log(item);
});
OR
$.each(nums, function (index, item) {
    console.log(item);
});

on()

<button id="btn" class="btn btn-primary">Blue</button>
// syntax
$(selector).on(eventName, callback)

$("#btn").on("click", function () {
    console.log("button clicked");
});

css class

// addClass
$("#btn").addClass("active");

// removeClass
$("#btn").removeClass("active");

// hasClass
if($("#btn").hasClass("active")){
    console.log("active class exists");
}

attr()

// get attribute value
$("#btn").attr("id");

// set attribute value
$("#btn").attr("id","btn-new");

prop()

// get prop value
$("#input").prop("value");

// set prop value
$("#input").prop("value","jlite");

css()

// get css value
$("#btn").css("color");
$("#btn").css("width");

// set css value
$("#btn").css("color","#333333");
$("#btn").css("width","300px"); // as string
$("#btn").css("width",300); // as number

show/hide/toggle

// show element
$("#btn").show();

// hide element
$("#btn").hide();

// toggle show/hide
$("#btn").toggle()

References

• http://youmightnotneedjquery.com
• https://blog.garstasio.com/you-dont-need-jquery