jQuery Class Selector

Introduction

jQuery is a JavaScript library that is open source that streamlines interactions between an HTML/CSS document, or more properly, the Document Object Model (DOM), and JavaScript. It facilitates HTML page navigation and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript programming, to name a few.

The .class selector indicates the element's jQuery selector class. It shouldn't start with a number. It styles a wide range of HTML components.

Syntax

The .class selector chooses all components that have the specified jQuery selector class. The class attribute of an HTML element is used to specify a specific style for certain HTML components.

The syntax of the class selector is as follows:

Parameters

The pattern to match the elements is specified by the selector expression parameter. To match the elements, jQuery employs CSS selector patterns as well as its own pattern. The context parameter is not required. It provides the items in a DOM structure from which jQuery will begin looking for matched elements.

This selector's parameters are described in detail below.

classid - This is a document-available class ID.

Returns

The "wrapped set", a jQuery object that resembles an array and contains all of the selected DOM elements, is what selectors return when used. You can walk over the wrapped set like an array or use the indexer to get specific elements ($(sel)[0], for example).

This selector, like any other jQuery selector, returns an array containing the elements encountered.

Examples

To select elements with a certain jQuery selector class, use a dot (.) followed by the class name.

To be more specific, use the class selector in conjunction with a tag name.

There are three main examples that can explain a bit more about jQuery selector classes as follows:

1. $('.big') - returns all items with the class ID big.

2. $('p.small') - returns all paragraphs with the class ID small.

3. $('.big,.small') - returns all elements with the classes big and small.

Browser Support

jQuery.browser

It contains user agent flags taken from navigator.userAgent. This property was deleted in jQuery 1.9 and is now only available via jQuery.migrate plugin. Please consider using feature detection instead.

The $.browser property returns information from the browser about the web browser that is visiting the page. It includes flags for the four most common browser classes (Internet Explorer, Mozilla, Webkit, and Opera), as well as version information for each.

The following flags are available:

• webkit (as of jQuery 1.4)
• safari (deprecated)
• opera
• msie
• mozilla

This property is immediately available. As a result, it is safe to use it to decide whether or not to call $(document).ready(). In jQuery 1.3, the $.browser property is outdated, and its functionality may be relocated to a team-supported plugin in a future jQuery release.

Because $.browser determines the platform via navigator.userAgent, it is open to spoofing by the user or misrepresentation by the browser itself. It is always preferable to avoid using browser-specific code entirely. It is preferable to utilize libraries such as Modernizr instead of $.browser.

Example:

If the current useragent is a version of Microsoft's Internet Explorer, return true. It will not function with jQuery 1.9 or later without the jQuery Migrate plugin.

Only WebKit browsers will receive the "this is WebKit!" alert. It will not function with jQuery 1.9 or later without the jQuery Migrate plugin.

jQuery.browser.version

It is the rendering engine version number for the user's browser. This property was deleted in jQuery 1.9 and is now only available via jQuery.migrate plugin.

Here are some examples of usual outcomes:

• Internet Explorer versions 6.0, 7.0, and 8.0
• 1.7.12, 1.8.1.3, 1.9 Mozilla/Firefox/Flock/Camino
• Opera: 10.06, 11.01
• Safari/Webkit: 312.8 and 418.9, respectively.

It's important to note that IE8 pretends to be 7 in the Compatibility View.

Example:

The version number of the rendering engine used by the user's current browser is returned. For instance, Firefox 4 returns 2.0. It will not function with jQuery 1.9 or later without the jQuery Migrate plugin.

It indicate the version of Internet Explorer's rendering engine that is being used. It will not function with jQuery 1.9 or later without the jQuery Migrate plugin.