CSS

Background Properties
Property Description CSS
background Sets all the background properties in one declaration 1
background-attachment Sets whether a background image is fixed or scrolls with the 1
rest of the page
background-color Sets the background color of an element 1
background-image Sets the background image for an element 1
background-position Sets the starting position of a background image 1
background-repeat Sets how a background image will be repeated 1

Border and Outline Properties

Property Description CSS
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 2
border-bottom-style Sets the style of the bottom border 2
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 2
border-left-style Sets the style of the left border 2
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 2
border-right-style Sets the style of the right border 2
border-right-width Sets the width of the right border 1
border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 2
border-top-style Sets the style of the top border 2
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2

Dimension Properties
Property Description CSS
height Sets the height of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
width Sets the width of an element 1

Font Properties
Property Description CSS
font Sets all the font properties in one declaration 1
font-family Specifies the font family for text 1
font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
font-variant Specifies whether or not a text should be displayed in a 1
small-caps font
font-weight Specifies the weight of a font 1

Generated Content Properties

Property Description CSS
content Used with the :before and :after pseudo-elements, to insert 2
generated content
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
quotes Sets the type of quotation marks for embedded quotations 2

List Properties
Property Description CSS
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies if the list-item markers should appear inside or 1
outside the content flow
list-style-type Specifies the type of list-item marker 1

Margin Properties
Property Description CSS
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1

Padding Properties
Property Description CSS
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1

Positioning Properties
Property Description CSS
bottom Sets the bottom margin edge for a positioned box 2
clear Specifies which sides of an element where other floating 1
elements are not allowed
clip Clips an absolutely positioned element 2
cursor Specifies the type of cursor to be displayed 2
display Specifies the type of box an element should generate 1
float Specifies whether or not a box should float 1
left Sets the left margin edge for a positioned box 2
overflow Specifies what happens if content overflows an element's 2
box
position Specifies the type of positioning for an element 2
right Sets the right margin edge for a positioned box 2
top Sets the top margin edge for a positioned box 2
visibility Specifies whether or not an element is visible 2
z-index Sets the stack order of an element 2

Print Properties
Property Description CSS
orphans Sets the minimum number of lines that must be left at the 2
bottom of a page when a page break occurs inside an
element
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
widows Sets the minimum number of lines that must be left at the 2
top of a page when a page break occurs inside an element

Table Properties
Property Description CSS
border-collapse Specifies whether or not table borders should be collapsed 2
border-spacing Specifies the distance between the borders of adjacent cells 2
caption-side Specifies the placement of a table caption 2
empty-cells Specifies whether or not to display borders and background 2
on empty cells in a table
table-layout Sets the layout algorithm to be used for a table 2

Text Properties
Property Description CSS
color Sets the color of text 1
direction Specifies the text direction/writing direction 2
letter-spacing Increases or decreases the space between characters in a 1
text
line-height Sets the line height 1
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
unicode-bidi   2
vertical-align Sets the vertical alignment of an element 1
white-space Specifies how white-space inside an element is handled 1
word-spacing Increases or decreases the space between words in a text 1

CSS Pseudo-classes/elements
Property Description CSS
:active Adds a style to an element that is activated 1
:after Adds content after an element 2
:before Adds content before an element 2
:first-child Adds a style to an element that is the first child of another 2
element
:first-letter Adds a style to the first character of a text 1
:first-line Adds a style to the first line of a text 1
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link

Property Description CSS

