A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Related tags

Learning resource javascript jquery dom nano dom-utilities mini js-utilities mini-jquery
Overview

Quantdom JS

npm bundle size npm bundle size NPM

Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and supports chaining but is only comprised of the most commonly used Jquery functions.

Made for working with the dom less verbose without all the bloat from jQuery. I chose to base it off of Jquery's syntax as many developers are already familar with it and it is very concise. This library is meant to be as small as possible (without being unreadble) so when you need to directly interact with the DOM you can use this library on top of a larger framework without extra bloat that you don't need.

Why the name, QuantDOM ? Taken from Wikipedia's Quantum article, "In physics, a quantum (plural quanta) is the minimum amount of any physical entity (physical property) involved in an interaction." This fit the goal of this project in the way Quantdom is made to reduce the effort when having to deal directly with the DOM.

Optional Chaining: $('.modal').show().addClass('active').text('Modal is open!');

Getting Started

Install via NPM

  1. Install using npm npm i quantdom or with yarn yarn add quantdom
  2. Then import into project using import q from 'quantdom' or use the jQuery popularized $ as your function name. i.e. import $ from 'quantdom'

Install via CDN

  1. Use latest version https://cdn.jsdelivr.net/npm/quantdom or specify a certain version https://cdn.jsdelivr.net/npm/[email protected]/dist/quantdom.min.js

    <script src="https://cdn.jsdelivr.net/npm/quantdom"></script>

  2. Then start using with $() ex. $('.drop-down').attr('aria-expanded', 'true')

Try it Out!

Documentation

View generated documentation

Comments
  • Can't run npm run docs

    Can't run npm run docs

    Error:

    $ npm run docs

> [email protected] docs
> node_modules/.bin/jsdoc2md src/index.js

'node_modules' is not recognized as an internal or external command,
operable program or batch file.
    opened by kennarddh 9
  • ready function request

    ready function request

    First i would like to thank you for this awesome library you developed :) Second this is not an issues actually it's a feature request..

    i would like to see "Selector.ready()"feature in the upcoming build.

    $(window).ready(function() {
//Do Something
})

    Regards..

    opened by khaledmndev 3
  • Can't run test

    Can't run test

    Prerequisites

    • [ ] Can you reproduce the problem in safe mode?
    • [ ] Are you running the latest version (quantdom, node, npm...)?
    • [ ] Did you perform a cursory search?
    • [ ] Can you solve the issue yourself ? If so please create a pull request :)

    Expected Behavior

    Actual Behavior

    Live Demo

    https://jsbin.com/yevusevahu/edit?html,output

    Steps to Reproduce the Problem

    1. npm run test

    Specifications

    • Version:
    • Platform:
    • Subsystem:
    $ npm run test

> [email protected] test
> npx jest

Error: Cannot find module 'isexe'
Require stack:
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\which\which.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\cross-spawn\lib\util\resolveCommand.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\cross-spawn\lib\parse.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\cross-spawn\index.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\execa\index.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\jest-runtime\build\index.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\@jest\core\build\cli\index.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\@jest\core\build\jest.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\jest-cli\build\cli\index.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\jest-cli\build\index.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\jest-cli\bin\jest.js
- D:\ken\coding\js\personal\_contribute\quantdom\node_modules\jest\bin\jest.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (D:\ken\coding\js\personal\_contribute\quantdom\node_modules\which\which.js:7:15)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    opened by kennarddh 1
  • Feature add eslint

    Feature add eslint

    Description

    Add eslint to lint script before publish.

    Motivation & Context

    This will help optimize code and keep it consistent across releases and different contributors.

    opened by mcqua007 0
  • Add eslint to project

    Add eslint to project

    Description

    Add eslint to lint script before publish.

    Motivation & Context

    This will help optimize code and keep it consistent across releases and different contributors.

    opened by mcqua007 0
Releases(v1.2.6)

  • v1.2.6(May 9, 2022)

  • v1.2.4(Apr 19, 2022)

    Fixed iOS Array.at not supported on iOS safari even though can I use says it's supported :(

    Full Changelog: https://github.com/mcqua007/quantdom/compare/v1.2.1...v1.2.4

    Source code(tar.gz)
    Source code(zip)

  • v1.2.1(Apr 12, 2022)

    What's Changed

    New Utilities

    • Add support for chaining
    • Add parent selector

    Development

    • Add prettier to project by @mcqua007 in https://github.com/mcqua007/quantdom/pull/12
    • Add eslint by @mcqua007 in https://github.com/mcqua007/quantdom/pull/15
    • Add testing w/ Jest
      • Add full testing of Quantdom utility functions.
      • add babel for import to jest
    • Update docs and github templates
    • Implement fixes for return after if statemments
    • Add formatted files using ESlint and Prettier

    *Big thanks @kennarddh for writing tests & contributing! 💯

    New Contributors

    • @kennarddh

    Full Changelog: https://github.com/mcqua007/quantdom/compare/v1.1.12...v1.2.1

    Source code(tar.gz)
    Source code(zip)

  • v1.1.12(Apr 11, 2022)

  • v1.1.2(Apr 11, 2022)

