spooky-element
A very lightweight, jQuery-like wrapper for DOM elements, with a lot of functionality.
Makes working with DOM elements a little less scary :)
Couldn't find anything like this, so I've put it together to help me build awesome sites, extra FAST!
- Saves you time
- Built for performance! Great for creating DOM elemennts on the fly
- Works well with Handlebars, especially with hbsfy
- Works great with GSAP (TweenLite, TimelineLite, etc.)
- Built on the shoulders of giants
- Extra spooky 👻
Browser testing is provided by the awesome folks at BrowserStack
Installation
npm install spooky-element
Usage
Feature Examples
var SpookyElement = ; // Select an existing element withing the DOM// new SpookyElement( selector [, parentSelector] )// or// new SpookyElement( selector [, spookyElementParent] ) '.ghost';'.ghost' '#haunted-house';// Or without the new keyword; // Pass in jQuery elements ; // Pass in a DOM element// new SpookyElement( domElement ); document ; // Pass in an HTML string// new SpookyElement( HTMLString ); '<div class="boo"></div>' ; // Provide a template function (like handlebars)// new SpookyElement( templateFunction [, templateData] );// using hbsfy (https://github.com/epeli/node-hbsfy) browserify transform here, very handy! autoSpook:true ; // You can also extend a SpookyElement// This will automatically render the template on initialization var { thistemplate = ; SpookyElement;}ExtraSpookyprototype = Object; // Or ES6 syntax { super data; } // Pass in data to the template for extra spoookinessvar extraSpooky = eyes:'angry' slime:true;
Basic Usage
var spooky = '<div class="boo">BOO!</div>' ;spooky// yes it's chainable;
All The Goods
spookyElementInstanceview // Contains the DOM element // returns found element within the spooky element // alias to getElement() // Returns a found DOM element and wraps it into a SpookyElement // Returns an array of all found DOM elements as SpookyElements // Appends to either a DOM element or a SpookyElement // Prepends to a DOM or a SpookyElement // Append a DOM or a SpookyElement // Attach an event handler to the element // Detach an event handler from the element // Modify CSS // Modify attributes // Add class to element // Remove class from element // Check if element has class // Get element width // Get element height // Get or set innerHTML // Set the width/height of the element // Removes element // Removes element
License MIT
See LICENSE file