LiteQuery
Lightweight JavaScript DOM manipulation, inspired by jQuery and jqlite, but runs using rollup-compiled, babel transpiled ES6 code.
But why?
I wanted an easy wrapper for document.querySelector and querySelector all that mimics the behaviour of jQuery but is still lightweight, manageable and easy to develop.
How do I get going...
...really fast?
Include the following snippet in your HTML:
Then you can start using it, it'll be attached as the global variable litequery()
.
...the proper way?
- Make sure you have NodeJS & NPM installed (or Yarn, if you prefer that)
- Use
npm i litequery --save
in your project folder - Import
node_modules/litequery/dist/litequery.min.js
in your project, such as:
; ;
Is it chainable?
Yes.
; ;
works just as you would expect.
Some functions do however return variables, such as hasClass('test')
returns a boolean. So those functions break the chain.
What does it do?
; // Attributes; // Returns the "alt" text attribute, <img alt="hai"> - result "hai".; // Sets the "alt" attribute to "This is better". // Classes; // Do all the selected elements have the class specified? (returns Boolean); // Deduplicates all classes on all affected elements.; // Just like jQuery! Add a class to a div.; // div#myDiv is just not *that* classy after this.; // Toggle a class // Content manipulation; // Set the HTML of #content to "<h1>Wowza</h1>".var content = ; // Return #content's innerHTML as a string. // Events (pretty basic and might not fire accurately at the moment, feel free to contribute); // Window events; ; // Trigger resize on window // Selection; // Get the first li item, expects it to be a single element. Warns if multiple selected, but still returns the first.; // Get the first matched li item.; // Get the last matched li item.parent; // Get the parent of the first matched item.; // Return the children of all selected objects; // Get the first matched li item. By index, zero-based.; // Traverse the DOM down from UL and select ALL DIVs in each UL.; // Traverse the DOM up from UL and select the first DIV for each UL. // Advanced selection; ; // Returns a NodeList of all matched li elements.; // Returns a specific, non-litequery wrapped element (node) by index, zero-based. // Apply something to all items using their actual node or element rather than the litequery wrapped one.; // Do something to each and every item, but with a litequery wrapped object.; // Modify styles; // Turns the background red, same as document.querySelector('.item').style.background = 'red';; // Returns 'red'
Is this... tested?
Yes. Test are in the tests
folder and run by mocha using npm run test
.
Happy coding!
If you want to contribute, please do so. Feel free to add pull requests and likewise.