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, 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
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 >
Enter fullscreen mode
Exit fullscreen mode
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' ) ;
Enter fullscreen mode
Exit fullscreen mode
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
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>
Enter fullscreen mode
Exit fullscreen mode
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 ' );
Enter fullscreen mode
Exit fullscreen mode
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 ();
Enter fullscreen mode
Exit fullscreen mode
Example 2: Adding a Class to Multiple Elements
s ( ' .elements ' ). addClass ( ' highlight ' );
Enter fullscreen mode
Exit fullscreen mode
Example 3: Handling Click Events
s ( ' .button ' ). on ( ' click ' , function ( event ) {
// Handle click event
});
Enter fullscreen mode
Exit fullscreen mode
Example 4: Making an AJAX GET Request
s . get ( ' https://api.example.com/data ' , function ( response ) {
// Handle successful response
}, function ( errorStatus ) {
// Handle error
});
Enter fullscreen mode
Exit fullscreen mode
Example 5: Animating an Element
s ( ' .element ' ). animate ([
[ ' opacity ' , 0 , 1 ],
[ ' width ' , ' 100px ' , ' 200px ' ],
], 1000 , function ( timestamp ) {
// Animation complete
});
Enter fullscreen mode
Exit fullscreen mode
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.
Sh Raj
