Modern Query - jQuery like syntax the ES6 way

Related tags

Database mquery
Overview

mQuery

Inspired by jQuery, I want to create a small library that resembels the simplicity and ease of use of jQuery, but uses modern API of ever-green browsers. The goal is to create tiny library that can replace jQuery in projects that historically depended on it, but want to updgrate to modern JavaScript syntax and modules.

The core principals

  • Use querySelectorAll instead of sizzle
  • Do not implement features already available in ES6
  • Chaninig is powerfull
$('#id').parent().find('div.other').remove()
  • Elegant & expressive syntax
$('#my-button')
    .off('.my-events')
    .on('click.my-events', event => {
        console.log('button clicked')
    })
    .on('mouseenter.my-events', event => {
        console.log('mouse enter event')
    })
    .on('mouseleave.my-events', event => {
        console.log('mouse leave event')
    })
You might also like...

A MongoDB-like database built on top of Hyperbee with support for indexing

hyperbeedeebee A MongoDB-like database built on top of Hyperbee with support for indexing WIP: There may be breaking changes in the indexing before th

Dec 12, 2022

GraphQL API Playground with cascade-like operations

modif ( 🍖 👉 🥪 ) modif is a small GraphQL API with transform capabilities. It takes a string input and outputs a string. Always. TL;DR Go play with

Jan 4, 2022

Like JSON-RPC, but supports streaming.

Like JSON-RPC, but supports streaming.

Earthstar Streaming RPC Similar to JSON-RPC, but also supports streaming (soon). Written to be used in Earthstar (github, docs). Table of Contents Usa

Feb 10, 2022

A Node.js ORM for MySQL, SQLite, PostgreSQL, MongoDB, GitHub and serverless service like Deta, InspireCloud, CloudBase, LeanCloud.

Dittorm A Node.js ORM for MySQL, SQLite, PostgreSQL, MongoDB, GitHub and serverless service like Deta, InspireCloud, CloudBase, LeanCloud. Installatio

Dec 25, 2022

This is very simple game catch word with JavaScript and Jquery

Catch-Word-js This is very simple game catch word with JavaScript and Jquery install and run guide! download project zip! extract zip file on any dire

Nov 26, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

In this project, I restructure my previous Awesome books app code. The goal is to practice ES6 syntax and also make the code more organized by using ES6 modules.

Awesome Books In this project, I will restructure my previous Awesome books app code. The goal is to make it more organized by using modules. I will a

Aug 23, 2022

A simple query builder, it will helps to develop DSL query for Elasticsearch

Elasticsearch Dynamic Query Builder A simple query builder, it will helps to develop DSL query for elasticsearch Installation You can start it from np

Nov 20, 2022

A library for creating typesafe standardized query keys, useful for cache management in @tanstack/query

A library for creating typesafe standardized query keys, useful for cache management in @tanstack/query

Query Key Factory Typesafe query key management for @tanstack/query with auto-completion features. Focus on writing and invalidating queries without t

Jan 3, 2023

Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

You (Might) Don't Need jQuery Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs

Dec 24, 2022

Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Sep 28, 2022

A JavaScript UI Library with JQuery like syntax

A JavaScript UI Library with JQuery like syntax. (Beta)

Jan 16, 2022

A tiny, plugin extendable JavaScript utility library with a JQuery-like syntax.

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

Jun 25, 2022

A remake of the previous project (awsm-books) using proper ES6 syntax.

Awesome-Books-ES6 A remake of the previous project (awsm-books) using proper ES6 syntax. Built With: HTML CSS SCSS JavaScript Live Demo: Live Demo Get

Jun 23, 2022

this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Jul 17, 2022

The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules.

Awesome-Books-ES6 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules.

Aug 18, 2022

This is the awesome books project, refactored to use ES6 syntax and modules

Awesome Books ES6 This is the Awesome Books ES6 project for the second week of the second module in the microverse program. Built With HTML/CSS Javasc

Aug 4, 2022

This is a website for creating to-do tasks. "To-do list" is a tool that helps to organize your day. The main objective is to understand how to use proper ES6 syntax.

TO DO LIST To Do List This is a website for creating to-do tasks. "To-do list" is a tool that helps to organize your day. This project is part of the

