73 Different Examples of JQuery Selectors for Web Developers and Designers

February 2, 2017 No comments Article SEO Website Designing

73 Different examples of JQuery Selectors for Web Developers and Designers: Hi Friends, Today I will tell you about different selectors of jquery. Generally we are confused sometime how to select the document elements using jquery, so here is the list with brief explanation.

If you are new in jquery, all the selectors are useful for you. For experienced person most of them are new.

Anyone can use it according to your requirement.

73 Different Examples of JQuery Selectors for Web Developers and Designers are:

$(“*”)
All document elements.
$(“#hello”)
The document element with id=”hello”
$(“.info”)
All document elements with class=”info”
$(“.info, #hello”)
All document elements with class=” info”, and the document element with id=” hello”
$(“h1”)
All <h1> document elements.
$(“h1, p”)
All <h1> document elements and all <p> document elements.
$(“button”)
All <button> elements and all <p> document elements.
$(“.info #hello”)
All id=”hello” elements inside class=”info” elements.
$(“#hello .info”)
All class=”info” elements inside id=”hello” elements.
$(“:hover”)
All hovered elements.
$(“:active”)
All active link elements.
$(“:visited”)
All visited Links.
$(“span”)
All span elements.
$(“div span”)
All span element inside div elements.
$(“:even”)
All even elements.
$(“:odd”)
All odd elements.
$(“:lang”)
All lang attributes.
$(“div button:only-child”)
All elements that are the only child of their parent.
$(“p:first”)
The first <p> document element.
$(“p:last”)
The last <p> document element.
$(“tr:even”)
All even <tr> document elements.
$(“tr:odd”)
All odd <tr> document elements.
$(“p:first-child”)
All <p> document elements that are the first child of their parent.
$(“p:first-of-type”)
All <p> document elements that are the first <p> element of their parent.
$(“p:last-child”)
All <p> document elements that are the last child of their parent.
$(“p:last-of-type”)
All <p> document elements that are the last <p> element of their parent.
$(“li:nth-child(1)”)
All <li> document elements that are the first child of their parent.
$(“li:nth-last-child(1)”)
All <li> document elements that are the last first child of their parent.
$(“li:nth-of-type(2)”)
All <li> document elements that are the second <li> element of their parent.
$(“li:nth-last-of-type(2)”)
All <li> document elements that are the second last <li> element of their parent.
$(“b:only-child”)
All <b> document 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> document elements that are a direct child of a <div> element.

$(“div p”)
All <p> document elements that are descendants of a <div> element.
$(“ul + h3”)
The <h3> document element that are next to each <ul> elements.
$(“ul ~ table”)
All <table> document 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(3)”)
All <li> elements of <ul> elements with an index less than 3.
$(“:header”)
All header elements <h1>, <h2>
$(“:header:not(h1)”)
All header elements that are not <h1> elements.
$(“:animated”)
All animated elements
$(“:focus”)
The element that currently has focus.
$(“:contains(Hello World)”)
All document elements which contains the text ” Hello World “
$(“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.
$(“p:hidden”)
All hidden <p> elements
$(“table:visible”)
All visible tables.
$(“:root”)
The document’s root element.
$(“p:data(he)”)
All <p> document elements with a data attribute value starting with “he”
$(“[id]”)
All document elements with an id attribute.
$(“[id=email-me]”)
All document elements with an id attribute value equal to “email-me”.

$(“p[id!= email-me]”)
All <p> elements without an id attribute value equal to “email-me”.
Note: Also <p> document elements with no id attribute at all.
$(“[id$=etu]”)
All document elements with an id attribute value ending with “etu”
$(“[id|=ema]”)
All document elements with an id attribute value equal to “ema” or starting with “ema” followed by a hyphen (-)
$(“[id^=A]”)
All document elements with an id attribute value starting with the letter “A”
$(“[title~=task]”)
All document elements with a title attribute value containing the word “task”
$(“[id*=r]”)
All document elements with an id attribute value containing the string “r”
$(“:input”)
All form elements.
$(“:text”)
All form elements with type=”text”
$(“:password”)
All form elements with type=”password”
$(“:radio”)
All form elements with type=”radio”
$(“:checkbox”)
All form elements with type=”checkbox”
$(“:submit”)
All form elements with type=”submit”
$(“:reset”)
All form elements with type=”reset”
$(“:button”)
All form elements with type=”button”, and all <button> document elements.
$(“:image”)
All form elements with type=”image”
$(“:file”)
All form elements with type=”file”

$(“:enabled”)
All enabled form elements.
$(“:disabled”)
All disabled form elements.
$(“:selected”)
All selected options in a drop-down list or a form.
$(“:checked”)
All checked form elements.

Note: Don’t Forget to add jquery file or cdn in your website or its page.

Now you know about 73 Different Examples of JQuery Selectors for Web Developers and Designers

Read About Other Interesting Things about jquery below.

I hope you will like 73 Different Examples of JQuery Selectors for Web Developers and Designers. If You found it useful please subscribe my blog.

Categories: Website Design

73 Different Examples of JQuery Selectors for Web Developers and Designers

73 Different Examples of JQuery Selectors for Web Developers and Designers are:

$(“*”)

$(“#hello”)

$(“.info”)

$(“.info, #hello”)

$(“h1”)

$(“h1, p”)

$(“button”)

$(“.info #hello”)

$(“#hello .info”)

$(“:hover”)

$(“:active”)

$(“:visited”)

$(“span”)

$(“div span”)

$(“:even”)

$(“:odd”)

$(“:lang”)

$(“div button:only-child”)

$(“p:first”)

$(“p:last”)

$(“tr:even”)

$(“tr:odd”)

$(“p:first-child”)

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

$(“p:last-child”)

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

$(“li:nth-child(1)”)

$(“li:nth-last-child(1)”)

$(“li:nth-of-type(2)”)

$(“li:nth-last-of-type(2)”)

$(“b:only-child”)

$(“h3:only-of-type”)

$(“div > p”)

$(“div p”)

$(“ul + h3”)

$(“ul ~ table”)

$(“ul li:eq(0)”)

$(“ul li:gt(0)”)

$(“ul li:lt(3)”)

$(“:header”)

$(“:header:not(h1)”)

$(“:animated”)

$(“:focus”)

$(“:contains(Hello World)”)

$(“div:has(p)”)

$(“:empty”)

$(“:parent”)

$(“p:hidden”)

$(“table:visible”)

$(“:root”)

$(“p:data(he)”)

$(“[id]”)

$(“[id=email-me]”)

$(“p[id!= email-me]”)

$(“[id$=etu]”)

$(“[id|=ema]”)

$(“[id^=A]”)

$(“[title~=task]”)

$(“[id*=r]”)

$(“:input”)

$(“:text”)

$(“:password”)

$(“:radio”)

$(“:checkbox”)

$(“:submit”)

$(“:reset”)

$(“:button”)

$(“:image”)

$(“:file”)

$(“:enabled”)

$(“:disabled”)

$(“:selected”)

$(“:checked”)

Note: Don’t Forget to add jquery file or cdn in your website or its page.

Now you know about 73 Different Examples of JQuery Selectors for Web Developers and Designers

Share this:

Related

Leave a Reply Cancel reply