dope
dope is cross-browser JavaScript module for working with HTML attributes. It includes an HTML5 dataset API abstraction that adheres to the specification. It works standalone or can integrate into jQuery-compatible hosts. It runs screamin-fast and gzips < 2k. Got data? =)
2.2)
API (In standalone usage, methods are available on the dope namespace. The docs below use $
to denote dope
or a host library like jQuery or ender.
dope; // standalone$; // integrated
Chain methods
$.fn.attr()
// get attribute on elem (or 1st elem in collection) // set attribute on elem (or on collection) // set multiple attributes via key/value pairs
$.fn.removeAttr()
// remove 1 or more SSV attributes from elem or collection
$.fn.dataset()
// get all data-* attributes on elem (or 1st elem in collection) // get data-* attribute on elem (or 1st elem in collection) // set data-* attribute on elem (or on collection) // set multiple data-* attributes via key/value pairs // get [exact] data-* attribute (primitives render to correct type)
// set <body data-movie-name="Pulp Fiction"> // returns "Pulp Fiction" // set <div data-stars="5"> on all matched divs // returns "5" // returns 5
$.fn.deletes()
// remove 1 or more SSV data-* attributes from elem or collection
// remove [data-movie-name] from the <body> element
Static methods
$.attr()
$ // get attribute on elem$ // set attribute on elem$ // set multiple attributes via key/value pairs
$.removeAttr()
$ // remove 1 or more SSV attributes from elem (or from collection)
$.dataset()
$ // get all data-* attrs on elem$ // get data-* attribute on elem$ // set data-* attribute on elem$ // set multiple data-* attributes via key/value pairs$ // get [exact] data-* attribute (primitives parse to correct type)
$ // set <body data-movie-name="Pulp Fiction">$ // returns "Pulp Fiction"
$.deletes()
$ // remove 1 or more SSV data-* attributes from elem (or from collection)
$ // remove [data-movie-name] from the <body> element
$.queryData()
$ // get elements by data key (keys can be an array or CSV or SSV string)
$ // Delegate to $("[data-mia-wallace],[data-vincent-vega]")
$.trim()
$ // Trim surrounding whitespace.
$.parse()
$ // Convert stringified primitives to correct value. Non-strings are unchanged.$ // Parse JSON. Safely wraps `JSON.parse` so that it won't throw an error.
$.parse
and $.parseJSON
trim "string"
inputs before parsing them.
$ // 'yo'$ // 10$ // true$ // null$ // undefined$ // Infinity$ // NaN
$.camelize()
$ // convert a dashed data- string into camelCase
$ // 'miaWallace'$ // 'miaWallace'$ // '47'
$.datatize()
$ // convert a camelized string into a lowercase dashed data- attribute name
$ // 'data-mia-wallace'$ // 'data-47'$ // 'data-0'$ // ''$ // ''$ // ''
AMD usage
;
Compatibility
Supports all major browsers. Tested in Chrome, FF3+, IE7+, Opera, and Safari.
Related modules
- atts: attributes module
License
MIT