📦 Install from npm

npm install @gnehcwu/kQuery

🌈 Basic 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

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

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="items">
  <div class="item">Some</div>
  <div class="item">Item</div>
</div>

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

index.js

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

DOM result

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

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.

🥳 Contribution Guides

Please have a read of guides for code of conduct and contributing.

💎 How to run & build locally

// After git clone the repo, cd to project folder
npm install
npm start

👉 For running test locally

npm run test