jQuery Introduction

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.

 

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
Share

Recent Posts

jQuery library Introduction

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is…

5 years ago

Adjust li width fit with ul width of the outer div/body

HTML:- [crayon-663e54a15fd3f961066967/] CSS:- [crayon-663e54a15fd49084269000/] JavaScript:- [crayon-663e54a15fd4d371284937/]  

5 years ago

Customize Input Box using jQuery

Prevent users typing special characters in text box, textarea, etc. [crayon-663e54a15ff44048195028/] ^[a-zA-Z]+$ Alphabets ^[a-zA-Z\s]+$ Alphabets…

5 years ago

JavaScript simple form validation with example

Any interactive web site has form input - a place where the users input different…

5 years ago

Clear the browser cache of CSS or JavaScript Using Javascript

[crayon-663e54a160499754897810/]  

5 years ago

Simple Ajax Call

[crayon-663e54a16065c542328410/]  

5 years ago