Jquery selectors

admin Aug 12, 2020 1619 2

Jquery selectors:

An important part of the Jquery Library is the Jquery Selector. To apply a JQuery method to an element, you must first select that element.

Jquery selectors at a glance:

Selector	Example	Which selects
*	$("*")	Selects all the elements.
#id	$("#test")	id = "test" Selects all the associated elements.
.class	$(".samp")	Selects all elements with class = "samp".
.class, .class	$(".samp, .test")	The class selects all the elements with "samp" or "test".
element	$("div")	Selects all <div> elements.
el1,el2,el3	$("h3,div,p")	Selects all <h3>, <div> and <p> elements.
:first	$("p:first")	Selects the first <p> element.
:last	$("p:last")	Selects the last <p> element.
:even	$("tr:even")	All pairs select the <tr> element.
:odd	$("tr:odd")	Selects all odd <tr> elements.
:first-child	$("p:first-child")	Selects all those <p> elements that are their parent's first child elements.
:first-of-type	$("p:first-of-type")	Selects all the <p> elements that are the first <p> elements of their parent.
:last-child	$("p:last-child")	Selects all the <p> elements that are the last child element of their parent.
:last-of-type	$("p:last-of-type")	Selects all the <p> elements that are the last <p> elements of their parent.
:nth-child(n)	$("p:nth-child(2)")	Selects all the <p> elements that are the second <p> element of their parent.
:nth-last-child(n)	$("p:nth-last-child(2)")	Selects all the <p> elements that are the second child element of their parent element from below.
:nth-of-type(n)	$("p:nth-of-type(2)")	Selects all the <p> elements that are the second <p> element of their parent element.
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	Selects all the <p> elements that are the second <p> element of the parent element from the bottom.
:only-child	$("p:only-child")	Selects all the <p> elements that are the only child in their pants.
:only-of-type	$("p:only-of-type")	Selects all the <p> elements that are their parent's only <p> elements.
parent > child	$("div > p")	Selects all those <p> elements that are directly child elements of the <div> element.
parent descendant	$("div p")	Selects all the <p> elements that are the successors of the <div> element.
element + next	$("div + p")	Selects all the <p> elements that are next to the <div> element.
element ~ siblings	$("div ~ p")	Selects all the <p> elements that are siblings of the <div> element.
:eq(index)	$("ul li:eq(2)")	Selects the third element of a list. In this case the index starts with 0 (zero).
:gt(index)	$("ul li:gt(2)")	Selects a list element with more than two index numbers.
:lt(index)	$("input:not(:empty)")	Selects input elements that are not empty.
:header	$(":header")	Selects all the heading elements; <h1>, <h2> ...
:animated	$(":animated")	Selects all the elements with animation.
:focus	$(":focus")	Selects all the elements that are in focus at the moment.
:contains(string)	$(":contains('onlylearn')")	Selects all the elements that are in the text "onlylearn".
:has(selector)	$("div:has(p)")	Selects all the elements that are in the text "onlylearn".
:has(selector)	$("div:has(p)")	Selects the <div> elements that contain the <p> element.
:empty	$(":empty")	Selects all blank elements.
:parent	$(":parent")	Elements that are parents of another element are selected.
:hidden	$("p:hidden")	Selects all invisible <p> elements.
:visible	$("div:visible")	Selects all visible div elements.
:root	$(":root")	Selects the main element of the document.
:lang(language)	$("p:lang(bn)")	lang: Selects the <p> element with the attribute "bn".
[attribute]	$("[href]")	Selects all the elements associated with the href attribute.
[attribute=value]	$("[href='index.php']")	The value of the href attribute selects all the elements containing "index.php".
[attribute!=value]	$("[href!='index.php']")	Selects elements whose href attribute value is not "index.php".
[attribute$=value]	$("[href$='.png']")	Selects the elements whose href attribute value ends with ".png".
[attribute\|=value]	$("[title\|='Academy']")	Selects the elements whose value of the title attribute is equal to 'Academy' or starts with 'Academy'.
[attribute^=value]	$("[title^='Aca']")	Selects the elements whose title begins with the value of the attribute "Aca".
[attribute~=value]	$("[title~='satt']")	Selects the value of the title attribute of the element that contains a certain word "satt".
[attribute*=value]	$("[title*='satt']")	Selects the elements that contain "satt" in the value of the title attribute.
:input	$(":input")	Selects all the input elements.
:text	$(":text")	Selects all input elements with type = "text".
:password	$(":password")	Select all input elements with type = "password".
:radio	$(":radio")	Selects all input elements with type = "radio".
:checkbox	$(":checkbox")	Select all input elements with type = "checkbox".
:submit	$(":submit")	Select all input elements with type = "submit".
:reset	$(":reset")	Select all input elements with type = "reset".
:button	$(":button")	Selects all input elements with type = "button".
:image	$(":image")	Selects all input elements with type = "image".
:file	$(":file")	Selects all input elements with type = "file".
:enabled	$(":enabled")	Selects all enabled input elements.
:disabled	$(":disabled")	Selects all disabled input elements.
:selected	$(":selected")	Selects all the selected input elements.
:checked	$(":checked")	Selects all checked input elements.