# 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()](https://www.ionos.com/digitalguide/websites/web-development/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](https://www.ionos.com/digitalguide/hosting/blogs/wordpress-jquery/), it allows you to select and edit elements quickly and efficiently.

Tip With [webspace](https://www.ionos.com/hosting/webspace "Rent Webspace at IONOS") from IONOS you get access to dedicated storage space for your web projects. The Click&amp;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:

```jQuery
$(selector)
```

Here, `selector` is the criterion by which you can select elements on your website. Combining selectors with functions like [jQuery.ajax()](https://www.ionos.com/digitalguide/websites/web-development/jquery-ajax/) or [jQuery.each()](https://www.ionos.com/digitalguide/websites/web-development/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](https://developer.hosting.ionos.com "IONOS Developer 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 realizing 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:**

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

**Class selectors:**

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

**ID-Selectors:**

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

**Attribute selectors:**

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

**Hierarchical selectors:**

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

**Filter selectors:**

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

In our [jQuery tutorial](https://www.ionos.com/digitalguide/websites/web-development/jquery-tutorial-introduction-and-first-steps/) 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
<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>
    <div class="hash d-none" hidden>hash_968cddda567cc4422e1ad1e3f608c886beef69ae</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</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](https://www.ionos.com/hosting/deploy-now "Automatic Deployments with IONOS") 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.


This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/jquery-selectors/](https://www.ionos.com/digitalguide/websites/web-development/jquery-selectors/) for AI/LLM consumption.