JQuery Tutorial

Define jQuery

How to use jQuery

jQuery Methods

Exercise Methods

jQuery Selectors

jQuery Events

Manipulate CSS Style

jQuery Traversing

jQuery Animations

jQuery AJAX

jQuery Plugins

jQuery Assignment

jQuery Traversing

jQuery traversing, which means "move through", are used to 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.


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

parent() Method: $("p").parent();

parents() Method: $("p").parents();

parentsUntil() Method: $("span").parentsUntil("body");


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

children() Method: $("div").children();

You can also search for children. $("div").children("p.1");


Siblings are the elements having same parent.

siblings() Method: $("h2").siblings();


next() Method: $("h2").next();

nextAll() Method: $("h2").nextAll();

nextUntil() Method: $("h2").nextUntil("h6");

prev() Method: $("h2").prev();

prevAll() Method: $("h2").prevAll();

prevUntil() Method: $("h2").prevUntil("h6");


Match, a certain criteria.

first() Method: $("div p").first();

last() Method: $("div p").last();

eq() method: $("p").eq(1);

filter() Method: $("p").filter(".intro");

not() Method: $("p").not(".intro");