🎤 kQuery

What's better than jQuery? 👉 kQuery 👈

kQuery is a a simplified jQuery-like capable library that helps you interact with your DOM in an old-fashioned way.

🎲 Playground

You can use this Codesandbox to play and explore kQuery!

🚀 Getting started

npm install @afontcu/kquery

Then, you need to include kQuery to your project:

// using ES6 modules
import kQuery from '@afontcu/kquery'

// using CommonJS modules
const kQuery = require('@afontcu/kquery').default

you can also load directly from a browser, without needing a building step:

<script src="//unpkg.com/@afontcu/kquery@[VERSION]/dist/kquery.min.js"></script>

(make sure you change [VERSION] with the desired version, such as 0.1.0).

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

🖥 Browser support

kQuery works in all modern browsers and Internet Explorer ≥ 11.

😇 Contributing

All contributions are welcomed!

• "I found a bug!". Great! Submit an issue or even better... submit a Pull Request with a solution!
• "I want to add a feature". Sounds great too! The best way to land a new feature would be to submit a feature request.
• "I have a question/doubt!". This is the place! Submit an issue.

Make sure you read our Contributing guide. Please notice that kQuery uses templates for the issues, so they will help you submit all the required information.

⏩ Roadmap

• [ ] Add a CI pipeline (using Travis, probably. PRs welcome!).
• [ ] Add functional tests.
• [ ] Add issue and feature request templates.
• [ ] Publish documentation on Github pages instead of using project's README.
• [ ] Add Commitizen to standardize commit history...
• [ ] ...and semantic-release to automate the package release workflow

🔐 License

kQuery is MIT licensed.