Train Smart. Work Smarter.
jQuery
jQuery is a popular open-source JavaScript library that simplifies interacting with the HTML Document Object Model (DOM), event handling, animations, and Ajax. It essentially makes working with JavaScript in web development much easier.
Here’s a basic example to illustrate what jQuery can do:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>
In this example:
- We include the jQuery library from Google’s CDN in the
<head>section. - Inside the
<script>tag, we use$(document).ready(function() { ... })which ensures the code executes only when the document is fully loaded. - We use
$("p")to select all<p>elements on the page. - We attach a
clickevent handler to the selected paragraphs. Whenever a paragraph is clicked, the function within theclickmethod gets executed. - Inside the click function,
$(this)refers to the specific paragraph that was clicked. We use the.hide()method to hide the clicked paragraph.
Running this code will display three paragraphs on the webpage. Clicking any paragraph will make it disappear.