jQuery - Selectors

Following table lists down few basic selectors and explains them with examples.

Selector	Description
Name	Selects all elements which match with the given elementName.
#ID	Selects a single element which matches with the givenID
.Class	Selects all elements which match with the given Class.
Universal (*)	Selects all elements available in a DOM.
Multiple Elements E, F, G	Selects the combined results of all the specified selectors E, F or G.

Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors:

• $('*'): This selector selects all elements in the document.
• $("p > *"): This selector selects all elements that are children of a paragraph element.
• $("#specialID"): This selector function gets the element with id="specialID".
• $(".specialClass"): This selector gets all the elements that have the class ofspecialClass.
• $("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
• $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
• $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
• $("ul li:first"): This selector gets only the first <li> element of the <ul>.
• $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
• $("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
• $("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
• $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
• $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
• $("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class ofmyclass.
• $(":empty"): Selects all elements that have no children.
• $("p:empty"): Selects all elements matched by <p> that have no children.
• $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
• $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
• $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
• $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
• $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
• $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar
• $("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
• $("li:even"): Selects all elements matched by <li> that have an even index value.
• $("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
• $("li:first"): Selects the first <li> element.
• $("li:last"): Selects the last <li> element.
• $("li:visible"): Selects all elements matched by <li> that are visible.
• $("li:hidden"): Selects all elements matched by <li> that are hidden.
• $(":radio"): Selects all radio buttons in the form.
• $(":checked"): Selects all checked boxex in the form.
• $(":input"): Selects only form elements (input, select, textarea, button).
• $(":text"): Selects only text elements (input[type=text]).
• $("li:eq(2)"): Selects the third <li> element
• $("li:eq(4)"): Selects the fifth <li> element
• $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
• $("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
• $("li:gt(1)"): Selects all elements matched by <li> after the second one.
• $("p:gt(2)"): Selects all elements matched by <p> after the third one.
• $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
• $("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
• $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
• $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
• $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
• $(":parent"): Selects all elements that are the parent of another element, including text.
• $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.