Hierarchical Selectors ​

In addition to basic selectors, jQuery's hierarchical selectors are more flexible and powerful.

Since the DOM structure is hierarchical, we often need to select elements based on their hierarchical relationships.

Descendant Selector ​

If two DOM elements have a hierarchical relationship, you can use $('ancestor descendant') to select them, separated by a space. For example:

<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

To select JavaScript, you can use the descendant selector:

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

Both methods work because <div> and <ul> are ancestor nodes of <li>.

To select all <li> nodes:

$('ul.lang li');

This hierarchical selector is beneficial as it narrows the selection range, ensuring that you first locate the parent node before selecting the relevant child nodes, thus avoiding unrelated elements.

For example:

$('form[name=upload] input');

This limits the selection to inputs within the form with the name attribute set to upload. Other forms' <input> elements won’t be selected.

Multiple levels of selection are also allowed:

$('form.test p input'); // Select <input> contained within <p> in a form

Child Selector ​

The child selector $('parent>child') is similar to the descendant selector but restricts the relationship to parent-child. The <child> node must be a direct child of the <parent> node. Using the previous example:

$('ul.lang>li.lang-javascript'); // Selects [<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], cannot select because <div> and <li> are not in a parent-child relationship

Filter ​

Filters are generally not used alone; they are usually appended to selectors to help pinpoint elements more precisely. Observe the effects of filters:

$('ul.lang li'); // Selects JavaScript, Python, and Lua
$('ul.lang li:first-child'); // Selects only JavaScript
$('ul.lang li:last-child'); // Selects only Lua
$('ul.lang li:nth-child(2)'); // Selects the second element, counting starts from 1
$('ul.lang li:nth-child(even)'); // Selects elements with even indices
$('ul.lang li:nth-child(odd)'); // Selects elements with odd indices

Form-related Selectors ​

For form elements, jQuery has a set of special selectors:

• :input: selects <input>, <textarea>, <select>, and <button>.
• :file: selects <input type="file">, similar to input[type=file].
• :checkbox: selects checkboxes, same as input[type=checkbox].
• :radio: selects radio buttons, same as input[type=radio].
• :focus: selects the currently focused element, e.g., using $('input:focus') selects the focused <input>.
• :checked: selects currently checked radio buttons and checkboxes, e.g., $('input[type=radio]:checked').
• :enabled: selects inputs that are enabled, meaning they are not grayed out.
• :disabled: selects inputs that are disabled.

Additionally, jQuery offers many useful selectors, such as selecting visible or hidden elements:

$('div:visible'); // All visible divs
$('div:hidden'); // All hidden divs

Practice ​

Using the following HTML structure:

<div class="test-selector">
    <ul class="test-lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ol class="test-lang">
        <li class="lang-swift">Swift</li>
        <li class="lang-java">Java</li>
        <li class="lang-c">C</li>
    </ol>
</div>

Select the corresponding content and observe the effect:

// Select all languages, all dynamic languages, all static languages, JavaScript, Lua, C, etc.:
let selected = ???;

// Highlight result:
if (!(selected instanceof jQuery)) {
    return console.log('Not a valid jQuery object!');
}
$('#test-jquery').find('*').css('background-color', '');
selected.css('background-color', '#ff8000');