@jacksonjp/kquery

kQuery

What's better than jQuery? 👉 kQuery 👈

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.

kQuery(cssSelectorString)

Select matching elements on the page.

• Returns a kQuery collection

Example

index.html

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

index.js

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

index.html

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

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

index.js

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

index.html

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

index.js

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

index.html

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

index.js

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

index.html

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

index.js

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

index.html

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

index.js

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

Result:

domElements contains an array of DOM elements with two elements.