background Sets all the background properties in one declaration 1
background- Sets whether a background image is fixed or scrolls with the 1
attachment rest of the page
background-color Sets the background color of an element 1
background-image Sets the background image for an element 1
background-position Sets the starting position of a background image 1
background-repeat Sets how a background image will be repeated 1
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 2
border-bottom-style Sets the style of the bottom border 2
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-collapse Specifies whether or not table borders should be collapsed 2
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 2
border-left-style Sets the style of the left border 2
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 2
border-right-style Sets the style of the right border 2
border-right-width Sets the width of the right border 1
border-spacing Specifies the distance between the borders of adjacent cells 2
border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 2
border-top-style Sets the style of the top border 2
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
bottom Sets the bottom margin edge for a positioned box 2
caption-side Specifies the placement of a table caption 2
clear Specifies which sides of an element where other floating 1
elements are not allowed
clip Clips an absolutely positioned element 2
color Sets the color of text 1
content Used with the :before and :after pseudo-elements, to insert 2
generated content
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
cursor Specifies the type of cursor to be displayed 2
direction Specifies the text direction/writing direction 2
display Specifies the type of box an element should generate 1
empty-cells Specifies whether or not to display borders and background 2
on empty cells in a table
float Specifies whether or not a box should float 1
font Sets all the font properties in one declaration 1
font-family Specifies the font family for text 1
font-size Specifies the font size of text 1
font-style Specifies the font style for text 1
font-variant Specifies whether or not a text should be displayed in a 1
 small-caps font
font-weight Specifies the weight of a font 1
height Sets the height of an element 1
left Sets the left margin edge for a positioned box 2
letter-spacing Increase or decrease the space between characters in a text 1
line-height Sets the line height 1
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies if the list-item markers should appear inside or 1
outside the content flow
list-style-type Specifies the type of list-item marker 1
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
orphans Sets the minimum number of lines that must be left at the 2
bottom of a page when a page break occurs inside an
element
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2
overflow Specifies what happens if content overflows an element's box 2
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
position Specifies the type of positioning for an element 2
quotes Sets the type of quotation marks for embedded quotations 2
right Sets the right margin edge for a positioned box 2
table-layout Sets the layout algorithm to be used for a table 2
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
top Sets the top margin edge for a positioned box 2
unicode-bidi   2
vertical-align Sets the vertical alignment of an element 1

JAVASCRIPT
Array Object
The Array object is used to store multiple values in a single variable.

For a tutorial about Arrays, read our JavaScript Array Object tutorial.

Array Object Properties

Property Description
constructor Returns the function that created the Array object's prototype
length Sets or returns the number of elements in an array
prototype Allows you to add properties and methods to an object

Array Object Methods

Method Description
concat() Joins two or more arrays, and returns a copy of the joined arrays
join() Joins all elements of an array into a string
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new
length
valueOf() Returns the primitive value of an array

Boolean Object
The Boolean object is used to convert a non-Boolean value to a Boolean value (true or
false).
Boolean Object Properties
Property Description
constructor Returns the function that created the Boolean object's prototype
prototype Allows you to add properties and methods to an object

Boolean Object Methods

Method Description
toString() Converts a Boolean value to a string, and returns the result
valueOf() Returns the primitive value of a Boolean object

Date Object
The Date object is used to work with dates and times.

Date objects are created with new Date().

There are four ways of instantiating a date:

var d = new Date();

var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds,
milliseconds);

For a tutorial about date and times, read our JavaScript Date Object tutorial.

Date Object Properties

Property Description
constructor Returns the function that created the Date object's prototype
prototype Allows you to add properties and methods to an object

Date Object Methods

Method Description
getDate() Returns the day of the month (from 1-31)
getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset() Returns the time difference between GMT and local time, in minutes
getUTCDate() Returns the day of the month, according to universal time (from 1-
31)
getUTCDay() Returns the day of the week, according to universal time (from 0-6)
getUTCFullYear() Returns the year, according to universal time (four digits)
getUTCHours() Returns the hour, according to universal time (from 0-23)
getUTCMilliseconds() Returns the milliseconds, according to universal time (from 0-999)
getUTCMinutes() Returns the minutes, according to universal time (from 0-59)
getUTCMonth() Returns the month, according to universal time (from 0-11)
getUTCSeconds() Returns the seconds, according to universal time (from 0-59)
getYear() Deprecated. Use the getFullYear() method instead
parse() Parses a date string and returns the number of milliseconds since
midnight of January 1, 1970
setDate() Sets the day of the month (from 1-31)
setFullYear() Sets the year (four digits)
setHours() Sets the hour (from 0-23)
setMilliseconds() Sets the milliseconds (from 0-999)
setMinutes() Set the minutes (from 0-59)
setMonth() Sets the month (from 0-11)
setSeconds() Sets the seconds (from 0-59)
setTime() Sets a date and time by adding or subtracting a specified number of
milliseconds to/from midnight January 1, 1970
setUTCDate() Sets the day of the month, according to universal time (from 1-31)
setUTCFullYear() Sets the year, according to universal time (four digits)
setUTCHours() Sets the hour, according to universal time (from 0-23)
setUTCMilliseconds() Sets the milliseconds, according to universal time (from 0-999)
setUTCMinutes() Set the minutes, according to universal time (from 0-59)
setUTCMonth() Sets the month, according to universal time (from 0-11)
setUTCSeconds() Set the seconds, according to universal time (from 0-59)
setYear() Deprecated. Use the setFullYear() method instead
toDateString() Converts the date portion of a Date object into a readable string
toGMTString() Deprecated. Use the toUTCString() method instead
toLocaleDateString() Returns the date portion of a Date object as a string, using locale
conventions
toLocaleTimeString() Returns the time portion of a Date object as a string, using locale
conventions
toLocaleString() Converts a Date object to a string, using locale conventions
toString() Converts a Date object to a string
toTimeString() Converts the time portion of a Date object to a string
toUTCString() Converts a Date object to a string, according to universal time
UTC() Returns the number of milliseconds in a date string since midnight
of January 1, 1970, according to universal time
valueOf() Returns the primitive value of a Date object

Math Object
The Math object allows you to perform mathematical tasks.

Math is not a constructor. All properties/methods of Math can be called by using Math as
an object, without creating it.

Syntax
var x = Math.PI; // Returns PI
var y = Math.sqrt(16); // Returns the square root of 16

For a tutorial about the Math object, read our JavaScript Math Object tutorial.

Math Object Properties

Property Description
E Returns Euler's number (approx. 2.718)
LN2 Returns the natural logarithm of 2 (approx. 0.693)
LN10 Returns the natural logarithm of 10 (approx. 2.302)
LOG2E Returns the base-2 logarithm of E (approx. 1.442)
LOG10E Returns the base-10 logarithm of E (approx. 0.434)
PI Returns PI (approx. 3.14159)
SQRT1_2 Returns the square root of 1/2 (approx. 0.707)
SQRT2 Returns the square root of 2 (approx. 1.414)

Math Object Methods

Method Description
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
asin(x) Returns the arcsine of x, in radians
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2
radians
atan2(y,x) Returns the arctangent of the quotient of its arguments
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x,y,z,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
pow(x,y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle

String Object
The String object is used to manipulate a stored piece of text.

String objects are created with new String().

Syntax
var txt = new String(string);

or more simply:

var txt = string;

For a tutorial about the String object, read our JavaScript String Object tutorial.

String Object Properties

Property Description
constructor Returns the function that created the String object's prototype
length Returns the length of a string
prototype Allows you to add properties and methods to an object

String Object Methods

Method Description
charAt() Returns the character at the specified index
charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a copy of the joined strings
fromCharCode() Converts Unicode values to characters
indexOf() Returns the position of the first found occurrence of a specified value in
a string
lastIndexOf() Returns the position of the last found occurrence of a specified value in a
string
match() Searches for a match between a regular expression and a string, and
returns the matches
replace() Searches for a match between a substring (or regular expression) and a
string, and replaces the matched substring with a new substring
search() Searches for a match between a regular expression and a string, and
returns the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
substr() Extracts the characters from a string, beginning at a specified start
position, and through the specified number of character
substring() Extracts the characters from a string, between two specified indices
toLowerCase() Converts a string to lowercase letters
toUpperCase() Converts a string to uppercase letters
valueOf() Returns the primitive value of a String object

String HTML Wrapper Methods

The HTML wrapper methods return the string wrapped inside the
appropriate HTML tag.

Method Description
anchor() Creates an anchor
big() Displays a string using a big font
blink() Displays a blinking string
bold() Displays a string in bold
fixed() Displays a string using a fixed-pitch font
fontcolor() Displays a string using a specified color
fontsize() Displays a string using a specified size
italics() Displays a string in italic
link() Displays a string as a hyperlink
small() Displays a string using a small font
strike() Displays a string with a strikethrough
sub() Displays a string as subscript text
sup() Displays a string as superscript text

JavaScript Global Properties

Property Description
Infinity A numeric value that represents positive/negative infinity
NaN "Not-a-Number" value
undefined Indicates that a variable has not been assigned a value

JavaScript Global Functions

Function Description
decodeURI() Decodes a URI
decodeURIComponent() Decodes a URI component
encodeURI() Encodes a URI
encodeURIComponent() Encodes a URI component
escape() Encodes a string
eval() Evaluates a string and executes it as if it was script code
isFinite() Determines whether a value is a finite, legal number
isNaN() Determines whether a value is an illegal number
Number() Converts an object's value to a number
parseFloat() Parses a string and returns a floating point number
parseInt() Parses a string and returns an integer
String() Converts an object's value to a string
unescape() Decodes an encoded string

Window Object Properties

Property Description
closed Returns a Boolean value indicating whether a window has been closed or
not
defaultStatus Sets or returns the default text in the statusbar of a window
document Returns the Document object for the window (See Document object)
frames Returns an array of all the frames (including iframes) in the current
window
history Returns the History object for the window (See History object)
innerHeight Sets or returns the the inner height of a window's content area
innerWidth Sets or returns the the inner width of a window's content area
length Returns the number of frames (including iframes) in a window
location Returns the Location object for the window (See Location object)
name Sets or returns the name of a window
navigator Returns the Navigator object for the window (See Navigator object)
opener Returns a reference to the window that created the window
outerHeight Sets or returns the outer height of a window, including
toolbars/scrollbars
outerWidth Sets or returns the outer width of a window, including toolbars/scrollbars
pageXOffset Returns the pixels the current document has been scrolled (horizontally)
from the upper left corner of the window
pageYOffset Returns the pixels the current document has been scrolled (vertically)
from the upper left corner of the window
parent Returns the parent window of the current window
screen Returns the Screen object for the window (See Screen object)
screenLeft Returns the x coordinate of the window relative to the screen
screenTop Returns the y coordinate of the window relative to the screen
screenX Returns the x coordinate of the window relative to the screen
screenY Returns the y coordinate of the window relative to the screen
self Returns the current window
status Sets the text in the statusbar of a window
top Returns the topmost browser window
Window Object Methods
Method Description
alert() Displays an alert box with a message and an OK button
blur() Removes focus from the current window
clearInterval() Clears a timer set with setInterval()
clearTimeout() Clears a timer set with setTimeout()
close() Closes the current window
confirm() Displays a dialog box with a message and an OK and a Cancel button
createPopup() Creates a pop-up window
focus() Sets focus to the current window
moveBy() Moves a window relative to its current position
moveTo() Moves a window to the specified position
open() Opens a new browser window
print() Prints the content of the current window
prompt() Displays a dialog box that prompts the visitor for input
resizeBy() Resizes the window by the specified pixels
resizeTo() Resizes the window to the specified width and height
scroll()  
scrollBy() Scrolls the content by the specified number of pixels
scrollTo() Scrolls the content to the specified coordinates
setInterval() Calls a function or evaluates an expression at specified intervals (in
milliseconds)
setTimeout() Calls a function or evaluates an expression after a specified number of
milliseconds

Navigator Object Properties

Property Description
appCodeName Returns the code name of the browser
appName Returns the name of the browser
appVersion Returns the version information of the browser
cookieEnabled Determines whether cookies are enabled in the browser
platform Returns for which platform the browser is compiled
userAgent Returns the user-agent header sent by the browser to the server

Navigator Object Methods

Method Description
javaEnabled() Specifies whether or not the browser has Java enabled
taintEnabled() Specifies whether or not the browser has data tainting enabled
History Object Properties
Property Description
length Returns the number of URLs in the history list

History Object Methods

Method Description
back() Loads the previous URL in the history list
forward() Loads the next URL in the history list
go() Loads a specific URL from the history list

Document Object Collections

W3C: W3C Standard.

Collection Description W3C

anchors[] Returns an array of all the anchors in the document Yes
forms[] Returns an array of all the forms in the document Yes
images[] Returns an array of all the images in the document Yes
links[] Returns an array of all the links in the document Yes

Document Object Properties

Property Description W3C
cookie Returns all name/value pairs of cookies in the document Yes
documentMode Returns the mode used by the browser to render the No
document
domain Returns the domain name of the server that loaded the Yes
document
lastModified Returns the date and time the document was last modified No
readyState Returns the (loading) status of the document No
referrer Returns the URL of the document that loaded the current Yes
document
title Sets or returns the title of the document Yes
URL Returns the full URL of the document Yes

Document Object Methods

Method Description W3C
close() Closes the output stream previously opened with Yes
document.open()
getElementById() Accesses the first element with the specified id Yes
getElementsByName() Accesses all elements with a specified name Yes
getElementsByTagName( Accesses all elements with a specified tagname Yes
)
open() Opens an output stream to collect the output from Yes
document.write() or document.writeln()
write() Writes HTML expressions or JavaScript code to a Yes
document
writeln() Same as write(), but adds a newline character after each Yes
statement

Event Object
The event object gives you information about an event that has occurred.

The Event object represents the state of an event, such as the element in which the event
occurred, the state of the keyboard keys, the location of the mouse, and the state of the
mouse buttons.

Events are normally used in combination with functions, and the function will not be
executed before the event occurs!

Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like
starting a JavaScript when a user clicks on an HTML element. Below is a list of the
attributes that can be inserted into HTML tags to define event actions.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C Standard.

Attribute The event occurs when... IE F O W3C

onblur An element loses focus 3 1 9 Yes
onchange The content of a field changes 3 1 9 Yes
onclick Mouse clicks an object 3 1 9 Yes
ondblclick Mouse double-clicks an object 4 1 9 Yes
onerror An error occurs when loading a document or an 4 1 9 Yes
image
onfocus An element gets focus 3 1 9 Yes
onkeydown A keyboard key is pressed 3 1 No Yes
onkeypress A keyboard key is pressed or held down 3 1 9 Yes
onkeyup A keyboard key is released 3 1 9 Yes
onmousedown A mouse button is pressed 4 1 9 Yes
onmousemove The mouse is moved 3 1 9 Yes
onmouseout The mouse is moved off an element 4 1 9 Yes
onmouseover The mouse is moved over an element 3 1 9 Yes
onmouseup A mouse button is released 4 1 9 Yes
onresize A window or frame is resized 4 1 9 Yes
onselect Text is selected 3 1 9 Yes
onunload The user exits the page 3 1 9 Yes

Mouse / Keyboard Attributes

Property Description IE F O W3C
altKey Returns whether or not the "ALT" key was 6 1 9 Yes
pressed when an event was triggered
button Returns which mouse button was clicked when an 6 1 9 Yes
event was triggered
clientX Returns the horizontal coordinate of the mouse 6 1 9 Yes
pointer when an event was triggered
clientY Returns the vertical coordinate of the mouse 6 1 9 Yes
pointer when an event was triggered
ctrlKey Returns whether or not the "CTRL" key was 6 1 9 Yes
pressed when an event was triggered
metaKey Returns whether or not the "meta" key was 6 1 9 Yes
pressed when an event was triggered
relatedTarget Returns the element related to the element that No 1 9 Yes
triggered the event
screenX Returns the horizontal coordinate of the mouse 6 1 9 Yes
pointer when an event was triggered
screenY Returns the vertical coordinate of the mouse 6 1 9 Yes
pointer when an event was triggered
shiftKey Returns whether or not the "SHIFT" key was 6 1 9 Yes
pressed when an event was triggered

Body Object Properties

W3C: W3C Standard.

Property Description W3C

aLink Sets or returns the value of the alink attribute of the body Yes
element
background Sets or returns the value of the background attribute of the body Yes
element
bgColor Sets or returns the value of the bgcolor attribute of the body Yes
element
link Sets or returns the value of the link attribute of the body element Yes
text Sets or returns the value of the text attribute of the body element Yes
vLink Sets or returns the value of the vlink attribute of the body Yes
element

Body Object Events

Event Description W3C
onload Script to be run immediately after a page is loaded

Button Object Properties

W3C: W3C Standard.

Property Description W3C

form Returns a reference to the form that contains a button Yes
name Sets or returns the value of the name attribute of a button Yes
type Sets or returns the type of a button Yes
value Sets or returns the value of the value attribute of a button

jQuery HTML Methods

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

Toggles between adding/removing one or more classes (for CSS) from

toggleClass()
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

Wraps specified HTML element(s) around the content of each selected

wrapInner()
element

jQuery Effect Methods

The following table lists all the methods used to create animation effects.

Method Description

Performs a custom animation (of a set of CSS properties) for selected

animate()
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

Toggles between hide() and show(), or custom functions, for selected

toggle()
elements

jQuery Event Methods

Event methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click() - triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()}) - binds a function to the click event.
The following table lists all the methods used to handle events.

Method Description

bind(event) Add one or more event handlers to matching elements

Triggers, or binds a function to the blur event of

blur()
selected elements

Triggers, or binds a function to the change event of

change()
selected elements

Triggers, or binds a function to the click event of

click()
selected elements

Triggers, or binds a function to the dblclick event of

dblclick()
selected elements

Add an event handler to matching elements, now or in

delegate(selector, event)
the future

die() Remove all event handlers added with the live()

 function

Triggers, or binds a function to the error event of

error()
selected elements

The current DOM element within the event bubbling

event.currentTarget
phase

Contains the optional data passed to jQuery.fn.bind

event.data
when the current executing handler was bound

Returns whether event.preventDefault() was called for

event.isDefaultPrevented()
the event object

Returns whether event.stopImmediatePropagation()

event.isImmediatePropagationStopped()
was called for the event object

Returns whether event.stopPropagation() was called

event.isPropagationStopped()
for the event object

The mouse position relative to the left edge of the

event.pageX
document

The mouse position relative to the top edge of the

event.pageY
document

event.preventDefault() Prevents the default action of the event

event.relatedTarget The other DOM element involved in the event, if any

This attribute contains the last value returned by an

event.result event handler that was triggered by this event, unless
the value was undefined

event.stopImmediatePropagation() Prevents other event handlers from being called

Prevents the event from bubbling up the DOM tree,

event.stopPropagation() preventing any parent handlers from being notified of
the event

event.target The DOM element that initiated the event

This attribute returns the number of milliseconds since

event.timeStamp
January 1, 1970, when the event is triggered

event.type Describes the nature of the event

Which key or button was pressed for a key or button

event.which
event

Triggers, or binds a function to the focus event of

focus()
selected elements

focusin() Binds a function to the focusin event of selected

 elements

Binds a function to the focusout event of selected

focusout()
elements

Binds one or two functions to the hover event of

hover()
selected elements

Triggers, or binds a function to the keydown event of

keydown()
selected elements

Triggers, or binds a function to the keypress event of

keypress()
selected elements

Triggers, or binds a function to the keyup event of

keyup()
selected elements

Add an event handler to selected elements, now or in

live(event)
the future

Triggers, or binds a function to the load event of

load()
selected elements

Triggers, or binds a function to the mouse down event

mousedown()
of selected elements

Triggers, or binds a function to the mouse enter event

mouseenter()
of selected elements

Triggers, or binds a function to the mouse leave event

mouseleave()
of selected elements

Triggers, or binds a function to the mouse move event

mousemove()
of selected elements

Triggers, or binds a function to the mouse out event of

mouseout()
selected elements

