jQuery - DOM Manipulation

This article is summarized from jQuery DOM Manipulation and related articles from w3school. jQuery is easy to access and manipulate HTML DOM elements and attributes for dynamically rendering pages and interacting with users.

Set/Get Content

• text("string") / text() - Sets/gets the text content of selected elements.
  $("#homenav").click( function(){ alert($("#homenav").text());} );
• html("string") / html() - Sets/gets the content of selected elements (including outter/inner HTML tags).
  $("#homenav").click( function(){ alert($("#homenav").html());} );
• val("string") / val() - Sets/gets the value of form fields. For example, $("#search").val() returns "input keywords" or the string modified by user in the input area.
  <input type="text" id="search" value="input keywords">

Note: the Set("string") can be replaced with callback function(i, origText) that returns a string as "string" parameter of the set function. The callback function has two parameters: the index (i) of the current element in the list of elements selected (e.g. $("a") will select all links within the page) and the original value (origText). No loop is needed, all selected elements will be processed.

Get Attributes

• attr() - Sets/gets the attribute value of some element.
  $("button").click(function(){ alert($("a").attr("href")); });
  $("#w3s").attr("href","http://www.w3schools.com/jquery");

Add New HTML Content

NOTE 1: append()/prepend() add content within the tag. E.g. <ol>prepend() is here<li>...</li>append() is here</ol>.
NOTE 2: after()/before() add content outside the tag. E.g. before() is here<ol><li>...</li></ol>after() is here.

• append() - Add content at the end of the selected elements (within the selected tag).
• prepend() - Add content at the beginning of the selected elements (within the selected tag)
• after() - Add content after the selected elements (follow the selected end tag)
• before() - Add content before the selected elements (before the selected begin tag)

jQuery Manipulating CSS

• addClass() - Adds one or more CSS classes to the selected elements ==> change the rendering result.
• removeClass() - Removes one or more classes from the selected elements.
• toggleClass() - Toggles between adding/removing classes from the selected elements.
• css("property", "value") / css("property") - Set/get the style attribute. 
• Set multiple css properties at once: css({"propertyname":"value", "propertyname":"value", ...});

NOTE: If the selector matches several elements, only the first value is returned for the get method. However, all elements will be updated while using set method.

jQuery HTML / CSS Methods
The table of jQuery DOM Manipulation methods. I add the last column "Usage", in which the usage to real case studies will be written in the future.

Method	Description	Usage
addClass()	Adds one or more class names to selected elements	Run-time add CSS class
after()	Inserts content after selected elements
append()	Inserts content at the end of selected elements
appendTo()	Inserts HTML elements at the end of selected elements
attr()	Sets or returns attributes/values of selected elements
before()	Inserts content before selected elements
clone()	Makes a copy of selected elements
css()	Sets or returns one or more style properties for selected elements
detach()	Removes selected elements (keeps data and events)
empty()	Removes all child nodes and content from selected elements
hasClass()	Checks if any of the selected elements have a specified class name
height()	Sets or returns the height of selected elements	Run-time block/content H measure
html()	Sets or returns the content of selected elements
innerHeight()	Returns the height of an element (includes padding, but not border)
innerWidth()	Returns the width of an element (includes padding, but not border)
insertAfter()	Inserts HTML elements after selected elements
insertBefore()	Inserts HTML elements before selected elements
offset()	Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent()	Returns the first positioned parent element
outerHeight()	Returns the height of an element (includes padding and border)
outerWidth()	Returns the width of an element (includes padding and border)
position()	Returns the position (relative to the parent element) of an element
prepend()	Inserts content at the beginning of selected elements
prependTo()	Inserts HTML elements at the beginning of selected elements
prop()	Sets or returns properties/values of selected elements
remove()	Removes the selected elements (including data and events)
removeAttr()	Removes one or more attributes from selected elements
removeClass()	Removes one or more classes from selected elements	Run-time remove CSS class
removeProp()	Removes a property set by the prop() method
replaceAll()	Replaces selected elements with new HTML elements
replaceWith()	Replaces selected elements with new content
scrollLeft()	Sets or returns the horizontal scrollbar position of selected elements
scrollTop()	Sets or returns the vertical scrollbar position of selected elements
text()	Sets or returns the text content of selected elements
toggleClass()	Toggles between adding/removing one or more classes from selected elements	On/Off effects
unwrap()	Removes the parent element of the selected elements
val()	Sets or returns the value attribute of the selected elements (for form elements)
width()	Sets or returns the width of selected elements	Run-time block/content W measure
wrap()	Wraps HTML element(s) around each selected element
wrapAll()	Wraps HTML element(s) around all selected elements
wrapInner()	Wraps HTML element(s) around the content of each selected element

jQuery Dimension Methods

jQuery methods for working with dimensions:

• width() / height(): content range
• innerWidth() / innerHeight(): content + paddings
• outerWidth(true) / outerHeight(true): content + paddings + border + margin(true)

http://www.w3schools.com/jquery/jquery_dimensions.asp

jQuery Traversing

Using jQuery traversing methods to "move through" elements within the HTML DOM tree, or "find / select" HTML elements based on relative positions to other elements. Then, HTML rendering or CSS effects can be dynamically changed by modifying those elements with JS codes.

HTML Elements is the DOM tree, a node represents a block of content or area.

• move up (ancestors): parent(), parents(), parentsUntil(). E.g. "$("span").parents();" returns all ancestors of all <span> elements, "$("span").parents("ul");" returns all ancestors of all <span> elements that are <ul> elements, "$("span").parentsUntil("div");" moves up until <div> found.
• move down (descendants): children(), find(). E.g. "$("div").children();" returns all elements that are direct children of each <div> elements, "$("div").children("p.1");" returns all <p> elements with the class name "1", that are direct children of <div>.
• move sideways (siblings): siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil().
• filtering methods: first(), last() and eq(). "$("p").eq(1);" returns the second <p> element (index number 1). The index numbers start at 0.