{"id":18786834,"url":"https://github.com/chfoidl/quicksilver","last_synced_at":"2026-04-18T06:33:57.509Z","repository":{"id":57140160,"uuid":"127665033","full_name":"chfoidl/quicksilver","owner":"chfoidl","description":"Lightweight, jQuery inspired JavaScript DOM manipulation library written in TypeScript.","archived":false,"fork":false,"pushed_at":"2020-06-02T18:16:08.000Z","size":5826,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-12T13:45:52.340Z","etag":null,"topics":["dom","javascript","javascript-library","jquery","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/chfoidl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-01T19:34:57.000Z","updated_at":"2018-09-01T10:38:24.000Z","dependencies_parsed_at":"2022-09-04T22:00:15.767Z","dependency_job_id":null,"html_url":"https://github.com/chfoidl/quicksilver","commit_stats":null,"previous_names":["sethorax/qs-dom","sethorax/quicksilver"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/chfoidl/quicksilver","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fquicksilver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fquicksilver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fquicksilver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fquicksilver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chfoidl","download_url":"https://codeload.github.com/chfoidl/quicksilver/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chfoidl%2Fquicksilver/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31959880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","javascript","javascript-library","jquery","typescript"],"created_at":"2024-11-07T20:52:41.117Z","updated_at":"2026-04-18T06:33:57.465Z","avatar_url":"https://github.com/chfoidl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quicksilver\n\n[![Build Status](https://travis-ci.org/Sethorax/quicksilver.svg?branch=master)](https://travis-ci.org/Sethorax/quicksilver)\n[![Coverage Status](https://coveralls.io/repos/github/Sethorax/quicksilver/badge.svg?branch=master)](https://coveralls.io/github/Sethorax/quicksilver?branch=master)\n[![npm (scoped)](https://img.shields.io/npm/v/@sethorax/quicksilver.svg)](https://www.npmjs.com/package/@sethorax/quicksilver)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@sethorax/quicksilver.svg)](https://www.npmjs.com/package/@sethorax/quicksilver)\n[![npm type definitions](https://img.shields.io/npm/types/@sethorax/quicksilver.svg)](https://www.typescriptlang.org/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![code style: prettier](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![GitHub](https://img.shields.io/github/license/sethorax/quicksilver.svg)](LICENSE.md) [![Greenkeeper badge](https://badges.greenkeeper.io/Sethorax/quicksilver.svg)](https://greenkeeper.io/)\n\n\nQuicksilver is a lightweight, jQuery inspired JavaScript library for manipulating the DOM. The main goal of this library is to provide a lightweight, understandable and easy to use high level API for basic DOM manipulation.\n\n## Usage\n\nQuicksilver is available through [NPM](http://npmjs.com) as the [`@sethorax/quicksilver`](https://www.npmjs.com/package/@sethorax/quicksilver) package:\n\n```sh\nnpm install @sethorax/quicksilver\n```\n\nOr via [yarn](https://yarnpkg.com):\n\n```sh\nyarn add @sethorax/quicksilver\n```\n\nOnce installed Quicksilver can be used like any other node module. This module offers a default export so the name can be freely chosen. In this documentation the name `$$` is used.\n\n```JS\nimport $$ from \"@sethorax/quicksilver\";\n```\n\n### $$()\n\nTo create a Quicksilver instance just call the selector method and pass it either a CSS selector string, a HTMLElement or an array of HTMLElements. It returns a Quicksilver instance which exposes the following methods and accessors.\n\nYou can also pass the `document` or `window` object to the selector method. Please note that not all methods work with these objects.\n\n#### $$().$\n\nShortcut for `$$().get(0)`.\n\n#### $$().length\n\nReturns the amount of elements passed to the selector method or matched by the CSS selector.\n\n#### $$().notEmpty\n\nReturns `true` if at least one element was passed to the selector method or matched by the CSS selector.\n\n#### $$().width\n\nReturns the width of the first element in the instance. If `document` or `window` were passed to the selector method the viewport width is returned insted.\n\n#### $$().fullWidth\n\nReturns the full width (this includes margin and padding) of the first element in the instance. If `document` or `window` were passed to the selector method the viewport width is returned insted.\n\n#### $$().height\n\nReturns the height of the first element in the instance. If `document` or `window` were passed to the selector method the viewport height is returned insted.\n\n#### $$().fullHeight\n\nReturns the full height (this includes margin and padding) of the first element in the instance. If `document` or `window` were passed to the selector method the viewport height is returned insted.\n\n#### $$().absolutePosition\n\nReturn the absolute offset of the first element in the instance. The returned object contains the offset values from the top and from the left.\n\n#### $$().get(index = 0)\n\nReturns the element at the specified index.\n\n#### $$().getAll()\n\nReturns all elements in the instance.\n\n#### $$().getIndexInParent()\n\nReturns the index the first element in the instance has within its parent element.\n\n**Example**\n\n```HTML\n\u003cul\u003e\n    \u003cli class=\"item-1\"\u003eItem 1\u003c/li\u003e\n    \u003cli class=\"item-2\"\u003eItem 1\u003c/li\u003e\n    \u003cli class=\"item-3\"\u003eItem 1\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nIf `$$(\".item-2\").getIndexInParent()` would be called on the example markup above, this method would return `1`.\n\n#### $$().find(selector)\n\nQueries all child elements of the first element in the instance for the given CSS selector. If a match was found the first matched element will be returned.\n\n#### $$().findAll(selector)\n\nQueries all child elements of the first element in the instance for the given CSS selector. If a match was found a new Quicksilver instance with the matched elements will be returned.\n\n#### $$().forEach((element, index, total) =\u003e {})\n\nIterates over all elements in the instance and runs the given callback function for each element.\n\n#### $$().map((element, index, total) =\u003e {})\n\nRuns the given callback function for each element in the instance and returns an array of the callback return values.\n\n#### $$().filter((element, index, total) =\u003e {})\n\nRuns the given callback function for each element in the instance and returns an array of all elements where the callback function had a truthy return value.\n\n#### $$().addClass(...classNames)\n\nAdds the passed class names to the first element in the instance.\n\n#### $$().removeClass(...classNames)\n\nRemoves the passed class names from the first element in the instance.\n\n#### $$().hasClass(classNames)\n\nReturns `true` if the first element in the instance has the passed CSS class. \n\n#### $$().remove()\n\nRemoves the first element in the instace from the DOM.\n\n#### $$().insertAfter(element)\n\nInserts the first element in the instance after the passed element.\n\n#### $$().insertBefore(element)\n\nInserts the first element in the instance before the passed element.\n\n#### $$().append(element)\n\nAppend the first element in the instance to the passed element.\n\n#### $$().prepend(element)\n\nPrepend the first element in the instance to the passed element.\n\n#### $$().on(eventNames, callback)\n\nAttaches event listeners for the passed events to all elements in the instance. The callback function is called if one of the events gets triggered.\n\n#### $$().onChildEventMatch(eventNames, elementOrSelector, callback)\n\nWorks similar to `$$().on` but with the difference that the event path is checked if the passed child element or selector was matched by the event. If a match is found the callback is called.  \n\n**Example**\n\n```JS\n$$(document).onChildEventMatch(\"click\", \"a\", () =\u003e console.log(\"Link clicked!\"));\n```\n\nThe above example matches all clicks on anchor elements. By binding the event listener to the document object, the callback gets called for dynamically added anchor elements as well.\nThis is useful if additional content was added via AJAX. \n\n#### $$().dispatchEvent(eventName, data?)\n\nDispatches a custom event with the passed name and data on the first element in the instance.\n\n\n## Example\n\nEven a basic tasks like querying DOM elements by a CSS class name and iterating over them can be a tedious process in vanilla JavaScript:\n\n```JS\nvar elements = document.querySelectorAll(\".css-selector\");\n\nfor (var i = 0; i \u003c elements.length; i++) {\n    var element = elements[i];\n\n    // Do stuff with a single element.\n}\n```\n\nThe same tasks is much simpler and easier to read if using Quicksilver and it complies with ES6 syntax:\n\n```JS\nimport $$ from \"@sethorax/quicksilver\";\n\n$$(\".css-selector\").forEach(element =\u003e {\n    // Do stuff with a single element.\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchfoidl%2Fquicksilver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchfoidl%2Fquicksilver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchfoidl%2Fquicksilver/lists"}