jQuery ID Selector - Scaler Topics

Overview

When working with JavaScript, you will frequently find yourself needing to locate and edit some content on the page. In these circumstances, you will need to employ jQuery's selector support. jQuery makes it very simple to find page elements based on their types, values, attributes, and so on.

These elements are based on CSS selectors, and after some practice, you will notice that finding elements in the pages is a piece of cake. Different sorts of jQuery selectors can be classified based on their application. Let's look at some of the most commonly used 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 simplifies HTML document traversal and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript programming, to name a few things.

The element to be selected will have an id specified by the #id selector. It should not start with a number, and the id property must be unique within a page, meaning it can only be used once.

Syntax

Throughout a document, just one instance of each id value may be used. If the same ID has been allocated to more than one element, searching using that ID will only return the first matched element in the DOM.

This behavior, however, should not be relied on; a document with multiple elements with the same ID is invalid. You must use backslashes to escape any special characters, such as colons or periods, that may be present in the ID.

Let’s have a look at the simple syntax as follows:

Parameters

An ID to check for, as supplied by an element's id attribute. This selector's parameters are described in detail below.

elementid - A unique identifier for an element. If the id contains any special characters, such as periods or colons, such characters must be escaped with backslashes.

Returns

Before declaring an element to be a match, jQuery makes a second check when a selector, such as h2#pageTitle, is added to the jQuery id selector.

When you call jQuery() (or $()) with an id selector as an input, you'll get a jQuery object with a collection of either zero or one DOM element. Let’s have a brief look at the selector mechanism and how it returns the value in detail.

jQuery selector mechanism: The jquery selector $("..") is used to select matching elements.

Return value: It always returns a jquery object with an array-like length parameter.

Use the method on the returned jquery object: Jquery methods might be invoked on the object and applied to the items that were chosen.

By using the index, you may get to the original element: The selected elements are stored as properties of the object, and their property names are index numbers beginning with 0, so they can be retrieved by index beginning with 0. After obtaining the original element, you can treat it as if obtained by documentgetElementXxx().

Wrap a jQuery object around an original element: You can wrap the original element into a jQuery object by executing $(originalEle) and then calling jQuery methods on the wrapped object.

Examples

Here are the examples of syntaxes that return the element or the division:

$("#myid") - returns a single element with the id myid.

$("div#yourid") - returns the division with the given id yourid.

The examples shown above will use the jQuery id selector to select the HTML div element and change the background color of the element to yellow.

Conclusion

In this article, we learned how jQuery selectors operate, what jQuery element ID selector means, its syntax and parameters, and how the ID element selector returns with syntaxes and examples.
You should now have a clear understanding of the concept and be able to implement it in your own code.