How to select DOM elements using jQuery Selectors

jQuery selectors are an important part of the jQuery library and facilitate manipulation and interaction with HTML elements. We’ll show you the most commonly used selectors alongside some practical examples of jQuery selectors.

What are jQuery selectors?

jQuery selectors pick elements based on their attributes, classes, IDs, types, or positions in the DOM. It is also possible to combine multiple conditions to create complex selectors. After the objects are selected, you can perform actions such as adding event handlers with jQuery.on(), changing CSS styles, or reading element contents. The use of selectors is also useful in a CMS like WordPress. When working in WordPress with jQuery, it allows you to select and edit elements quickly and efficiently.

Tip

With webspace from IONOS you get access to dedicated storage space for your web projects. The Click&Build apps give you the possibility to create a website tailored to your needs after a 1-click installation.

How do you use selectors in jQuery?

The general syntax for using jQuery selectors is:

$(selector)
jQuery

Here, selector is the criterion by which you can select elements on your website. Combining selectors with functions like jQuery.ajax() or jQuery.each() also allows you to access selected DOM elements, retrieve data asynchronously, and perform looping operations on them. This allows you to easily display and update dynamic content on your website.

Tip

By integrating the IONOS API into your hosting projects, you can manage your work processes securely and efficiently. IONOS API documentation provides you with comprehensive information and supports you in realising the full potential of the API.

A list of the most important jQuery selectors

Here are some examples of the most commonly used selectors in jQuery:

Element selectors:

// Chooses all <p>-elements on the page 
$("p")
jQuery

Class selectors:

// Chooses all elements with the class "classname" 
$(".classname")
jQuery

ID-Selectors:

// Selects the element with the ID "elementID"
$("#elementID")
jQuery

Attribute selectors:

// Chooses all <input>-elemente with the attribute "type" and "text" 
$("input[type='text']")
jQuery

Hierarchical selectors:

// Chooses all <li>-elements which are direct children of <ul> elements
$("ul > li")
jQuery

Filter selectors:

// Selects the first <p> element on the page
$("p:first")
jQuery

In our jQuery tutorial you will learn how to include jQuery in your project and get a compact overview of selectors and their syntax.

An example for the use of jQuery selectors

In the following, we use jQuery selectors to select all <p> elements on a website and change their text contents:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("p").text("A new text for all paragraphs.");
            });
        </script>
    </head>
    <body>
        <p>First Paragraph</p>
        <p>Second Paragraph</p>
        <p>Third Paragraph</p>
    </body>
</html>
html

The $(document).ready() function ensures that the jQuery code is not executed until the DOM is fully loaded. We then use the $("p") selector to select all <p> elements on the page. Finally, the text() method changes the text content of all selected <p> elements to “A new text for all paragraphs.”.

Tip

Deploy Now from IONOS provides you with an easy-to-use solution to deploy your websites automatically via GitHub. In YAML files, you can change the actions-workflow according to what you need it to be. Information about visitor reach and growth, session duration and visit history is available in the free dashboard.

Was this article helpful?