Jquery Introduction jQuery using syntax jQuery using selector jQuery using Events jQuery using Animation jQuery using AJAX jQuery using Chaining jQuery Iterating over Elements jQuery Utilities

jQuery using selector

Jquery

Selectors are an essential part of jQuery as they allow you to target specific elements within a webpage for manipulation. Let's go over some commonly used selectors:

  1. Element Selector:

    • Selects all elements with a specific tag name.
    javascript
    $('p') // Selects all <p> elements

  2. Class Selector:

    • Selects all elements with a specific class.
    javascript
    $('.highlight') // Selects all elements with class "highlight"

  3. ID Selector:

    • Selects a single element with a specific ID.
    javascript
    $('#header') // Selects the element with ID "header"

  4. Attribute Selector:

    • Selects elements based on attribute values.
    javascript
    $('[data-toggle="tooltip"]') // Selects elements with attribute data-toggle="tooltip"

  5. Combination Selectors:

    • You can combine selectors for more specific targeting.
    javascript
    $('ul li') // Selects all <li> elements within <ul> elements

  6. Pseudo-selectors:

    • These allow for even more specific selection, like selecting the first or last element.
    javascript
    $('p:first') // Selects the first <p> element
$('p:last') // Selects the last <p> element

  7. Parent-Child Relationship:

    • Selecting elements based on their relationship in the DOM tree.
    javascript
    $('div > p') // Selects all <p> elements that are direct children of <div> elements

  8. Sibling Selector:

    • Selecting elements that are siblings of other elements.
    javascript
    $('h2 + p') // Selects all <p> elements that are immediately preceded by an <h2> element

  9. Filtering:

    • You can also filter selected elements further based on various criteria.
    javascript
    $('div').first() // Selects the first <div> element
$('div').eq(2) // Selects the third <div> element (zero-based index)

These are just a few examples of the many selectors available in jQuery. They provide a powerful way to target specific elements within a webpage, enabling dynamic and interactive web development.

Thanks for learning