Little simplified jQuery-like capable library
Live example of the build can be found here: algotest
With NPM
- Just download the kQuery directory in your source project
- Import kQuery.js from it wherever you want to use it
- Node (build on 11.6)
- npm
- parcel
- linter (standardJS)
- Mocha & Chai
To build kQuery, run the following commands:
npm install -g parcel standard
npm install
parcel demo/demo.html
To build kQuery, run the following commands:
npm install -g parcel standard
npm install
parcel build index.js
To dev kQuery use Parcel's web server: parcel demo/demo.html
To test (linter and unit) run: npm run test
Feel free to contact me or submit clear PR, with source code respecting Standar JS norms.
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.
The API to implement is very similar to the jQuery API.
Select matching elements on the page.
- Reads a CSS selector string
- Returns a kQuery collection (
kCollection
orcollection
in this assignment)
<div class="item">Hello</div>
<div class="item">World!</div>
const kCollection = kQuery('.item');
kCollection
now contains the elements matching the CSS selector .item
.
- Replaces the current collection with another one
- Returns the new collection
<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'));
<span class="itemReplacement">Hello</span>
<span class="itemReplacement">World!</span>
- Updates the style of the current collection
- Returns the current collection
<div class="item">Hello World!</div>
kQuery('.item').style({ color: 'red' });
Hello World!
is now displayed in red color.
- Removes the current collection from the DOM
- Returns an empty collection to allow the chain of commands to continue
<div class="item">Some</div>
<div class="item">Item</div>
<div>Hello World!</div>
kQuery('.item').remove();
<div>Hello World!</div>
- Searches the current collection for matching elements and replaces the current collection
- Returns the new collection
<div class="item">Hello <span>World!</span></div>
<div class="item">World! <span>Hello</span></div>
const kCollection = kQuery('.item').find('span');
kCollection
contains two spawn elements.
- Returns an
Array
of all DOM elements in thekCollection
After this call, the kQuery
chain ends since you get a regular Array
and not a kCollection
.
<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.