ZebraJS retains jQuery's intuitive and simple syntax but the code behind is largely inspired from the excellent You Don't Need jQuery GitHub repository as well as the documentation on Mozilla Developer Network, and makes use of the modern browsers' improved support for manipulating DOM elements. Also, in line with the modern age's pursuit for byte saving, ZebraJS allows you to build customized versions of the library and include just the bits you need.
// always cache selectors // to avoid scanning the DOM over and over again var elements = $('selector')
As with both querySelector and querySelectorAll, the
selector string may contain one or more CSS selectors separated by commas:
var elements = $('div.authentication .form-container.authentication input[type=text]');
I cannot stress enough how important it is to understand the fact that everytime you call the $ global function you will create a new object that will take up memory - ZebraJS does not cache selectors! Therefore, you should never use it in an event handler or a function that gets called multiple times over the lifetime of a page and instead cache those selectors outside those functions! Yes, this true for jQuery, also.
Once you grab hold of one or more elements (we call this wrapping elements because we wrap the ZebraJS object over the selected elements) you can call any of ZebraJS's methods.
Where to use ZebraJS
Keep in mind that this library is currently in its infancy so adjust your expectations accordingly.
Make sure you have installed Node.js, npm and Grunt. Once you have those, open up a terminal in the project's folder and run
npm install. Next time you'll just have to type
grunt in your terminal while in the project's folder.
From this point on, when you edit the project's files in the
/src folder, Grunt will automatically run tasks that will check whether you follow the project's coding standards via ESLint, will do static code analysis via JSHint, will use Uglify on the code and will generate the documentation with JSDoc (documentation follows JavaDoc standards)
You can help by writing actual code for the methods listed in the
/src folder and which don't have yet been written. The methods are included in the main
$.js file via comments looking like
// import "methodName.js".
Alternatively, you can help improving the library's website in the
/docs/download/assets_src folder and the actual