jQuery Selectors: A Complete Guide to DOM Element Selection

jQuery selectors are used to "find" or "select" HTML elements, so you can apply actions to them — like hiding, showing, changing text, animating, and more.

jQuery selectors use the same syntax as CSS selectors, so if you know CSS, this will feel familiar!

All selectors in jQuery start with the dollar sign and parentheses: $().

Basic jQuery Selectors

Selector Type	Description	Example
Element	Selects all `<p>` elements	Try it yourself
ID	Selects the element with ID `myId`	Try it yourself
Class	Selects all elements with class `myClass`	Try it yourself
Universal	Selects all elements	Try it yourself
Group	Selects all`<h1>` and `<p>` elements	Try it yourself

Advanced Selectors

Selector	Description	Example
$("p:first")	Selects the first`<p>` element	Try it yourself
$("p:last")	Selects the last`<p>` element	Try it yourself
$("li:even")	Selects even-numbered`<li>` elements	Try it yourself
$("li:odd")	Selects odd-numbered`<li>` elements	Try it yourself
$("ul li:first")	Selects the first <li> element of the first <ul>	Try it yourself
$("ul li:first-child")	Selects the first <li> element of every <ul>	Try it yourself
$("[href]")	Selects elements with an `href` attribute	Try it yourself
$("[href='#']")	Selects elements with `href="#"`	Try it yourself
$("[href^='https']")	`href`starts with`https`	Try it yourself
$("[href$='.com']")	`href`ends with`.com`	Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.