Core jQuery Selection and Navigation

jQuery provides powerful tools for selecting HTML elements and navigating the DOM tree. This reference covers fundamental selector expressions and traversal methods that form the backbone of most jQuery operations.

Basic Element Selectors

Select elements by tag name, ID, or class:

// Tag selector
$('div').addClass('container');

// ID selector  
$('#main-header').hide();

// Class selector
$('.highlighted').fadeIn();

Attribute-Based Selection

jQuery supports CSS3-style attribute selectors:

// Element with specific attribute
$('input[required]').addClass('mandatory');

// Attribute value matching
$('a[href^="https://"]').addClass('secure-link');

// Attribute contains value  
$('img[alt*="logo"]').addClass('brand-image');

Hierarchy Navigation Methods

Travrese the DOM using these essential methods:

// Find child elements
$('#sidebar').children('ul').addClass('nav-list');

// Locate parent elements  
$('.item').parent().addClass('has-items');

// Get all ancestors
$('.current').parentsUntil('body').addClass('active-path');

Filtering and Refining Selections

Reduce matched element sets based on various criteria:

// Position-based filtering
$('tr:first').addClass('header-row');
$('li:last').addClass('final-item');

// Content filtering
$('p:contains("warning")').addClass('alert-text');

// Custom filtering
$('div').filter(function() {
    return $(this).height() > 200;
}).addClass('tall-section');

Sibling Navigation

Move horizontally through the DOM tree:

// Immediate siblings
$('.selected').siblings().removeClass('active');

// Previous element
$('.current').prev().addClass('before-current');

// Next element  
$('.current').next().addClass('after-current');

// All following siblings
$('.start-point').nextAll().addClass('subsequent');

Form Element Selecotrs

Specialized selectors for form controls:

// Form input types
$(':text').addClass('text-input');
$(':checkbox:checked').addClass('selected-option');

// Form states
$(':disabled').addClass('inactive-control');
$(':focus').addClass('active-field');

Combining Selection Techniques

Chain multiple methods for precise element targetnig:

// Complex navigation chain
$('article')
    .find('h2')
    .nextUntil('h2')
    .filter('p')
    .addClass('body-text');

Selection Context Parameter

Limit searches to specific DOM sections:

// Search within context
var $container = $('#content-area');
$('a', $container).addClass('internal-link');

// Equivalent to:
$container.find('a').addClass('internal-link');

Performance Considerations

Optimize selector performance with these practices:

// Specific selectors are faster
$('div.content')          // Good - combines tag and class
$('.content')             // Slower - scans all elements

// Cache frequently used selections
var $navigation = $('nav.main-nav');
$navigation.find('a').addClass('nav-link');
$navigation.children().addClass('nav-item');

Custom Selection Extensions

Extend jQuery's selection capabilities:

// Custom pseudo-selector
$.extend($.expr[':'], {
    visibleWithin: function(el) {
        return $(el).is(':visible') && 
               $(el).parents().is(':visible');
    }
});

// Usage
$('div:visibleWithin').addClass('fully-visible');