jQuery Basic Tutorial

jQuery Effects

A very important part of jQuery is the ability to manipulate DOM elements.

jQuery provides effective methods for operating on HTML elements, attributes, and CSS.

These methods check and operate on the class attributes assigned to the element:

Method	Description
addClass()	将一个或多个类名称添加到所选元素
Add one or more class names to the selected element	hasClass()
Check if any selected elements have the specified class name	removeClass()
Remove one or more classes from the selected element	toggleClass()/In addition to

Copying in

Method	Description
This method allows us to copy elements:	clone()

Surrounding

Method	Description
These methods allow us to insert new content around existing content:	wrap()
Wrap each selected element with an HTML element	wrapAll()
Wrap all selected elements with an HTML element	wrapInner()

Internal

Method	Description
These methods allow us to insert new content into the existing element:	Insert content at the end of the selected element
appendTo()	Insert an HTML element at the end of the selected element
html()	Set or get the HTML content of the selected element
prepend()	Insert content at the beginning of the selected element
prependTo()	Insert an HTML element at the beginning of the selected element
text()	Set or get the text content of the selected element

These methods allow us to insert new content outside the existing element:

Method	Description
after()	Insert content after the selected element
before()	Insert content before the selected element
insertAfter()	Insert an HTML element after the selected element
insertBefore()	Insert an HTML element before the selected element

These methods allow us to remove elements from the DOM:

Method	Description
detach()	Remove the selected element (retaining data and events)
empty()	Remove all child nodes from the selected element (including text nodes)
remove()	Remove the selected element (including data and events)
unwrap()	Remove the parent element of the selected element

These methods are used to remove content from the DOM and replace it with new content:

Method	Description
replaceAll()	Replace the selected element with a new HTML element
replaceWith()	Replace the selected element with new content

These methods get and set the DOM attributes of the element:

Method	Description
attr()	Set or return the attribute of the selected element/Value
prop()	Set or return the attribute of the selected element/Value
removeAttr()	Remove one or more attributes from the selected element
removeProp()	Remove attributes set by the prop() method
val()	Set or return the value attribute of the selected element (for form elements)

These methods get and set CSS-related properties of elements:

Method	Description
css()	Set or return one or more style properties for the selected element
height()	Set or return the height of the selected element
innerHeight()	Set or return the height of the element (including padding, but not including border)
innerWidth()	Set or return the width of the element (including padding, but not including border)
offset()	Set or return the offset coordinates of the selected element (relative to the document)
offsetParent()	Return the first positioned parent element
outerHeight()	Set or return the height of the element (including padding, border, and optional margin)
outerWidth()	Set or return the width of the element (including padding, border, and optional margin)
position()	Return the position of the element relative to the offset parent
scrollLeft()	Set or return the horizontal scroll bar position of the selected element
scrollTop()	Set or return the vertical scroll bar position of the selected element
width()	Set or return the width of the selected element