@unbearablebear/kquery v0.0.7

🎤 kQuery

A simplified jQuery-like capable library for less than 1kb gzipped.

• Getting started
• API
  • kQuery(cssSelectorString)
  • kCollection.find(cssSelectorString)
  • kCollection.get()
  • kCollection.karaoke()
  • kCollection.replaceWith(kCollection)
  • kCollection.remove()
  • kCollection.style(Object)
• Browser support
• Roadmap
• Contributing
• License

Installation

With yarn:

yarn add @unbearablebear/kquery

then

import kQuery from "@unbearablebear/kquery";

Directly in a browser:

<script src="https://unpkg.com/@unbearablebear/kquery@0.0.7"></script>

then

window.kquery('.item')

Getting started

import kQuery from 'kquery';

kQuery('.item')
  .replaceWith(kQuery('.itemReplacement'))
  .style({
    color: '#000',
  });

This gets all the DOM elements matching the CSS selector .item, replaces them with all the elements matching .itemReplacement, and then changes the CSS color property of the DOM element.

API

The API to implement is very similar to the jQuery API.

kQuery(cssSelectorString)

Select matching elements on the page.

• Reads a CSS selector string
• Returns a kQuery collection (kCollection or collection in this assignment)

Example

<div class="item">Hello</div>
<div class="item">World!</div>

const kCollection = kQuery('.item');

Result

kCollection now contains the elements matching the CSS selector .item.

kCollection.find(cssSelectorString)

• Searches the current collection for matching elements and replaces the current collection
• Returns the new collection

Example

<div class="item">Hello <span>World!</span></div>
<div class="item">World! <span>Hello</span></div>

const kCollection = kQuery('.item').find('span');

Result

kCollection contains two spawn elements.

kCollection.get()

• Returns an Array of all DOM elements in the kCollection

After this call, the kQuery chain ends since you get a regular Array and not a kCollection.

Example

<div class="item">Hello</div>
<div class="item">World!</div>

const domElements = kQuery('.item').get();

Result:

domElements contains an array of DOM elements with two elements.

kCollection.karaoke()

• Starts a karaoke in the current collection.

Example

<div class="item">🎵</div>
<div class="item">🎶</div>

kQuery('.item').karaoke();

Result:

The elements in the collection are now doing a karaoke !

kCollection.replaceWith(kCollection)

• Replaces the current collection with another one
• Returns the new collection

Example

<div class="item">Some</div>
<div class="item">Item</div>

<span class="itemReplacement">Hello</span>
<span class="itemReplacement">World!</span>

kQuery('.item').replaceWith(kQuery('.itemReplacement'));

DOM result

<span class="itemReplacement">Hello</span>
<span class="itemReplacement">World!</span>

kCollection.remove()

• Removes the current collection from the DOM
• Returns an empty collection to allow the chain of commands to continue

Example

<div class="item">Some</div>
<div class="item">Item</div>
<div>Hello World!</div>

kQuery('.item').remove();

DOM result

<div>Hello World!</div>

kCollection.style(Object)

• Updates the style of the current collection
• Returns the current collection

Example

<div class="item">Hello World!</div>

kQuery('.item').style({ color: 'red' });

Result

Hello World! is now displayed in red color.

Browser support

We support the last two versions of major browsers (Chrome, Edge, Firefox, Safari). Annnnd also IE11 😐

Roadmap

Take a look at our enhancement issues.

Contributing

We welcome all contributors, from casual to regular 💙

• Bug report. Is something not working as expected? Send a bug report.
• Feature request. Would you like to add something to the library? Send a feature request.
• Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

To start contributing to code, you need to:

1. Clone the repository
2. Install the dependencies: yarn
3. Start coding !

Please read our contribution process to learn more.

License

kQuery is ISC licensed.