Selectors
Events
Effect
HTML
CSS
AJAX
MISC
Selector | Example | Selects |
---|---|---|
* | $("*") | All elements |
#id | $("#lastname") | The element with id=lastname |
.class | $(".intro") | All elements with class="intro" |
element | $("p") | All p elements |
.class.class | $(".intro.demo") | All elements with the classes "intro" and "demo" |
:first | $("p:first") | The first p element |
:last | $("p:last") | The last p element |
:even | $("tr:even") | All even tr elements |
:odd | $("tr:odd") | All odd tr elements |
:eq(index) | $("ul li:eq(3)") | The fourth element in a list (index starts at 0) |
:gt(no) | $("ul li:gt(3)") | List elements with an index greater than 3 |
:lt(no) | $("ul li:lt(3)") | List elements with an index less than 3 |
:not(selector) | $("input:not(:empty)") | All input elements that are not empty |
:header | $(":header") | All header elements h1, h2 ... |
:animated | $(":animated") | All animated elements |
:contains(text) | $(":contains('W3Schools')") | All elements which contains the text |
:empty | $(":empty") | All elements with no child (elements) nodes |
:hidden | $("p:hidden") | All hidden p elements |
:visible | $("table:visible") | All visible tables |
s1,s2,s3 | $("th,td,.intro") | All elements with matching selectors |
[attribute] | $("[href]") | All elements with a href attribute |
[attribute=value] | $("[href='default.htm']") | All elements with a href attribute value equal to "default.htm" |
[attribute!=value] | $("[href!='default.htm']") | All elements with a href attribute value not equal to "default.htm" |
[attribute$=value] | $("[href$='.jpg']") | All elements with a href attribute value ending with ".jpg" |
:input | $(":input") | All input elements |
:text | $(":text") | All input elements with type="text" |
:password | $(":password") | All input elements with type="password" |
:radio | $(":radio") | All input elements with type="radio" |
:checkbox | $(":checkbox") | All input elements with type="checkbox" |
:submit | $(":submit") | All input elements with type="submit" |
:reset | $(":reset") | All input elements with type="reset" |
:button | $(":button") | All input elements with type="button" |
:image | $(":image") | All input elements with type="image" |
:file | $(":file") | All input elements with type="file" |
:enabled | $(":enabled") | All enabled input elements |
:disabled | $(":disabled") | All disabled input elements |
:selected | $(":selected") | All selected input elements |
:checked | $(":checked") | All checked input elements |
Events
Method | Description |
---|---|
bind() | Add one or more event handlers to matching elements |
blur() | Triggers, or binds a function to the blur event of selected elements |
change() | Triggers, or binds a function to the change event of selected elements |
click() | Triggers, or binds a function to the click event of selected elements |
dblclick() | Triggers, or binds a function to the dblclick event of selected elements |
delegate() | Add one or more event handlers to current, or future, specified child elements of the matching elements |
die() | Remove all event handlers added with the live() function |
error() | Triggers, or binds a function to the error event of selected elements |
event.currentTarget | The current DOM element within the event bubbling phase |
event.data | Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound |
event.isDefaultPrevented() | Returns whether event.preventDefault() was called for the event object |
event.isImmediatePropagationStopped() | Returns whether event.stopImmediatePropagation() was called for the event object |
event.isPropagationStopped() | Returns whether event.stopPropagation() was called for the event object |
event.pageX | The mouse position relative to the left edge of the document |
event.pageY | The mouse position relative to the top edge of the document |
event.preventDefault() | Prevents the default action of the event |
event.relatedTarget | The other DOM element involved in the event, if any |
event.result | This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined |
event.stopImmediatePropagation() | Prevents other event handlers from being called |
event.stopPropagation() | Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event |
event.target | The DOM element that initiated the event |
event.timeStamp | This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered |
event.type | Describes the nature of the event |
event.which | Which key or button was pressed for a key or button event |
focus() | Triggers, or binds a function to the focus event of selected elements |
focusin() | Binds a function to the focusin event of selected elements |
focusout() | Binds a function to the focusout event of selected elements |
hover() | Binds one or two functions to the hover event of selected elements |
keydown() | Triggers, or binds a function to the keydown event of selected elements |
keypress() | Triggers, or binds a function to the keypress event of selected elements |
keyup() | Triggers, or binds a function to the keyup event of selected elements |
live() | Add one or more event handlers to current, or future, matching elements |
load() | Triggers, or binds a function to the load event of selected elements |
mousedown() | Triggers, or binds a function to the mouse down event of selected elements |
mouseenter() | Triggers, or binds a function to the mouse enter event of selected elements |
mouseleave() | Triggers, or binds a function to the mouse leave event of selected elements |
mousemove() | Triggers, or binds a function to the mouse move event of selected elements |
mouseout() | Triggers, or binds a function to the mouse out event of selected elements |
mouseover() | Triggers, or binds a function to the mouse over event of selected elements |
mouseup() | Triggers, or binds a function to the mouse up event of selected elements |
one() | Add one or more event handlers to matching elements. This handler can only be triggered once per element |
ready() | Binds a function to the ready event of a document (when an HTML document is ready to use) |
resize() | Triggers, or binds a function to the resize event of selected elements |
scroll() | Triggers, or binds a function to the scroll event of selected elements |
select() | Triggers, or binds a function to the select event of selected elements |
submit() | Triggers, or binds a function to the submit event of selected elements |
toggle() | Binds two or more functions to the toggle between for the click event for selected elements |
trigger() | Triggers all events bound to the selected elements |
triggerHandler() | Triggers all functions bound to a specified event for the selected elements |
unbind() | Remove an added event handler from selected elements |
undelegate() | Remove an event handler to selected elements, now or in the future |
unload() | Triggers, or binds a function to the unload event of selected elements |
Effect
Method | Description |
---|---|
animate() | Performs a custom animation (of a set of CSS properties) for selected elements |
clearQueue() | Removes all queued functions for the selected element |
delay() | Sets a delay for all queued functions for the selected element |
dequeue() | Runs the next queued functions for the selected element |
fadeIn() | Gradually changes the opacity, for selected elements, from hidden to visible |
fadeOut() | Gradually changes the opacity, for selected elements, from visible to hidden |
fadeTo() | Gradually changes the opacity, for selected elements, to a specified opacity |
hide() | Hides selected elements |
queue() | Shows the queued functions for the selected element |
show() | Shows hidden selected elements |
slideDown() | Gradually changes the height, for selected elements, from hidden to visible |
slideToggle() | Toggles between slideUp() and slideDown() for selected elements |
slideUp() | Gradually changes the height, for selected elements, from visible to hidden |
stop() | Stops a running animation on selected elements |
toggle() | Toggles between hide() and show(), or custom functions, for selected elements |
HTML
Method | Description |
---|---|
addClass() | Adds one or more classes (for CSS) to selected elements |
after() | Inserts content after selected elements |
append() | Inserts content at the end of (but still inside) selected elements |
appendTo() | Inserts content at the end of (but still inside) selected elements |
attr() | Sets or returns an attribute and value of selected elements |
before() | Inserts content before selected elements |
clone() | Makes a copy of selected elements |
detach() | Removes (but keeps a copy of) selected elements |
empty() | Removes all child elements and content from selected elements |
hasClass() | Checks if any of the selected elements have a specified class (for CSS) |
html() | Sets or returns the content of selected elements |
insertAfter() | Inserts HTML markup or elements after selected elements |
insertBefore() | Inserts HTML markup or elements before selected elements |
prepend() | Inserts content at the beginning of (but still inside) selected elements |
prependTo() | Inserts content at the beginning of (but still inside) selected elements |
remove() | Removes selected elements |
removeAttr() | Removes an attribute from selected elements |
removeClass() | Removes one or more classes (for CSS) from selected elements |
replaceAll() | Replaces selected elements with new content |
replaceWith() | Replaces selected elements with new content |
text() | Sets or returns the text content of selected elements |
toggleClass() | Toggles between adding/removing one or more classes (for CSS) from selected elements |
unwrap() | Removes the parent element of the selected elements |
val() | Sets or returns the value attribute of the selected elements (form elements) |
wrap() | Wraps specified HTML element(s) around each selected element |
wrapAll() | Wraps specified HTML element(s) around all selected elements |
wrapInner() | Wraps specified HTML element(s) around the content of each selected element |
CSS
Method | Description |
---|---|
addClass() | Adds one or more classes to selected elements |
css() | Sets or returns one or more style properties for selected elements |
hasClass() | Checks if any of the selected elements have a specified class |
height() | Sets or returns the height of selected elements |
offset() | Sets or returns the position (relative to the document) for selected elements |
offsetParent() | Returns the first parent element that is positioned |
position() | Returns the position (relative to the parent element) of the first selected element |
removeClass() | Removes one or more classes from selected elements |
scrollLeft() | Sets or returns the horizontal position of the scrollbar for the selected elements |
scrollTop() | Sets or returns the vertical position of the scrollbar for the selected elements |
toggleClass() | Toggles between adding/removing one or more classes from selected elements |
width() | Sets or returns the width of selected elements |
AJAX
Method | Description |
---|---|
$.ajax() | Performs an AJAX request |
ajaxComplete() | Specifies a function to run when the AJAX request completes |
ajaxError() | Specifies a function to run when the AJAX request completes with an error |
ajaxSend() | Specifies a function to run before the AJAX request is sent |
$.ajaxSetup() | Sets the default values for future AJAX requests |
ajaxStart() | Specifies a function to run when the first AJAX request begins |
ajaxStop() | Specifies a function to run when all AJAX requests have completed |
ajaxSuccess() | Specifies a function to run an AJAX request completes successfully |
$.get() | Loads data from a server using an AJAX HTTP GET request |
$.getJSON() | Loads JSON-encoded data from a server using a HTTP GET request |
$.getScript() | Loads (and executes) a JavaScript from the a server using an AJAX HTTP GET request |
load() | Loads data from a server and puts the returned HTML into the selected element |
$.param() | Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) |
$.post() | Loads data from a server using an AJAX HTTP POST request |
serialize() | Encodes a set of form elements as a string for submission |
serializeArray() | Encodes a set of form elements as an array of names and values |
MISC
Method | Description |
---|---|
data() | Attaches data to, or gets data from, selected elements |
each() | Run a function for each element matched by the jQuery selector |
get() | Get the DOM elements matched by the selector |
index() | Search for a given element from among the matched elements |
$.noConflict() | Release jQuery's control of the $ variable |
$.param() | Creates a serialized representation of an array or object (can be used as URL query string for AJAX requests) |
removeData() | Removes a previously-stored piece of data |
size() | Return the number of DOM elements matched by the jQuery selector |
toArray() | Retrieve all the DOM elements contained in the jQuery set, as an array |