{"id":20614264,"url":"https://github.com/carlhannes/litequery","last_synced_at":"2025-04-15T07:31:34.594Z","repository":{"id":77069139,"uuid":"71930007","full_name":"carlhannes/litequery","owner":"carlhannes","description":"Lightweight JavaScript DOM manipulation, inspired by jQuery and jqlite, but runs using rollup-compiled, babel transpiled ES6 code.","archived":false,"fork":false,"pushed_at":"2017-10-31T06:04:29.000Z","size":42,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T17:57:24.881Z","etag":null,"topics":["dom-manipulation","javascript","queryselector"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carlhannes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-25T19:07:43.000Z","updated_at":"2023-03-10T08:14:05.000Z","dependencies_parsed_at":"2023-07-12T01:33:35.680Z","dependency_job_id":null,"html_url":"https://github.com/carlhannes/litequery","commit_stats":{"total_commits":39,"total_committers":3,"mean_commits":13.0,"dds":"0.20512820512820518","last_synced_commit":"397ecac9369b827fb0341b57278a9d5d35e1babe"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlhannes%2Flitequery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlhannes%2Flitequery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlhannes%2Flitequery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carlhannes%2Flitequery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carlhannes","download_url":"https://codeload.github.com/carlhannes/litequery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650778,"owners_count":21139685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-manipulation","javascript","queryselector"],"created_at":"2024-11-16T11:12:20.161Z","updated_at":"2025-04-15T07:31:34.579Z","avatar_url":"https://github.com/carlhannes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LiteQuery\nLightweight JavaScript DOM manipulation, inspired by jQuery and jqlite, but runs using rollup-compiled, babel transpiled ES6 code.\n\n## But why?\nI 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.\n\n## How do I get going...\n### ...really fast?\nInclude the following snippet in your HTML:\n```html\n\u003cscript src=\"https://unpkg.com/litequery/dist/litequery.min.js\"\u003e\u003c/script\u003e\n```\nThen you can start using it, it'll be attached as the global variable `litequery()`.\n\n### ...the proper way?\n* Make sure you have NodeJS \u0026 NPM installed (or Yarn, if you prefer that)\n* Use `npm i litequery --save` in your project folder\n* Import `node_modules/litequery/dist/litequery.min.js` in your project, such as:\n```js\nimport litequery from 'litequery';\n\nlitequery('div.container').html('Hello World!');\n```\n\n# Is it chainable?\nYes.\n```js\nimport lq from 'litequery';\n\nlq('div').addClass('test').html('asdf');\n```\nworks just as you would expect.\nSome functions do however return variables, such as `hasClass('test')` returns a boolean. So those functions break the chain.\n\n## What does it do?\n```js\nimport lq from 'litequery';\n\n// Attributes\nlq('img#myImg').attr('alt'); // Returns the \"alt\" text attribute, \u003cimg alt=\"hai\"\u003e - result \"hai\".\nlq('img#myImg').attr('alt', 'This is better'); // Sets the \"alt\" attribute to \"This is better\".\n\n// Classes\nlq('div#myDiv').hasClass('selected'); // Do all the selected elements have the class specified? (returns Boolean)\nlq('div#myDiv').dedupClass(); // Deduplicates all classes on all affected elements.\nlq('div#myDiv').addClass('highlight'); // Just like jQuery! Add a class to a div.\nlq('div#myDiv').removeClass('posh'); // div#myDiv is just not *that* classy after this.\nlq('div#myDiv').toggleClass('active'); // Toggle a class\n\n// Content manipulation\nlq('#content').html('\u003ch1\u003eWowza\u003c/h1\u003e'); // Set the HTML of #content to \"\u003ch1\u003eWowza\u003c/h1\u003e\".\nvar content = lq('#content').html(); // Return #content's innerHTML as a string.\n\n// Events (pretty basic and might not fire accurately at the moment, feel free to contribute)\nlq('#hammer').on('touchstart', function(event) {\n  event.preventDefault(); // Can't touch this\n});\n\n// Window events\nlq().on('resize', function(event) {\n  console.log('Awh lag');\n});\n\nlq().trigger('resize'); // Trigger resize on window\n\n// Selection\nlq('li').single(); // Get the first li item, expects it to be a single element. Warns if multiple selected, but still returns the first.\nlq('li').first(); // Get the first matched li item.\nlq('li').last(); // Get the last matched li item.\nlq('li').parent(); // Get the parent of the first matched item.\nlq('ul').children(); // Return the children of all selected objects\nlq('li').eq(0); // Get the first matched li item. By index, zero-based.\nlq('ul').find('div'); // Traverse the DOM down from UL and select ALL DIVs in each UL.\nlq('ul').closest('div'); // Traverse the DOM up from UL and select the first DIV for each UL.\n\n// Advanced selection\nlq('li').filter(function(item) {\n  return item.html(); === 'lol'; // Filter and return all li items containing the world \"lol\".\n});\n\nlq('li').get(); // Returns a NodeList of all matched li elements.\nlq('li').get(0); // Returns a specific, non-litequery wrapped element (node) by index, zero-based.\n\n// Apply something to all items using their actual node or element rather than the litequery wrapped one.\nlq('.item').apply(function (item) {\n  item.innerHTML = '';\n  item.setAttribute('src', '../../test.jpg');\n});\n\n// Do something to each and every item, but with a litequery wrapped object.\nlq('.item').each(function(item) {\n  if (item.hasClass('onclear')) {\n    item.html('');\n  }\n});\n\n// Modify styles\nlq('.item').css('background', 'red'); // Turns the background red, same as document.querySelector('.item').style.background = 'red';\nlq('.item').css('background'); // Returns 'red'\n```\n\n## Is this... tested?\nYes. Test are in the `tests` folder and run by mocha using `npm run test`.\n\n## Happy coding!\nIf you want to contribute, please do so. Feel free to add pull requests and likewise.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarlhannes%2Flitequery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarlhannes%2Flitequery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarlhannes%2Flitequery/lists"}