Triggers, or binds a function to the mouse over event

mouseover()
of selected elements

Triggers, or binds a function to the mouse up event of

mouseup()
selected elements

Add an event handler to selected elements. This

one(event)
handler can only be triggered once

Binds a function to the ready event of a document

ready()
(when an HTML document is ready to use)

Triggers, or binds a function to the resize event of

resize()
selected elements

scroll() Triggers, or binds a function to the scroll event of

 selected elements

Triggers, or binds a function to the select event of

select()
selected elements

Triggers, or binds a function to the submit event of

submit()
selected elements

Binds one or two functions to the toggle event of

toggle()
selected elements

trigger() Triggers all events bound to the selected elements

Triggers all functions bound to a specified event for

triggerHandler()
the selected elements

Remove an added event handler from selected

unbind(event)
elements

Remove an event handler to selected elements, now or

undelegate(event)
in the future

Triggers, or binds a function to the unload event of

unload()
selected elements

jQuery Selectors
« Previous Next Chapter »

jQuery Selectors
Use our excellent jQuery Selector Tester to experiment with the different selectors.

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 All animated elements

$
:contains(text) (":contains('W3School All elements which contains the text
s')")

: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=valu $ All elements with a href attribute value equal to

e] ("[href='default.htm']") "default.htm"

[attribute! $("[href! All elements with a href attribute value not equal to
=value] ='default.htm']") "default.htm"

[attribute$=val All elements with a href attribute value ending with

$("[href$='.jpg']")
ue] ".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

jQuery CSS Methods

jQuery CSS Methods

The following table lists all the methods used to manipulate CSS properties.

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

Returns the position (relative to the parent element) of the first selected
position()
element

removeClass() Removes one or more classes from selected elements

Sets or returns the horizontal position of the scrollbar for the selected
scrollLeft()
elements

scrollTop() Sets or returns the vertical position of the scrollbar for the selected elements

Toggles between adding/removing one or more classes from selected

toggleClass()
elements

width() Sets or returns the width of selected elements

jQuery AJAX Methods

jQuery AJAX Methods

AJAX is the art of exchanging data with a server, and update parts of a web page -
without reloading the whole page.
The following table lists all the jQuery AJAX methods:

Method Description

jQuery.ajax() Performs an asynchronous HTTP request

ajaxComplete() Registers a handler to be called when the AJAX request completes (event)

Registers a handler to be called when the AJAX request completes with an

ajaxError()
error (event)

ajaxSend() Shows a message before the AJAX request is sent

jQuery.ajaxSetup() Sets the default values for future AJAX requests

ajaxStart() Registers a handler to be called when the first AJAX request begins (event)

Registers a handler to be called when all AJAX requests have completed

ajaxStop()
(event)
ajaxSuccess() Shows a message when an AJAX request completes successfully

jQuery.get() Loads data from a server using a HTTP GET request

jQuery.getJSON() Loads JSON-encoded data from a server using a HTTP GET request

Loads (and executes) a JavaScript file from the a server using a HTTP GET
jQuery.getScript()
request

Loads data from a server and puts the returned HTML into the matched
load()
element

Creates a serialized representation of an array or object, suitable for use in a

jQuery.param()
URL query string or AJAX request

jQuery.post() Loads data from a server using a 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

jQuery Misc Methods

Method Description

data() Stores arbitrary data associated with the matched elements

each() Iterate over a jQuery object, executing a function for each matched element

get() Retrieve the DOM elements matched by the jQuery object

index() Search for a given element from among the matched elements

jQuery.noConflict(
Relinquish jQuery's control of the $ variable
)

Creates a serialized representation of an array or object, suitable for use in a

jQuery.param()
URL query string or Ajax request

removeData() Removes a previously-stored piece of data

size() Return the number of DOM elements matched by the jQuery object

toArray() Retrieve all the DOM elements contained in the jQuery set, as an array