To collect a group of elements, we pass the selector to the jQuery function using the simple syntax
|
1 2 3 |
$(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. |
jQuery Event Methods
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |