https://github.com/dzervoudakes/grindstonejs
Quick and dirty DOM manipulation.
https://github.com/dzervoudakes/grindstonejs
dom javascript jquery-alternative library
Last synced: 3 months ago
JSON representation
Quick and dirty DOM manipulation.
- Host: GitHub
- URL: https://github.com/dzervoudakes/grindstonejs
- Owner: dzervoudakes
- License: mit
- Created: 2014-05-11T16:41:27.000Z (about 12 years ago)
- Default Branch: main
- Last Pushed: 2021-10-16T00:21:34.000Z (over 4 years ago)
- Last Synced: 2026-04-01T07:14:55.365Z (3 months ago)
- Topics: dom, javascript, jquery-alternative, library
- Language: JavaScript
- Homepage:
- Size: 4.05 MB
- Stars: 11
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
⚠️ **This package has been deprecated and will no longer be actively maintained.**
# Grindstone.js
> A lightweight jQuery alternative for modern browsers.
[](https://www.npmjs.com/package/grindstone)
[](https://github.com/dzervoudakes/grindstonejs/actions)
[](https://codecov.io/gh/dzervoudakes/grindstonejs)
[](https://www.codacy.com/gh/dzervoudakes/grindstonejs?utm_source=github.com&utm_medium=referral&utm_content=dzervoudakes/grindstonejs&utm_campaign=Badge_Grade)
[](https://prettier.io/)
[](https://github.com/dzervoudakes/grindstonejs/blob/main/LICENSE)
**NPM:**
```
npm install grindstone
```
**Yarn:**
```
yarn add grindstone
```
**CDN:**
```
```
## Table of Contents
* [Goals](#goals)
* [Documentation](#documentation)
* [Dev Instructions](#dev-instructions)
## Goals
For the average project, 87kb or so worth of jQuery - minified - is unnecessary. Grindstone.js handles many commonly used methods while weighing in at just 13kb (minified).
This library does not aim to replace jQuery.
Grindstone.js supports the following browsers:
| Browser | Version |
| ------- | ------- |
| Chrome | 4.0+ |
| Firefox | 3.5+ |
| Edge | 13+ |
| IE | 10+ |
| Safari | 3.2+ |
| Opera | 10.0+ |
## Documentation
As is the case with jQuery, usage is as follows:
```js
$(selector[, context]);
```
Extending Grindstone.js by adding new methods is as easy as well:
```js
$.fn => Grindstone.prototype
$.fn.someNewMethod = function() {};
$(selector).someNewMethod();
```
Full documentation on all methods is below.
| Ajax | Attributes | Collection | Events | Filtering | Forms | Manipulation | Miscellaneous | Traversing |
| --------------- | ----------------------------- | ----------------- | --------------------------- | ------------------- | ------------------- | ----------------------------- | ------------------------- | ----------------------- |
| [ajax()](#ajax) | [addClass()](#addclass) | [each()](#each) | [click()](#click) | [filter()](#filter) | [submit()](#submit) | [after()](#after) | [debounce()](#debounce) | [children()](#children) |
| | [attr()](#attr) | [eq()](#eq) | [doubleTap()](#doubleTap) | [is()](#is) | [val()](#val) | [append()](#append) | [extend()](#extend) | [contents()](#contents) |
| | [data()](#data) | [first()](#first) | [focus()](#focus) | [not()](#not) | | [before()](#before) | [mouseable()](#mouseable) | [next()](#next) |
| | [hasAttr()](#hasattr) | [get()](#get) | [load()](#load) | | | [clone()](#clone) | [offset()](#offset) | [parent()](#parent) |
| | [hasClass()](#hasclass) | [last()](#last) | [off()](#off) | | | [css()](#css) | | [prev()](#prev) |
| | [removeAttr()](#removeattr) | [map()](#map) | [on()](#on) | | | [empty()](#empty) | | |
| | [removeClass()](#removeclass) | | [ready()](#ready) | | | [height()](#height) | | |
| | [removeData()](#removedata) | | [resize()](#resize) | | | [hide()](#hide) | | |
| | [toggleClass()](#toggleclass) | | [scroll()](#scroll) | | | [html()](#html) | | |
| | | | [scrollLeft()](#scrollLeft) | | | [prepend()](#prepend) | | |
| | | | [scrollTop()](#scrollTop) | | | [remove()](#remove) | | |
| | | | [trigger()](#trigger) | | | [replaceWith()](#replacewith) | | |
| | | | | | | [show()](#show) | | |
| | | | | | | [width()](#width) | | |
| | | | | | | [wrap()](#wrap) | | |
| | | | | | | [wrapInner()](#wrapinner) | | |
### ajax()
Create an XMLHttpRequest.
Acceptable options include:
* method (GET, POST, PUT, etc.)
* url (data path)
* async (true or false)
* dataType (DOMString, blob, json, document, etc.)
* body (payload)
* headers (adds custom HTTP headers to the request)
```js
$.ajax({
method: 'GET',
url: 'https://www.something.com/detail',
dataType: 'json'
})
.then((resp) => {})
.catch((err) => {});
$.ajax({
method: 'POST',
url: 'https://www.something.com/api',
body: { form: data },
headers: { 'Content-Type': 'application/json' }
})
.then((resp) => {})
.catch((err) => {});
```
### addClass()
Add a class or classes to the current set of elements.
```js
$('#selector').addClass('example');
$('#selector').addClass('one two');
```
### attr()
Set or return the value of the specified attribute.
```js
$('#selector').addClass('example');
$('#selector').addClass('one two');
```
### click()
Trigger a callback on click, or trigger the click itself.
```js
$('#selector').click();
$('#selector').click(() => {});
```
### data()
Assign a data-value attribute to a set of elements or return the current value of an element.
```js
$('#selector').data('name');
$('#selector').data('name', 'value');
```
### hasAttr()
Determine if the current element has the specified attribute.
```js
$('#selector').hasAttr('example');
```
### hasClass()
Determine if the elements have the specified class(es).
```js
$('#selector').hasClass('example');
$('#selector').hasClass('one two');
```
### removeAttr()
Remove the the specified attribute.
```js
$('#selector').removeAttr('example');
```
### removeClass()
Remove a class or classes from the current set of elements.
```js
$('#selector').removeClass('example');
$('#selector').removeClass('one two');
```
### removeData()
Remove a data-value attribute from a set of elements.
```js
$('#selector').removeData('name');
```
### toggleClass()
Toggle the specified class(es).
```js
$('#selector').toggleClass('example');
$('#selector').toggleClass('one two');
```
### each()
Iterate through each item in the set and execute the callback.
```js
$('.selector').each((item, index, array) => {});
```
### eq()
Return the DOM element at the specified index of the current as a new instance of Grindstone.
```js
$('.selector').eq(2);
```
### first()
Get the first element.
```js
$('.selector').first();
```
### get()
Return the DOM element at the specified index of the current set.
```js
$('.selector').get(2);
```
### last()
Get the last element.
```js
$('.selector').last();
```
### map()
Map each element to an array of values.
```js
$(array).map((item, index, array) => {});
```
### doubleTap()
Trigger a function by double-tapping or double-clicking.
```js
$('#selector').doubleTap(() => {});
```
### focus()
Focus on the first element in the set or trigger a callback when some element is focused on.
```js
$('#selector').focus();
$('#selector').focus(() => {});
```
### load()
Trigger a function on the load event.
```js
$(window).load(() => {});
```
### off()
Remove an event listener.
```js
$('#selector').off('change', () => {});
$('#selector').off('click touchend', () => {});
```
### on()
Assign an event listener.
```js
$('#selector').on('change', () => {});
$('#selector').on('click touchend', () => {});
```
### ready()
Trigger a function when the DOM content is loaded.
```js
$(document).ready(() => {});
```
### resize()
Capture the resize event from a set of elements and execute a function.
```js
$(window).resize(() => {});
```
### scroll()
Listen for the scroll event and trigger a function.
```js
$(window).scroll(() => {});
```
### scrollLeft()
Scroll an element to a specific left position relative to its another parent container.
Return the current left offset of an element, relative to its parent container.
```js
$('#selector').scrollLeft();
$('#selector').scrollLeft(50);
```
### scrollTop()
Scroll an element to a specific top position relative to its another parent container.
Return the current top offset of an element, relative to its parent container.
```js
$('#selector').scrollTop();
$('#selector').scrollTop(50);
```
### trigger()
Dispatch a custom event.
```js
$('#selector').trigger('example');
```
### filter()
Filter the elements by the selector or callback function.
```js
$('.selector').filter('.visible');
```
### is()
Check if any of the elements match the given selector or callback function.
```js
$('.selector').is('.visible');
```
### not()
Exclude matching elements and includes non-matching elements.
```js
$('.selector').not('.hidden');
```
### submit()
Submit a form or trigger a function when a form is submitted.
```js
$('#selector').submit();
$('#selector').submit(() => {});
```
### val()
Return or assign the value of an element.
```js
$('#selector').val();
$('#selector').val('7');
```
### after()
Insert new content after a target element.
```js
$('#selector').after('
Hello World
');
```
### append()
Append a new element or new content.
```js
$('#selector').append('#element');
$('#selector').append('
Hello World
');
```
### before()
Insert new content before a target element.
```js
$('#selector').before('
Hello World
');
```
### clone()
Clone the elements in the set.
```js
$('#selector').clone();
```
### css()
Adjust the styles of selected elements or return the requested value.
```js
$('#selector').style('display');
$('#selector').style('display', 'block');
$('#selector').style({ display: 'block', color: 'red' });
```
### empty()
Remove all child nodes of all elements in the set.
```js
$('.selector').empty();
```
### height()
Adjust the height of the selected elements or return the current height value of the first element in the set.
```js
$('#selector').height();
$('#selector').height(30);
```
### hide()
Hide a set of elements.
```js
$('#selector').hide();
$('#selector').hide(100);
```
### html()
Replace an element's innerHTML or return the current innerHTML.
```js
$('#selector').html();
$('#selector').html('
Hello World
');
```
### prepend()
Prepend a new element or new content.
```js
$('#selector').prepend('#element');
$('#selector').prepend('
Hello World
');
```
### remove()
Remove elements from the DOM.
```js
$('#selector').remove();
$('#selector').remove('.selector');
```
### replaceWith()
Replace an element with some other content.
```js
$('#selector').replaceWith('
Hello World
');
```
### show()
Show a set of hidden elements.
```js
$('#selector').show();
$('#selector').show(100);
```
### width()
Adjust the width of the selected elements or return the current width value of the first element in the set.
```js
$('#selector').width();
$('#selector').width(30);
```
### wrap()
Wrap the outer structure of the set of elements.
```js
$('#selector').wrap('
');
```
### wrapInner()
Wrap the inner structure of the set of elements.
```js
$('#selector').wrapInner('
');
```
### debounce()
Rate-limit a given function.
```js
$.debounce(() => {}, 300);
```
### extend()
Merge properties from one or more objects into a target object.
Existing properties in the target object will be overwritten if they exist in any of the argument objects.
```js
$.extend({}, { foo: 'bar' });
$.extend(obj1, obj2, obj3, obj4);
```
### mouseable()
Assign hover and active classes.
```js
$('#selector').mouseable();
$('#selector').mouseable({ hoverClass: 'stuff', activeClass: 'things' });
```
### offset()
Return the left or top value of the selector, relative to the document.
```js
$('#selector').offset('left');
$('#selector').offset('top');
```
### children()
Get the child elements as a new collection.
```js
$('#selector').children();
$('#selector').children('.selector');
```
### contents()
Get all the children as a new collection, including text and comments.
```js
$('#selector').contents();
```
### next()
Get the next element as a new collection.
```js
$('#selector').next();
$('#selector').next('.selector');
```
### parent()
Get the parent element as a new collection.
```js
$('#selector').parent();
$('#selector').parent('.selector');
```
### prev()
Get the previous element as a new collection.
```js
$('#selector').prev();
$('#selector').prev('.selector');
```
- - - -
## Dev Instructions
### Install Dependencies
```
npm install
```
### Run Continuous Build for Development
```
npm start
```
### Compile
```
npm run build
```
### Generate Documentation
```
npm run docs
```
### Run Lint
```
npm run lint
```
### Run Lint With Fix
```
npm run lint:fix
```
### Run Unit Tests
```
npm test
```
### Remove All Build Directories
```
npm run clean
```
### Run All Checks Before Publish
```
npm run test:all
```
## Technical Requirements
> The runtime environment for this library requires `Node >= 13.6.0` and `NPM >= 6.4.1`.
## Configuration
> This library makes use of `ESLint` and `EditorConfig`. Each of these features requires
> an extension be installed in order to work properly with IDEs and text editors such as VSCode.