JavaScript Functions and Helpers

Getting, setting, and removing attributes

getAttribute, setAttribute, removeAttribute - modify attributes, such as id, alt, title and more.

jQuery: $.attr()

Set and get CSS styles of elements

Get the computed style properties or set CSS properties for an element.

jQuery: $.css()

Get and set scroll position of an element

Get or set the horizontal and vertical scroll position of an element or the document.

jQuery: $.scrollLeft(), $.scrollTop()

Get the offset position of an element relative to its parent

Get the top/left coordinates of an element relative to the offset parent.

jQuery: $.position()

Get the position of an element relative to the document

Get the current top/left coordinates of an element relative to the document.

jQuery: $.offset()

Getting width and height of an element

Get the current computed dimension of an element, with or without borders and margins

jQuery: $.width(), $.height(), $.outerWidth(), $.outerHeight(), $.innerWidth(), $.innerHeight()

Making CORS Ajax GET requests

Asynchronous loading of data from a server in a different domain with modern browsers.

jQuery: $.ajax()

JSONP Ajax requests

JSONP allows asynchronous loading of data, even from servers in a different domain.

Load a script file asynchronously

How to load a JavaScript file asynchronously from the server and automatically execute it.

jQuery: $.getScript()

Send Ajax GET and POST requests

Load data asynchronously from the server using GET or POST HTTP requests. Set data type (xml, json, script, text, html) and decode returned data.

jQuery: $.ajax(), $.get(), $.post(), $.getJSON()

Serialize form data into an array

Encode a set of form elements as an array of names and values.

jQuery: $.serializeArray()

Serialize form data into a query string

Encode a set of form elements as a string for submission.

jQuery: $.serialize()

Preventing the default action or bubbling of events

How to cancel an event or preventing it from bubbling up the DOM tree.

jQuery: e.preventDefault(), e.stopPropagation()

Getting the keycode from keyboard events

Binding an event handler to keyboard actions and retrieving the keycode that triggered the event.

jQuery: $.keypress(), $.keyup(), $.keydown()

Getting the current mouse position

How to get the current mouse position on mouse move or click.

jQuery: $.mousedown(), $.click(), $.mouse...

Running code when the document is ready

A page can't be manipulated safely until the document is "ready." Here's how to make sure code isn't run prematurely.

jQuery: $(document).ready()

Live binding event handlers

Attach an event handler for all elements which match a given selector, now and in the future.

jQuery: $.live(), $.on(), $.bind()

Binding and unbinding of event handlers

How to attach or detach a handler function to an event, such as click, focus, or submit.

jQuery: $.on(), $.bind(), $.live(), $.click(), $.focus(), $.submit(), etc.

Trigger an event

How to create and dispatch events. Corresponding functions to jQuery's $.trigger(), $.click(), $.blur(), $.keyup(), $.mousedown(), etc.

jQuery: $.trigger(), $.click(), $.focus(), $.submit(), etc.

Animate an element property

How to do animations, such as fading, sliding, or just toggling visibility with JS and CSS3.

jQuery: $.animate(), $.slideUp(), $.slideDown(), $.fadeIn(), $.fadeOut()

Hide or show an element

Toggle an element's display property for rendering it visible or invisible.

jQuery: $.show(), $.hide(), $.toggle()

Parsing a JSON string

Takes a well-formed JSON string and returns the resulting JavaScript value.

jQuery: $.parseJSON()

Strip leading and trailing white-space from string

Remove white-space characters from the beginning and end of a string.

jQuery: $.trim()

Test if a certain value exists in an array

Search for a specified value within an array and return its index (or -1 if not found).

jQuery: $.inArray()