JQuery was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.
Code (Finding HTML Elements by Id)
Output
Finding HTML Elements by Id
Hello World!
The text from the id01 paragraph is: Hello World!
Code (Finding HTML Elements by Class)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Finding HTML Elements by Class</h2>
<p class="fruit">Apple</p>
<p class="fruit">Banana</p>
<p class="fruit">Orange</p>
<p id="demo"></p>
<script>
var myElements = $(".fruit");
var result = "The jQuery Elements are:<br>";
for (var i = 0; i < myElements.length; i++) {
result += myElements[i].innerHTML + "<br>";
}
$("#demo").html(result);
</script>
</body>
</html>
Output
Finding HTML Elements by Class
Apple
Banana
Orange
The jQuery Elements are:
Apple
Banana
Orange
Styling in jQuery (jQuery CSS)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Styling HTML</h2>
<p id="p01">Hello World!</p>
<p id="p02">Hello Sweden!</p>
<p id="p03">Hello Japan!</p>
<p id="demo1">demo1</p>
<p id="demo2">demo2</p>
<script>
document.getElementById("p02").style.display = "none";
$("#demo1").css("font-size", "15px");
$("#demo2").css("font-size", "35px");
</script>
</body>
</html>
Output
Styling HTML
Hello Sweden!
Hello Japan!
Demo1
Demo2