Oct 3, 2022
Comments
  • Include automatic data and events cleaning on empty

    Include automatic data and events cleaning on empty

    A great feature of jQuery when dealing with memory leaks was that it automatically cleaned data attributes and event listeners when nodes are removed or emptied.

    Could you add this also to the empty and other dom node cleaning methods in this library?

    opened by gpetrov 3
  • Show / Hide should remember and restore original display value

    Show / Hide should remember and restore original display value

    JQuery and Cash store the original display value and restore it again correctly.

    Currently mQuery sets the display value to none/inherit, which can often be wrong, e.g. if the original display value was flex or hidden.

    JQuery uses some sort of private cache: https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/css/showHide.js

    Cash uses some combination of storing the display value in a ___cd property on the element and calculating the display value based on inserting a temporary DOM element: https://github.com/fabiospampinato/cash/blob/1c1b316e53cc3322e417a93a0e7c4745852796d0/dist/cash.ts

    opened by mpf82 1
  • fixed hasClass

    fixed hasClass

    fixed hasClass and minor improvements and typo fix

    previously, hasClass would not return true for the following scenario:

    <div class="hasClass">
        <div class="1">1</div>
        <div class="2">2</div>
        <div class="3">3</div>
        <div class="1 2 3">123</div>
        <div class="hasClass">hasClass</div>
    </div>
    
    $hasClass = $( ".hasClass > div" );
    log( $hasClass.hasClass( "1" ) );
    log( $hasClass.hasClass( "hasClass" ) );
    

    Query.hasClass is now consistent with Cash.hasClass in this scenario

    Should also be consistent with JQuery: https://api.jquery.com/hasClass/#hasClass-className

    opened by mpf82 0
  • Add support for event delegation

    Add support for event delegation

    It will be very useful to be able to do event delegation the jQuery way. This will greatly increase the speed of handling events - as you will handle them in a central place.

    https://javascript.info/event-delegation

    https://learn.jquery.com/events/event-delegation/

    Maybe by passing a delegate: 'elem-selector' in the options of on() ?

    it can be easily done with css selctor matches, like:

    https://gomakethings.com/event-delegation-and-multiple-selectors-with-vanilla-js/

    opened by gpetrov 0
Owner
Vitali Malinouski
Vitali Malinouski
Dead Simple Postgres Data Viewer and Query Runner

Dead Simple Postgres Data Viewer and Query Runner Environment Variables GITHUB_CLIENT_ID Github Client ID of the Oauth Application for protecting your

Mahesh C. Regmi 7 Aug 22, 2022
A Node.js library for retrieving data from a PostgreSQL database with an interesting query language included.

RefQL A Node.js library for retrieving data from a PostgreSQL database with an interesting query language included. Introduction RefQL is about retrie

Rafael Tureluren 7 Nov 2, 2022
A fast, synchronized and dynamic query builder package.

@ssibrahimbas/query A fast, synchronized and dynamic query builder package. What is? In short, the query builder. You can write complex and parameteri

Sami Salih İbrahimbaş 7 Jun 13, 2022
Database driven code generation for ts-sql-query

ts-sql-codegen This utility generates table mapper classes for ts-sql-query by inspecting a database through tbls. While it is possible to use ts-sql-

Lorefnon 12 Dec 12, 2022
ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.

TypeORM is an ORM that can run in NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron platforms and can be used

null 30.1k Jan 3, 2023
A lightweight way to cache on graphQL servers

cacheflowQL What is cacheflowQL? CacheflowQL is an npm package with complex caching algorithms that provide developers deep insights into their GraphQ

OSLabs Beta 53 Nov 16, 2022
A way to Dockerize your Hardhat solidity contracts

How To Dockerize Your Hardhat Solidity Contract This is the final code from the article "How To Dockerize Your Hardhat Solidity Contract On Localhost"

manny 21 Dec 3, 2022
Pulsar Flex is a modern Apache Pulsar client for Node.js, developed to be independent of C++.

PulsarFlex Apache Pulsar® client for Node.js Report Bug · Request Feature About the project Features Usage Contributing About PulsarFlex is a modern A

null 43 Aug 19, 2022
A proposal to add modern, easy to use binary encoders to the web platform.

proposal-binary-encoding A proposal to add modern, easy to use binary encoders to the web platform. This is proposed as an addition to the HTML spec,

Luca Casonato 35 Nov 27, 2022
Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use.

Lovefield Lovefield is a relational database written in pure JavaScript. It provides SQL-like syntax and works cross-browser (currently supporting Chr

Google 6.8k Jan 3, 2023