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:
<script src="https://unpkg.com/litequery/dist/litequery.min.js"></script>
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:
import litequery from 'litequery';
litequery('div.container').html('Hello World!');
Is it chainable?
Yes.
import lq from 'litequery';
lq('div').addClass('test').html('asdf');
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?
import lq from 'litequery';
lq('img#myImg').attr('alt');
lq('img#myImg').attr('alt', 'This is better');
lq('div#myDiv').hasClass('selected');
lq('div#myDiv').dedupClass();
lq('div#myDiv').addClass('highlight');
lq('div#myDiv').removeClass('posh');
lq('div#myDiv').toggleClass('active');
lq('#content').html('<h1>Wowza</h1>');
var content = lq('#content').html();
lq('#hammer').on('touchstart', function(event) {
event.preventDefault();
});
lq().on('resize', function(event) {
console.log('Awh lag');
});
lq().trigger('resize');
lq('li').single();
lq('li').first();
lq('li').last();
lq('li').parent();
lq('ul').children();
lq('li').eq(0);
lq('ul').find('div');
lq('ul').closest('div');
lq('li').filter(function(item) {
return item.html(); === 'lol';
});
lq('li').get();
lq('li').get(0);
lq('.item').apply(function (item) {
item.innerHTML = '';
item.setAttribute('src', '../../test.jpg');
});
lq('.item').each(function(item) {
if (item.hasClass('onclear')) {
item.html('');
}
});
lq('.item').css('background', 'red');
lq('.item').css('background');
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.