Selecting Elements in jQuery (jQuery Selectors)

To collect a group of elements, we pass the selector to the jQuery function using the simple syntax

$(selector)
    or
    jQuery(selector)

The $() function (an alias for the jQuery() function) returns a special JavaScript object containing an array of the DOM elements, in the order in which they are defined within the document, that match the selector. This object possesses a large number of useful predefined methods that can act on the collected group of elements.

Selector type	CSS	jQuery	What it does
Tag name	p { }	$(‘p’)	This selects all paragraphs in the document.
ID	#some-id { }	$(‘#some-id’)	This selects the single element in the document that has an ID of some-id.
Class	.some-class { }	$(‘.some-class’)	This selects all elements in the document that have a class of some-class.

jQuery supports not only the selectors that you have already come to know and love, but also more advanced selectors—defined as part of the CSS specification — and even some custom selectors.

Selector	Results
$(“p:even”)	Selects all even <p> elements
$(“tr:nth-child(1)”)	Selects the first row of each table
$(“body > div”)	Selects direct <div> children of <body>
$(“a[href$= ‘pdf ‘]”)	Selects links to PDF files
$(“body > div:has(a)”)	Selects direct <div> children of <body>-containing links
$(“*”)	Selects all elements
$(this)	Selects the current HTML element
$(“p.intro”)	Selects all <p> elements with class=”intro”
$(“p:first”)	Selects the first <p> element
$(“ul li:first”)	Selects the first <li> element of the first <ul>
$(“ul li:first-child”)	Selects the first <li> element of every <ul>
$(“[href]”)	Selects all elements with an href attribute
$(“a[target=’_blank’]”)	Selects all <a> elements with a target attribute value equal to “_blank”
$(“a[target!=’_blank’]”)	Selects all <a> elements with a target attribute value NOT equal to “_blank”
$(“:button”)	Selects all <button> elements and <input> elements of type=”button”
$(“tr:even”)	Selects all even <tr> elements
$(“tr:odd”)	Selects all odd <tr> elements

The basic CSS selectors supported by jQuery

Selector	Description
*	Matches any element.
E	Matches all elements with tag name E.
E F	Matches all elements with tag name F that are descendants of E. E>F Matches all elements with tag name F that are direct children of E.
E+F	Matches all elements with tag name F that are immediately preceded by sibling E.
E~F	Matches all elements with tag name F preceded by any sibling E.
E.C	Matches all elements with tag name E with class name C. Omitting E is the same as *.C.
E#I	Matches all elements with tag name E with the id of I. Omitting E is the same as *#I.
E[A]	Matches all elements with tag name E that have attribute A of any value.
E[A=V]	Matches all elements with tag name E that have attribute A whose value is exactly V.
E[A^=V]	Matches all elements with tag name E that have attribute A whose value starts with V.
E[A$=V]	Matches all elements with tag name E that have attribute A whose value ends with V.
E[A!=V]	Matches all elements with tag name E that have attribute A whose value doesn’t match the value V, or that lack attribute A completely.
E[A*=V]	Matches all elements with tag name E that have attribute A whose value contains V.