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=
</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=
</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>
|
Output:
- Before clicking the Button:
- After clicking the Button:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
14 Apr, 2021
Like Article
Save Article