The jQuery selectors we've seen so far only allow us to select the elements down the DOM tree. But there are many occasions when you need to select a parent or ancestor element; that is where jQuery's DOM traversal methods come into play. With these traversal methods, we can go up, down, and all around the DOM tree very easily.
DOM traversing is one of the prominent features of the jQuery. To make the most it you need to understand the relationships between the elements in a DOM tree.
The above diagram showing the parent/child relationships between the elements:
- The
<body>element is the parent of the<div>element, and an ancestor of everything inside of it. The enclosed<div>element is the parent of<h1>,<p>and<ul>elements, and a child of the<body>element. - The elements
<h1>,<p>and<ul>are siblings, since they share the same parent. - The
<h1>element is a child of the<div>element and a descendant of the<body>element. This element does not have any children. - The
<p>element is the parent of<em>element, child of the<div>element and adescendant of the<body>element. The containing<em>element is a child of this<p>element and a descendant of the<div>and<body>element. - Similarly, the
<ul>element is the parent of<li>elements, child of the<div>element and a descendant of the<body>element. The containing<li>elements are the childof this<ul>element and a descendant of the<div>and<body>element. Also, both the<li>elements are siblings.
More Details: http://goo.gl/6eKDsB
great thanks for good article.
ReplyDelete