qnodes

QNodes

A tiny (3.22KB minified & gzipped) DOM manipulation library written in TypeScript inspired by JQuery.

Installation

npm install qnodes --save

Import

import { Q, QNodes } from "qnodes";

Usage

DOM Selection

QNodes uses querySelectorAll() for selection. A list of possible selectors can be found here.

Select all H1-Headlines

let $elements = Q("h1"); 

Select all links that are direct children of DIVs with CSS class 'myclass'

Q("div.myclass>a"); 

Next / previous sibling of element with ID 'myid' that has class 'myclass'

Q("#myid").next(".myclass"); 
Q("#myid").prev(".myclass"); 

Last list element of first unordered list

Q("ul").first().find(">li").last();

First ancestor of element with ID 'myid' that is a link with 'href' attribute

Q("#myid").parents("a[href]").first();

DOM Manipulation

Change content of first headline

Q("h1").first().html("Hello World");

Set content of all links to content of first H2 headline

Q("a").html(Q("h2").first().html());

Set attribute 'myattr' to 'foo' for all elements with class 'myclass' and remove that class

Q(".myclass").attr({ myattr: "foo" }).removeClass("myclass");

Remove all links that have 'href' set to '#'

Q("a[href='#']").detach();

Animation

QNodes uses CSS animations internally

Q("#mydiv").animate({ opacity: 0.5 }, 750, "linear", ($nodes) => {
	//callback;
});