What is a selector in JQuery?
JQuery selectors is a internal function which uses the expressions to find the DOM elements on given condition.
JQuery selector by using expression params(pattern) matches the HTML DOM elements in our web page.
JQuery electors are used to select one or more HTML elements.
JQuery also uses CSS selector patterns along with its own pattern to match the elements.
Usually JQuery selector function will start with $()
What are the types of JQuery selectors ?
Some of the types of JQuery selectors are listed below,
1. Basic Selectors
2. Basic Filter Selectors
3. Child Filter Selectors
4. Content Filter Selectors
5. Form Selectors
6. Attribute Selectors
7. Hierarchy Selectors
8. Visibility Filter Selectors
Jquery tutorial for beginners !!!
Click to Learn More about – online learn jquery
1. Basic Selectors
a) *
If we want to select all elements.
$("*")
b) #id
If we want to select all elements with the id=”myId”.
$("#myId")
c).class
If we want to select all elements with the class=”myClass”.
$(".myClass")
d) element
If we want to select all <p> elements.
$("p")
e) selector1, selector2, selectorN
If we want to select all <h1> and <span>, but only that <p> elements that has the class=”myClass”.
$("h1, p.myClass, span")
2. Basic Filter Selectors
a) :first
If we want to select the first <p> element.
$("p:first")
b) :last
If we want to select the last <p> element.
$("p:last")
c) :even
If we want to select all even <tr> elements, zero-indexed.
$("tr:even")
d) :odd
If we want to select all odd <tr> elements, zero-indexed.
$("tr:odd")
e) :eq()
If we want to select the 2nd <tr> element within the matched set, zero-based index.
$("tr:eq(1)")
f) :not()
If we want to select all <p> elements that are not empty.
$("p:not(:empty)")
g) :lt()
If we want to select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index.
$("ul li:lt(3)")
h) :gt()
If we want to select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, … list elements), zero-based index.
$("ul li:gt(3)")
i) :header
If we want to select all elements that are headers, like <h1>, <h2>, <h3> and so on.
$(":header")
j) :lang()
If we want to select all elements that have a language value “en” i.e. lang=”en”, lang=”en-us” etc.
$(":lang(en)")
k) :root
If we want to select the document’s root element which is always <html> element in a HTML document.
$(":root")
l) :animated
If we want to select all elements that are animating at the time the selector is run.
$(":animated")
3. Child Filter Selectors
a) :first-child
If we want to select all <p> elements that are the first child of their parent.
$("p:first-child")
b) :last-child
If we want to select all <p> elements that are the last child of their parent.
$("p:last-child")
c) :nth-child(n)
If we want to select all <p> elements that are the 3rd child of their parent.
$("p:nth-child(3)")
d) :only-child
If we want to select all <p> elements that are the only child of their parent.
$("p:only-child")
e) :first-of-type
If we want to select all <p> elements that are the first <p> element of their parent.
$("p:first-of-type")
f) :last-of-type
If we want to select all <p> elements that are the last <p> element of their parent.
$("p:last-of-type")
g) :only-of-type
If we want to select all <p> elements that have no siblings with the same element name.
$("p:only-of-type")
h) :nth-last-child(n)
If we want to select all <p> elements that are the 3rd-child of their parent, count from the last element to the first.
$("p:nth-last-child(3)")
i) :nth-of-type(n)
If we want to select all <p> elements that are the 2nd <p> element of their parent
$("p:nth-of-type(2)")
j) :nth-last-of-type(n)
If we want to select all <p> elements that are the 2nd-child of their parent, count from the last element to the first.
$("p:nth-last-of-type(2)")
4. Content Filter Selectors
a) :contains()
If we want to select all <p> elements that contains the text “Hello”.
$('p:contains("Hello")')
b) :empty
If we want to select all <td> elements that are empty i.e that have no children including text.
$("td:empty")
c) :has()
If we want to select all <p> elements which contain at least one <img> element.
$("p:has(img)")
d) :parent
If we want to select all elements that have at least one child node either an element or text.
$(":parent")
5. Form Selectors
a) :input
If we want to select all input, textarea, select and button elements (basically selects all form controls).
$(":input")
b) :text
If we want to select all input elements with type=”text”.
$(":text")
c) :password
If we want to select all input elements with type=”password”.
$(":password")
d) :radio
If we want to select all input elements with type=”radio”.
$(":radio")
e) :checkbox
If we want to select all input elements with type=”checkbox”.
$(":checkbox")
f) :button
If we want to select all input and button elements with type=”button”.
$(":button")
g) :submit
If we want to select all input and button elements with type=”submit”.
$(":submit")
h) :reset
If we want to select all input and button elements with type=”reset”.
$(":reset")
i) :image
If we want to select all input elements with type=”image”.
$(":image")
j) :file
If we want to select all input elements with type=”file”.
$(":file")
k) :enabled
If we want to select all elements that are enabled.
$(":enabled")
l) :disabled
If we want to select all elements that are disabled.
$(":disabled")
m) :selected
If we want to select all elements that are selected, only works for <option> elements.
$(":selected")
n) :checked
If we want to select all elements that are checked or selected, works for checkboxes, radio buttons, and select elements.
$(":checked")
o) :focus
If we want to select element if it is currently focused.
$(":focus")
6. Attribute Selectors
a) [attribute]
If we want to select all elements with a href attribute, with any value.
$("[href]")
b) [attribute=”value”]
If we want to select all <a> elements that have the target attribute with a value equal to “_blank”.
$('a[target="_blank"]')
c) [attribute=”value”]
If we want to select all <a> elements that don’t have the target attribute, or if have don’t with a value “_blank”.
$('a[target!="_blank"]')
d) [attribute$=”value”]
If we want to select all <img> elements that have the src attribute with a value ending with “.png”.
$('img[src$=".png"]')
e) [attribute|=”value”]
If we want to select all <a> elements that have the hreflang attribute with a value equal to “en”, or starting with “en” followed by a hyphen, like “en-US”.
$('a[hreflang|="en"]')
f) [attribute^=”value”]
If we want to select all <img> elements that have the title attribute with a value beginning exactly with a “Smiley” string.
$('img[title^="Smiley"]')
g) [attribute~=”value”]
If we want to select all <img> elements that have the title attribute with a value containing the word “Kites”, delimited by spaces.
$('img[title~="Kites"]')
h) [attribute*=”value”]
If we want to select all <input> elements that have the name attribute with a value containing the substring “male”.
$('input[name*="male"]')
7. Hierarchy Selectors
a) parent > child
If we want to select all <li> elements that are direct child of their parent <ul> element.
$("ul > li")
b) ancestor descendant
If we want to select all <label> elements that are descendant of their ancestor <form> element.
$("form label")
c) prev + next
If we want to select all <p> elements that are next i.e. immediately preceded to the <h1> elements.
$("h1 + p")
d) prev ~ siblings
If we want to select all <p> elements that are siblings and follow after the <h1> elements.
$("h1 ~ p")
8. Visibility Filter Selectors
a) :hidden
If we want to select all <p> elements that are hidden.
$("p:hidden")
b) :visible
If we want to select all <p> elements that are visible.
$("p:visible")