Owner
Sean McQuaid
Sean McQuaid
GitHub
A website that acts as a guide about the universities to potential students whole throughout the globe.

A website that acts as a guide about the universities to potential students whole throughout the globe.

null 1 Apr 15, 2022
Most dreaded utility functions

Frustration Most dreaded utility functions Installation Using npm: npm install --save frustration Using Frustration In Node.js const Frustration = req

Atul Kumar 20 Jul 7, 2022
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

KHITER Mohamed Achraf 6 Aug 20, 2022
@nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and patterns

NodeSecure CI Action @nodesecure/ci brings together a set of tools to identify dependencies vulnerabilities and track most common malicious code and p

null 7 Jul 29, 2022
solana-base-app is a base level, including most of the common features and wallet connectivity, try using `npx solana-base-app react my-app`

solana-base-app solana-base-app is for Solana beginners to get them up and running fast. To start run : run npx solana-base-app react my-app change th

UjjwalGupta49 33 Dec 27, 2022
A word list of the most common safe English words.

@cnakazawa/safe-word-list This package contains a list of about 2900 of the most used safe words in English with at least three characters or more. in

Christoph Nakazawa 9 Oct 8, 2022
A tiny, plugin extendable JavaScript utility library with a JQuery-like syntax.

Tiny Friggin' Utility Zapper What is it? A tiny ~7kb extendable JavaScript utility library with a JQuery like syntax for getting work done fast! If yo

Bret 4 Jun 25, 2022
It's a set of common utility strategies to work with responsive styles with Flutter and CSS in JS

@skynexui/responsive_stylesheet You don't need to be worried just because you have to support multiple screens ?? ?? ?? ?? It's a set of common utilit

SkynexUI 40 Oct 26, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

Atomico simplifies learning, workflow and maintenance when creating webcomponents. Scalable and reusable interfaces: with Atomico the code is simpler

Atomico 898 Dec 31, 2022
A common front-end/Service Worker-based Key/Value database based on CacheStorage

Cache-DB A common front-end/Service Worker-based Key/Value database based on CacheStorage > const db = new CacheDB('ChenYFanDB') < undefined > await d

CrazyCreativeDream 4 Sep 30, 2022
Functions Recipes is a library of examples to help you getting started with Salesforce Functions and get used to their main features.

Functions Recipes Introduction Salesforce Functions lets you use the Salesforce Platform for building event-driven, elastically scalable apps and expe

Trailhead Apps 172 Dec 29, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
A utility for creating toggleable items with JavaScript. Inspired by bootstrap's toggle utility. Implemented in vanillaJS in a functional style.

LUX TOGGLE Demo: https://jesschampion.github.io/lux-toggle/ A utility for creating toggleable dom elements with JavaScript. Inspired by bootstrap's to

Jess Champion 2 Oct 3, 2020
Small library to create classes without using class syntax.

Clazz.js Small library to create classes without using class syntax. Compatibility For internet explorer 11 or higher. Example <script src="Clazz.js">

Emanuel R. Vásquez 1 Dec 25, 2021
Well-tested utility functions dealing with async iterables

aitertools This library provides a well-tested collection of small utility functions dealing with async iterables. You can think of it as LINQ or aite

Hong Minhee (洪 民憙) 11 Aug 15, 2022
Utility functions for iterators. Inspired by Rust's `std::iter::Iterator` trait.

iter-funcs About Utility functions for iterators. Inspired by Rust's std::iter::Iterator trait. This library uses JavaScript native iterators, so it's

Shuntaro Nishizawa 6 Dec 27, 2022
An utility library for Encoding and Compressing whatever you give him into a small string.

?? ORBIT ENCODER ⚙️ ??️ ORBIT-ENCODER is an utility library for Data Compression and Encoding. It can take whatever object you give him as argument an

Orbit Turner 7 Nov 16, 2022
jQuery plugin for color manipulation and animation support.

jQuery Color Supported jQuery versions: 1.8+ Browser Support jQuery Color 3.x supports the following browsers: Desktop: Chrome: (Current - 1) and Curr

jQuery 1.6k Dec 5, 2022