jQuery Traversing – Siblings

With jQuery you can traverse sideways in the DOM tree to find siblings of an element.

Siblings share the same parent.

Traversing Sideways in The DOM Tree

There are many useful jQuery methods for traversing sideways in the DOM tree:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

Continue reading jQuery Traversing – Siblings

jQuery Traversing – Descendants

With jQuery you can traverse down the DOM tree to find descendants of an element.

A descendant is a child, grandchild, great-grandchild, and so on.

Traversing Down the DOM Tree

Two useful jQuery methods for traversing down the DOM tree are:

  • children()
  • find()

Continue reading jQuery Traversing – Descendants

jQuery Traversing – Ancestors

With jQuery you can traverse up the DOM tree to find ancestors of an element.

An ancestor is a parent, grandparent, great-grandparent, and so on.

Traversing Up the DOM Tree

Three useful jQuery methods for traversing up the DOM tree are:

  • parent()
  • parents()
  • parentsUntil()

Continue reading jQuery Traversing – Ancestors

jQuery Traversing

What is Traversing?

jQuery traversing, which means “move through”, are used to “find” (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

The image below illustrates an HTML page as a tree (DOM tree). With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing – or moving through – the DOM tree.

Illustration explained:

  • The <div> element is the parent of <ul>, and an ancestor of everything inside of it
  • The <ul> element is the parent of both <li> elements, and a child of <div>
  • The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
  • The <span> element is a child of the left <li> and a descendant of <ul> and <div>
  • The two <li> elements are siblings (they share the same parent)
  • The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
  • The <b> element is a child of the right <li> and a descendant of <ul> and <div>

An ancestor is a parent, grandparent, great-grandparent, and so on.
A descendant is a child, grandchild, great-grandchild, and so on.
Siblings share the same parent.

Traversing the DOM

jQuery provides a variety of methods that allow us to traverse the DOM.

The largest category of traversal methods are tree-traversal.

The next chapters will show us how to travel up, down and sideways in the DOM tree.

jQuery – Dimensions

With jQuery, it is easy to work with the dimensions of elements and browser window.

jQuery Dimension Methods

jQuery has several important methods for working with dimensions:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery Dimensions

Continue reading jQuery – Dimensions

jQuery – css() Method

jQuery css() Method

The css() method sets or returns one or more style properties for the selected elements.

Continue reading jQuery – css() Method

jQuery – Get and Set CSS Classes

With jQuery, it is easy to manipulate the style of elements.

jQuery Manipulating CSS

jQuery has several methods for CSS manipulation. We will look at the following methods:

  • addClass() – Adds one or more classes to the selected elements
  • removeClass() – Removes one or more classes from the selected elements
  • toggleClass() – Toggles between adding/removing classes from the selected elements
  • css() – Sets or returns the style attribute

Continue reading jQuery – Get and Set CSS Classes

jQuery – Remove Elements

With jQuery, it is easy to remove existing HTML elements.

Remove Elements/Content

To remove elements and content, there are mainly two jQuery methods:

  • remove() – Removes the selected element (and its child elements)
  • empty() – Removes the child elements from the selected element

Continue reading jQuery – Remove Elements

jQuery – Add Elements

With jQuery, it is easy to add new elements/content.

Add New HTML Content

We will look at four jQuery methods that are used to add new content:

  • append() – Inserts content at the end of the selected elements
  • prepend() – Inserts content at the beginning of the selected elements
  • after() – Inserts content after the selected elements
  • before() – Inserts content before the selected elements

Continue reading jQuery – Add Elements

jQuery – Set Content and Attributes

Set Content – text(), html(), and val()

We will use the same three methods from the previous page to set content:

  • text() – Sets or returns the text content of selected elements
  • html() – Sets or returns the content of selected elements (including HTML markup)
  • val() – Sets or returns the value of form fields

The following example demonstrates h Continue reading jQuery – Set Content and Attributes