Element/Tag selector
FREE
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:
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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.
Turn Learning into Career Growth
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.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more