Goal

What's better than jQuery? 👉 kQuery 👈

The goal of this repository is to build a simplified jQuery-like capable library, called 🎤 kQuery.

Table of contents

• Usage
• API
  • kQuery(cssSelectorString)
    • Example
    • Result
  • kCollection.replaceWith(kCollection)
    • Example
    • DOM result
  • kCollection.style(Object)
    • Example
    • Result
  • kCollection.remove()
    • Example
    • DOM result
  • kCollection.find(cssSelectorString)
    • Example
    • Result
  • kCollection.get()
    • Example
    • Result
  • kCollection.getCurrentCssSelector()
    • Example
    • Result

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

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

kCollection.getCurrentCssSelector()

• Returns a string which reppresent the concatenations of all chain css selectors.

Example

const cssSelector = kQuery('.item').find('span').getCurrentCssSelector();

Result

cssSelector contains .item span.