gliJS – Tiny jQuery Alternatives

gliJS – Tiny jQuery Alternatives

gli.js 🚀


SH20RAJ
/
gliJS

gli.js is a lightweight JavaScript library that provides a simplified alternative to jQuery. It offers a range of useful functions to manipulate the DOM, handle events, and perform various operations on elements.

gli.js 🚀





gli.js is a lightweight JavaScript library that provides a simplified alternative to jQuery. It offers a range of useful functions to manipulate the DOM, handle events, perform AJAX requests, and animate elements.

Table of Contents

Getting Started

Usage

Selecting Elements
Manipulating Classes
Displaying Elements
Manipulating Content
Manipulating Attributes
Handling Events
Traversing the DOM
AJAX
Animation

Examples
Browser Support
Contributing
License

Getting Started

To use gli.js, include the script file in your HTML document:

<script src=”https://cdn.jsdelivr.net/gh/SH20RAJ/gliJS@latest/gli.min.js></script>

You can also download the gli.js file from the repository and host it locally.

Usage

Selecting Elements

You can select elements using the s function and pass a CSS selector as a parameter:

var elements = s(‘.selector’);

Manipulating Classes

addClass(className): Adds the specified class to the selected elements.

removeClass(className): Removes the specified class from the selected elements.

toggleClass(className)…





gli.js is a lightweight JavaScript library that provides a simplified alternative to jQuery. It offers a range of useful functions to manipulate the DOM, handle events, perform AJAX requests, and animate elements.

Table of Contents

Getting Started

Usage

Selecting Elements
Manipulating Classes
Displaying Elements
Manipulating Content
Manipulating Attributes
Handling Events
Traversing the DOM
AJAX
Animation

Examples
Browser Support
Contributing
License

Getting Started

To use gli.js, include the script file in your HTML document:

<script src=“https://cdn.jsdelivr.net/gh/SH20RAJ/gliJS@latest/gli.min.js”></script>

You can also download the gli.js file from the repository and host it locally.

Usage

Selecting Elements

You can select elements using the s function and pass a CSS selector as a parameter:

var elements = s(.selector);

Manipulating Classes

addClass(className): Adds the specified class to the selected elements.

removeClass(className): Removes the specified class from the selected elements.

toggleClass(className): Toggles the specified class on the selected elements.

Displaying Elements

hide(): Hides the selected elements.

show(): Shows the selected elements.

Manipulating Content

text(content): Gets or sets the text content of the selected elements.

Manipulating Attributes

attr(attributeName, value): Gets or sets the attribute value of the selected elements.

removeAttr(attributeName): Removes the specified attribute from the selected elements.

hasAttr(attributeName): Checks if the selected elements have the specified attribute.

Handling Events

on(eventName, selector, handler): Attaches an event handler to the selected elements or their descendants.

Traversing the DOM

parent(): Returns a new gli object containing the parent elements of the selected elements.

children(): Returns a new gli object containing the children elements of the selected elements.

siblings(): Returns a new gli object containing the sibling elements of the selected elements.

AJAX

get(url, successCallback, errorCallback): Performs an HTTP GET request.

post(url, data, successCallback, errorCallback): Performs an HTTP POST request.

Animation

animate(properties, duration, easing, completeCallback): Animates CSS properties of the selected elements.

For more detailed information on each method and its parameters, please refer to the API Documentation.

Examples

Example 1: Hiding an Element

s(#element).hide();

Example 2: Adding a Class to Multiple Elements

s(.elements).addClass(highlight);

Example 3: Handling Click Events

s(.button).on(click, function(event) {
// Handle click event
});

Example 4: Making an AJAX GET Request

s.get(https://api.example.com/data, function(response) {
// Handle successful response
}, function(errorStatus) {
// Handle error
});

Example 5: Animating an Element

s(.element).animate([
[opacity, 0, 1],
[width, 100px, 200px],
], 1000, function(timestamp) {
// Animation complete
});

You can find more examples and use cases in the examples directory.

Browser Support

gli.js supports all modern browsers, including Chrome, Firefox, Safari, and Edge.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request for any improvements or fixes you’d like to contribute.

Please read the Contributing Guidelines for more details on how to contribute.

License

This library is released under the MIT License. See the LICENSE file for more details.

Leave a Reply

Your email address will not be published. Required fields are marked *