Home    Articles

 

Introduction to jQuery part. 2

 

To understand better how jQuery works, we need to know some basics about DOM. It presents an XML document as a tree-structure.

source: w3schools.com

Here he have some HTML code:

<h1>Where do you want to go?</h1>
<h2>Destinations</h2>
<p>Plan your next vacation</p>
<ul id="destinations">
  <li>Bucharest</li>
  <li>Moscow</li>
  <li>Paris</li>
</ul>

How do we find only the <li> elements that are children of the “destinations” <ul>. Simple, using filter by traversing:

$("#destinations").find("li");

We can select only the direct children of the <li> node, not all the <li> items.

$("#destinations").children("li");

To select the first element of the <li> list, we use the first() method. Same thing with last element, next, previous.

$("li").first();
$("li").last();
$("li").first().next();
$("li").last().previous();

To select the parent of a node we use the parent() method.

$("li").first().parent();

 

by