Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jQuery Selectors

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 329
    Comment on it

    Selectors, as the name suggests, are used to select one or more HTML elements using jQuery. Once an element is selected we can perform various operations on that selected element. jQuery selectors are used to access HTML elements through their id, classes, types, attributes, and much more.

    jQuery selectors start with the dollar sign ($) followed by the parentheses ().

     

    Elements can be accessed through:

    Based on Example          

    Element name

    $(“p”) : All <p> elements will be selected.

    Id attribute

    $(“#sample”) : All HTML elements with id “sample” will be selected.

    Class selector

    $(“.xyz”) : All HTML elements with class “xyz” will be selected.

     

    List of jQuery Selectors:

    Syntax

    Description  

    $(“p:first-child”)

    All <p> elements that are the first child of their parent.

    $(“p:first-type-of”)

    All <p> elements that are the first <p> element of their parent.

    $(“p:last-child”)

    All <p> elements that are the last child of their parent.

    $(“p:last-type-of”)

    All <p> elements that are the last <p> element of their parent.

    $("li:nth-child(1)")

    All <li> elements that are the first child of their parent.

    $("li:nth-last-child(1)")

    All <li> elements that are the first child of their parent, counting from the <li> element.

    $("li:nth-of-type(2)")

    All <li> elements that are the second <li> element of their parent.

    $("li:nth-last-of-type(2)")

    All <li> elements that are the second <li> element of their parent, counting from the <li> element.

    $("b:only-child")

    All <b> elements that are the only child of their parent.

    $("h3:only-of-type")

    All <h3> elements that are the only child of its type, of their parent.

    $("div > p")

    All <p> elements that are a direct child of a <div> element.

    $("div p")

    All <p> elements that are descendants of a <div> element.

    $("ul + h3")

    The <h3> element that are next to each <ul> elements.

    $("ul ~ table")

    All <table> elements that are siblings of a <ul> element.

    $("ul li:eq(0)")

    The first <li> element of <ul> elements (index starts at 0).

    $("ul li:gt(0)")

    All <li> elements of <ul> elements with an index greater than 0.

    $("ul li:lt(2)")

    All <li> elements of <ul> elements with an index less than 2.

    $(":header")

    All header elements <h1>, <h2> ..., etc.

    $(":header:not(h1)")

    All header elements that are not <h1> elements.

    $(":contains(Duck)")

    All elements which contains the text "Duck"

    $("div:has(p)")

    All <div> elements that have a <p> element.

    $(":empty")

    All empty elements (like <input />)

    $(":parent")

    All elements that are a parent of another element (including text).

    $("p:hidden")

    All hidden <p> elements (which are not visible in the Result).

    $(":root")

    The document’s root element.

    $("p:lang(it)")

    All <p> elements with a lang attribute value starting with "it".

    $("[id]")

    All elements with an id attribute.

    $("[id=my-Address]")

    All elements with an id attribute value equal to "my-Address"

    $("p[id!=my-Address]")

    All <p> elements without an id attribute value equal to "my-Address". Also <p> elements with no id attribute at all.

    $("[id$=ess]")

    All elements with an id attribute value ending with "ess"

    $("[id|=my]")

    All elements with an id attribute value equal to "my" or starting with "my" followed by a hyphen (-)

    $("[id^=L]")

    All elements with an id attribute value starting with the letter "L"

    $("[title~=beautiful]")

    All elements with a title attribute value containing the word "beautiful".

    $("[id*=s]")

    All elements with an id attribute value containing the string "s".

    $("*")

    All elements.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: