@jocat/easy-query v1.0.1

easy-query

Wrappers for the querySelector and querySelectorAll functions

For those who like to write shorter code, as well as those who are nostalgic for the days of popularity of jQuery

Connect example:

<script src="https://cdn.jsdelivr.net/gh/JoCat/easy-query@1.0/index.js"></script>

or use ESM

<script type="module">
    import {
        $,
        $a,
    } from "https://cdn.jsdelivr.net/gh/JoCat/easy-query@1.0/index-esm.js";
</script>

Usage example:

const element = $(".element");
const list = $a(".parent .child");

// Instead of

const element = document.querySelector(".element");
const list = document.querySelectorAll(".parent .child");

// or equivalent from jQuery

const element = $(".element")[0];
const list = $(".parent .child");

Also, if you need to search for an element in another element, you can use the following option:

const parent = $(".parent");
const childElement = $(".child", parent);
const childElements = $a(".child", parent);

// Instead of

const parent = document.querySelector(".parent");
const childElement = parent.querySelector(".child");
const childElements = parent.querySelectorAll(".child");

// or equivalent from jQuery

const parent = $($(".parent")[0]);
const childElement = parent.find(".child")[0];
const childElements = parent.find(".child");

Обёртки над функциями querySelector и querySelectorAll

Для любителей писать более короткий код, а также тех, кто ностальгирует по временам популярности JQuery

Пример подключения:

<script src="https://cdn.jsdelivr.net/gh/JoCat/easy-query@1.0/index.js"></script>

с использованием модулей ESM

<script type="module">
    import {
        $,
        $a,
    } from "https://cdn.jsdelivr.net/gh/JoCat/easy-query@1.0/index-esm.js";
</script>

Пример использования:

const element = $(".element");
const list = $a(".parent .child");

// Вместо

const element = document.querySelector(".element");
const list = document.querySelectorAll(".parent .child");

// или аналог из JQuery

const element = $(".element")[0];
const list = $(".parent .child");

Также в случае необходимости искать элемент в другом элементе, можно воспользоваться следующим вариантом:

const parent = $(".parent");
const childElement = $(".child", parent);
const childElements = $a(".child", parent);

// Вместо

const parent = document.querySelector(".parent");
const childElement = parent.querySelector(".child");
const childElements = parent.querySelectorAll(".child");

// или аналог из JQuery

const parent = $($(".parent")[0]);
const childElement = parent.find(".child")[0];
const childElements = parent.find(".child");