JavaScript / jQuery CSS Styles
jQuery vs JavaScript
jQuery was made in 2006 by John Resig. Its purpose is to deal with problems between different web browsers and make it easier to control and change things on web pages, like handling events, animations, and using Ajax.
For over a decade, jQuery has been the most widely used JavaScript library globally.
Since JavaScript Version 5 (2009), many of the features provided by jQuery can be accomplished using just a few lines of regular JavaScript code.
Hiding HTML Elements
Conceal an HTML element:
Showing HTML Elements
Display an HTML Element:
Styling HTML Elements
Adjust the size of a text in an HTML element:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Get Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
$("#02").hide();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Hide HTML Elements</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>
<script>
document.getElementById("02").style.display = "none";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Show HTML Elements</h2>
<p id="01" style="display:none">Hello World!</p>
<p id="02" style="display:none">Hello Sweden!</p>
<p id="03" style="display:none">Hello Japan!</p>
<script>
$(document).ready(function() {
$("#02").show();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Show HTML Elements</h2>
<p id="01" style="display:none">Hello World!</p>
<p id="02" style="display:none">Hello Sweden!</p>
<p id="03" style="display:none">Hello Japan!</p>
<script>
document.getElementById("02").style.display = "";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p id="demo">Change the style of an HTML element.</p>
<script>
$(document).ready(function() {
$("#demo").css("font-size", "35px");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p id="demo">Change the style of an HTML element.</p>
<script>
document.getElementById("demo").style.fontSize = "35px";
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery