The jQuery API .children() method allows you to do manipulations on the child elements of the specified element in the selector. It is often used in conjunction with other methods that do the actual manipulation. The .children() method does not find other descendants of the parent element, only the direct children.

Other methods similar to .children() are .find() and .contents(). Each of which has different ways of locating additional elements.

An instance where .children() would be utilized would be that you need to style the child elements of the specified parent element in some way. Say the user selects a certain subject and you want to highlight the remaining contents of a <div> with that title.

$("#genreSelect").change(function() {
    var currGenre = "#" + $("#genreSelect").val( );

    <select id="genreSelect">
        <option value="selectgenre" selected="selected">Select a genre</option>
        <option value="thrillers">Thrillers</option>
        <option value="romance">Romance</option>
        <option value="drama">Drama</option>
        <option value="comedy">Comedy</option>
<div id="thrillers" class="genre">
    <p>The Talented Mr. Ripley</p>
    <p>Murder by Decree</p>
<div id="drama" class="genre">
    <p>Two Lives</p>
    <p>Venus in Fur</p>
    <p>Island at War</p>
    <p>All is Lost</p>
<div id="romance" class="genre">
    <p>Just a Sigh</p>
    <p>Last Love</p>
    <p>Finding Normal</p>
<div id="comedy" class="genre">
    <p>The Trip</p>
    <p>Today's special</p>
    <p>Why Stop Now?</p>
    <p>The Addams Family</p>

The results: