If jQuery is New Wave JavaScript we are the K-Pop

Installation

Use the package manager npm to install foobar.

npm install @tomasamaro/kquery

or import it directly to your script using unpkg

<script src="https://unpkg.com/tomasamaro@kquery/dist/kquery.umd.js"></script>

Usage

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

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.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.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.

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.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.

Contributing

For contribuitions please check

CONTRIBUTION.md

License

MIT