Dough supports modern browsers, and should do well on Google Chrome, Firefox, Safari, Internet Explorer 9+, iOS and Android 2+.

What's Different?

Collection Methods

Dough's instance methods are performed collection-wide, that is - they are executed on every element in the Dough object (Except for some obvious exceptions like find(), next() and others).

The library could have had lots of polyfills but ultimately it was designed to have methods for actions that have no native alternative, especially for bulk actions.

Hence, it behaves a bit differently than other libraries. For example, executing $("p").html() will set the HTML contents of every element in the collection to an empty string and won't return the HTML contents of the first element in the collection. The same goes for attr().

This happens because there's no need for a polyfill method to get the HTML contents of the first element (or any element) in the collection, one could just use $("p")[0].innerHTML or $("a")[2].getAttribute("href") which are already supported on Dough's target browsers and will always be much more performant.

Granular Execution

Every collection-wide Dough method supports executing its action on a specific element in the collection. This means you don't need re-create a Dough object just to play with a specific element, like this:

attr( name[, value, index] )

Sets or removes an attribute for every element in the collection, based on the given parameters (or for a specific element).

Parameters

name

(string) Name of the attribute to modify

value

(string) Value to set to the attribute

index

(integer) Collection element's index to perform this action on

Returns

The same Dough object for further method chaining. Notice: When no value is set - the method will remove that attribute and won't return the value of that attribute (use $("a")[0].getAttribute("href") instead).

Like This

// Happy kitties
$("a").attr("href","http://pleasehelpmebeyonce.com");
$("a").attr("href","http://nowhere.com",0); // Happy kitty (Granular)
// Dough.js performs collection-wide methods,
// so this just removes the attribute since it
// has no meaning being empty... (sorry if it has)
$("a").attr("href");
// This is how you'd retrieve an attribute's value
$("a")[0].getAttribute("href"); // Since forever

CSS

addClass( classes[, index ] )

Adds one or more CSS selector classes to every element in the collection (or to a specific element).

Returns

Like This

toggleClass( classes[, isAdd, index ] )

Adds or removes one or more CSS selector classes from every element in the collection, according to its presence (or from a specific element). Supply isAdd to perform a specific action - addition or removal.

Parameters

classes

(string) CSS selector class(es)

isAdd

(boolean) Explicit flag for performing an addition or removal action. Must be either true or false

hasClass( classes[, index ] )

Determines whether every element in the collection has one or more CSS selector classes (or whether a specific element has).

Parameters

classes

(string) CSS selector class(es)

index

(integer) Collection element's index to perform this action on

Returns

Boolean value for the presence of the CSS selector class(es).

Like This

// Every <a> has 'light' and 'lite'
$("a").hasClass("light lite"); // = true
// Only the <a> has 'light' but only some have 'lite'
$("a").hasClass("light lite"); // = false
// Granular
$("a").hasClass("light lite",0);

css( styles[, value, index] )

Sets or removes inline styling for every element in the collection, based on the given parameters (or for a specific element).

Parameters

styles

(object) Key-value pairs of CSS properties and their matching values, or (string) the name of a specific CSS property name

value

(string) Value for a specific CSS property (when styles is a property name)

index

(integer) Collection element's index to perform this action on

Returns

The same Dough object for further method chaining. Notice: When styles is the name of a single CSS property and no value is provided - the method will remove that property and won't return its value (use $("a")[0].styles.color instead).

Returns

Like This

click( fn[, index ] )

Attaches an synthesized pointer click event-handling method, which supports both mouse click and touch tap, to every element in the collection (or to a specific element). When being pressed/tapped, a "pressed" CSS selector class is added to the element(s).

Parameters

(string)The type of data sent to the server (as HTTP Content-Type header), such as `application/json` (default: `application/json` for GET requests and `application/x-www-form-urlencoded` for POST)

charset

(string)Request encoding (default: `UTF-8`)

data

(object)Key-value pairs of properties and their values to post to the server (also good for GET requests)

success

(function)Method to invoke upon request success. The method is provided with the response data as its argument (when using `application/json` content type, the data is already provided as a parsed object)

error

(function)Method to invoke upon request error. The method is provided with request HTTP status code as its argument

parseError

(function)Method to invoke upon JSON parsing error (when using `application/json` content type). The method is provided with the exception object as its argument