@yannickcr/kquery v1.0.2

kQuery

A simplified jQuery-like capable library

Test it on CodeSandbox

Installation

You can install kQuery using npm:

npm install @yannickcr/kquery

Then import it in your project:

// Using ES6 modules
import kQuery from '@yannickcr/kquery'
 
// Using CommonJS modules
const kQuery = require('@yannickcr/kquery').default

You can also use it directly via a CDN:

<script crossorigin src="https://unpkg.com/@yannickcr/kquery@1/dist/umd/kquery.min.js"></script>

Then it will be available on window.kQuery.

API

kQuery(selector)

Select matching elements on the page.

Arguments

1. selector (String): CSS selector string

Returns

kQuery collection (named kCollection or collection) containing all elements matching the CSS selector

Example

<!-- index.html -->
<div class="item">Hello</div>
<div class="item">World!</div>

// index.js
const kCollection = kQuery('.item');

kCollection.replaceWith(newCollection)

Replaces the current collection with another one

Arguments

1. newCollection (KCollection): A new collection to replace the current collection. The new collection must have exactly the same number of elements as the current collection.

Returns

The new kQuery 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(styleList)

Updates the style of the current collection

Arguments

1. styleList (Object): An object of property-value pairs containing the CSS styles to apply to the collection.

Returns

The kQuery collection

Example

<!-- index.html -->
<div class="item">Hello World!</div>

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

DOM result:

<div class="item" style="color: red;">Hello World!</div>

kCollection.remove()

Removes the current collection from the DOM

Returns

The emptied kQuery collection

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(selector)

Searches the current collection for matching elements and replaces the current collection

Arguments

1. selector (String): CSS selector string

Returns

The new kQuery collection with the matching elements

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');

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();

License

kQuery is licensed under the MIT License.