Element/Tag selector | jQuery Selectors

Overview

When dealing with JavaScript, you will frequently need to locate and modify certain page content. 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 a breeze. jQuery Selectors can be categorized according to their application. Let's take a look at some of the most popular selectors.

About Elements/tags used in HTML

HTML elements have opening tags to closing tags and the content in between the tags. Here are the examples of the element selector used in HTML:

Nested HTML elements

HTML elements are capable of being nested (this means that elements can contain other elements). Each HTML document consists of nested HTML elements.

The sample below comprises four HTML elements (<html>, <body>, <h1>, and <p>).

Example code:

Explanation:

The root element is the <html> element, which defines the whole HTML document. It begins with <html> and ends with </html> tags.

Then, within the <html> element, there is a <body> element:

The <body> element defines the body of the document. It has two tags: <body> and </body>.

Then, within the <body> element, there are two more elements: <h1> and <p>:

A heading is defined using the <h1> element. It has an <h1> start tag and an <h1> end tag:

A paragraph is defined by the <p> element. It has a <p> start tag and a </p> end tag:

Empty HTML Elements

HTML elements that have no content are referred to as empty elements. The <br> tag indicates a line break and is an empty element that lacks a closing tag.

Example:

HTML is not case sensitive

HTML tags are not case sensitive: <P> and <p> have the same meaning.

Although the HTML standard does not require lowercase tags, the W3C promotes them in HTML and requires them in tougher document types such as XHTML.

Introduction to jQuery Element Selector

jQuery is a JavaScript library that is open source that simplifies 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 jQuery element selector is used to choose and alter HTML elements based on their names.

Syntax

The jQuery element selector chooses elements based on their names.

Syntax:

Example:

All <p> elements are hidden when a user clicks a button in the following code.

When the user clicks a button, the paragraph tags will be hidden.

Parameters Used

The parameters used in jQuery element selector or tag selector are:

Tagname - Any common HTML tag name, such as div, p, em, img, li, and so on.

What does it Return?

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

Examples with Code

Let's understand the working of jQuery element selectors in detail with the help of an example.

$('p') - Selects all elements in the document with tag name p.
$('div') - Selects all elements in the document with the tag name div.

The following example would pick all divisions and apply the color yellow to their backgrounds.

Conclusion

In this article, we have learned how jQuery selectors operate, what jQuery element selector means, its syntax, and parameters, and how 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.