Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
jQuery Tutorial
jQuery Class Selector

jQuery Class Selector

By Ashwin Joy
6 mins read
Last updated: 3 Feb 2023
171 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

You will frequently need to locate and modify certain page content while dealing with JavaScript. In these cases, you'll need to use jQuery's selector support.

jQuery makes it extremely easy to locate page elements based on their types, values, attributes, and so on. These elements are based on CSS selectors, and with a little effort, you'll discover that identifying elements on the pages is simple.

jQuery Selectors can be categorized according to their application. Let's take a look at some of the most popular selectors.

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.
  1. $('p.small') - returns all paragraphs with the class ID small.
  1. $('.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.

Conclusion

  • We learned how jQuery selectors work, what jQuery element class selector means, its syntax, and parameters, and how class element selector returns syntaxes and examples in this article.
  • You should now have a clear understanding of the concept and be able to apply it in your own code.