Introduction:
Hey there, fellow developers! 👋 I’m Vishnu, your friendly full stack developer and programming trainer at “CSLAB Software Development and Training Institute” in Sikar. Today, I’m excited to kick off a series of posts on jQuery, a powerful JavaScript library that simplifies HTML document traversal and manipulation.
Getting Started:
Let’s dive right in with a hands-on example. Create a file named hello.html with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<div>
<p id="hello">Some random text</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#hello').text('Hello, World!');
});
</script>
</body>
</html>
Now, open this file in your web browser, and voila! You’ll be greeted with a page proudly displaying the text: Hello, World! 🚀
😎 Explanation of Code:
Now, let’s break down the magic behind the scenes.
The line <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> is your ticket to jQuery wonderland. This includes the jQuery library from the CDN, introducing the globally recognized $ alias for the jQuery function and namespace.
Key Points:
- Ensure jQuery is loaded before any other scripts or libraries that might depend on it.
- Use
$(document).ready()to defer a function until the DOM is ready.
The heart of our script is:
$(document).ready(function() {
$('#hello').text('Hello, World!');
});
Here’s the breakdown:
- Selecting the Element:
$('#hello')targets the element with the id attribute equal tohello. This is our selector in action.
- Manipulating the Text:
.text('Hello, World!')sets the text inside the selected element to, you guessed it, Hello, World!.
By following these simple steps, you’ve just unleashed the power of jQuery to dynamically update your HTML content.
Stay tuned for more jQuery wisdom in the upcoming posts! 🚀 Happy coding! 🖥️💻✨
