How to find all paragraph elements using jQuery ?

Last Updated : 14 Apr, 2021

Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the element's name.

Syntax:

$("element name")

Approach:

First create an HTML page and write some content in the <p> elements.
With the help of jQuery, select all the paragraph elements.
Apply some CSS property to the <p> element to see the change. You may use the .css() method to apply CSS property.

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <style>
        body {
            text-align: center;
            font-size: 30px;
        }

        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("background-color", "green");
            });
        });
    </script>
</head>

<body>

    <h2 style="color:green">
        GeeksForGeeks
    </h2>

    <p>This is a paragraph.</p>

    <p>This is another paragraph.</p>

    <button>
        Click here to find all 
        paragraph elements.
    </button>
</body>

</html>

Output:

Before clicking the Button:

After clicking the Button:

Explanation: From the above example, you can notice that after clicking the button, the background color of every paragraph element got changed. Using the selector, we have selected all the paragraph elements, and then use .css() method to set the styles for all the paragraph elements.

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <style>
        body {
            text-align: center;
            font-size: 20px;
        }

        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("background-color", "lightgreen");
            });
        });
    </script>
</head>

<body>
    <h2 style="color:green">
        GeeksForGeeks
    </h2>
    
    <h3>Database</h3>

    <p> 
        Database is a collection of inter-related 
        data which helps in efficient retrieval,
        insertion and deletion of data from 
        database and organizes the data in the 
        form of tables, views
    </p>

    <h3>Operating System</h3>

    <p>
        An operating system acts as an intermediary 
        between the user of a computer and computer 
        hardware.
    </p>

    <button>
        Click here to find all 
        paragraph elements.
    </button>
</body>

</html>