You selected element(s) with $(selector) - what's next?
You can now use the following functions, for example: $('div').click( function() { /* Do something when this DIV is clicked */ });
Note: Some functions take different number of arguments. But for the most part, the first parameter is the function you want to be called on that action.
Please grab & share this link with other jQuery developers
| Method to call on selected element(s) | Description in plain English |
| .bind() | Attach a function to an arbitrary event. |
| .blur() | Attach "focus left a selected element" event. |
| .change() | Value of the selected input element has changed. |
| .click() | The selected element(s) has been clicked. |
| .dblclick() | The selected element(s) has been double clicked. |
| .delegate() | Old function for .on(), use. on() from now on. |
| .die() | Remove all events that were attached with .live() |
| .error() | Bind a handler to the "error" Javascript event |
| .focus() | The selected element(s) received cursor focus |
| .focusin() | Detect focus of an input element nested inside arbitrary parent element (the selection). This function expects the parent as the selection. |
| .focusout() | Detect loss of cursor focus of an input element nested inside a parent (the selection) |
| .hover() | Only during the time mouse pointer is inside an element. Fires on mouseenter and mouseleave. Expects two handlers, not just one like most other functions. |
| .keydown() | When a key is pressed on the keyboard |
| .keypress() | Behavior may differ across browsers. |
| .keyup() | When a key is released on the keyboard |
| .live() | Attach an event to elements that will match the selection, now and in the future, event if new elements that match that criteria appear on the page, for example, when they are dynamically added into the page using the html() function, but did not physically exist prior to the call to live(). Think of this as a "live" version of the bind() function. |
| .load() | Fire a function when the selection and all of its sub-elements have been completely loaded. You can use this function to determine whether an image has been loaded, by attaching it to the element of type IMG. |
| .mousedown() | Mouse button has been pressed on selection. |
| .mouseenter() | Mouse pointer enters the element. |
| .mouseleave() | Mouse pointer leaves the element. |
| .mousemove() | Mouse moves on the surface of selected element. |
| .mouseout() | Mouse leaves the selected element. |
| .mouseover() | Mouse pointer moves into the element or any of its children. This is different from mouseenter(), which only fires when the mouse enters the element it is bound to, but will ignore its children. |
| .mouseup() | Mouse pointer is over an element at any time while the mouse button is up. |
| .off() | .off() removes event handlers from selection. |
| .on() | .on() is an advanced event binder |
| .one() | Mouse is clicked on an element, once that event occurs, the event handler itself is automatically detached using .unbind(). The second click on the selected element will not trigger the attached function again. |
| .ready() | Executes when DOM is ready, but before onload is fired. |
| .resize() | When the size of the window changes. |
| .scroll() | When the user scrolls to a different place in the element whose CSS overflow style is set to "scroll" as in "overflow: scroll;". Can be used to track scrolling of an iframe. Also can be used to track entire window scrolling in the browser by passing the main window object "window" (but without the quotes) as the selector. |
| .select() | When a text selection is made inside a text input element. |
| .submit() | When a user attempts to submit a form. |
| .toggle() | Cycle through the event handler function(s) on each click. When two functions are provided as parameters, each click on the selected element will execute first function on click one, and second function on click two, then the process repeats again; third click executes function one, etc. If more than two functions are provided (using the comma operator), the toggle event will trigger each function one after another, every time the element is clicked. |
| .trigger() | Description: http://api.jquery.com/trigger/ |
| .triggerHandler() | Description: http://api.jquery.com/triggerHandler/ |
| .unbind() | Stop watching for an event on selection. |
| .undelegate() | Old way of doing off(); Use off() from now on. |
| .unload() | User navigates away from the page. This could mean more than one thing: User clicks on an outbound link to go to another page, typed a new URL in the address bar, clicked on Forward or Back button in the browser, closed the browser or reloaded the page. |