jQuery Lite

jQuery Lite is a recreation of the essential functionality of the popular JavaScript library jQuery. It supports some of jQuery's most important features including:

• DOM Manipulation and Traversal
• Event Handling
• Ajax

jQuery Lite was written using the DOM manipulation classes from plain JavaScript.

Set up

1. Download the file into your working directory.
2. Require it in a script tag at the top of your HTML file like so <script src="jquery_lite.js"></script>

Demo-ing

1. Download the repository.
2. Open demo.html
3. Open the developer console to play around with DOM elements

or

Write your own script using jQuery-Lite!

Methods

Here is the list of most commonly used jQuery API functions that will also work on jQuery-Lite:

• html(): Gets or sets an inner HTML of an element
• find(): Selects elements based on the provided selector string
• append() Injects an element into the DOM after the selected element
• hide(): Hides an element if it was visible
• show(): Shows an element if it was hidden
• css(): Gets or sets the style attribute value of an element
• attr() Gets or sets any attribute of an element
• val(): Gets or sets the value attribute of an element
• text(): Gets the combined text of an element and its children
• on(): Attaches an event listener to an element
• off() Detaches an event listener from an element
• each(): Iterates over a set of matched elements
• $.extend(): Merge the contents of two or more objects together into the first object
• $.ajax(): Perform an asynchronous HTTP (Ajax) request
• $.get(): Load data from the server using a HTTP GET request
• $.post(): Load data from the server using a HTTP POST request

For more information on how to use these methods in conjunction with selectors, check out this awesome tutorial!