jQuery Hello World

JQuery stands as the preeminent JavaScript Library, renowned for simplifying a wide array of standard JavaScript operations within HTML pages. As a potent JavaScript API, jQuery empowers users to effortlessly execute diverse actions. However, it's vital to note that jQuery's capabilities are utilized through JavaScript, underscoring the necessity of a robust command over JavaScript for comprehending, organizing, and effectively troubleshooting code.

A "Hello World!" program is a basic code snippet that displays the text "Hello World!" on the screen. This uncomplicated program is frequently employed as an initial introduction to programming for beginners. In the case of the "Hello World!" example under discussion, the program utilizes a message box to showcase the "Hello World!" message.

$(document).ready(function(){ $("#myButton").click(function(){ alert("HELLO WORLD!!"); }); });
<button id="myButton">Click Here</button>
run this source code Browser View
Full Source
<html> <head> <title>Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myButton").click(function(){ alert("HELLO WORLD!!"); }); }); </script> </head> <body> <button id="myButton">Click Here</button> </body> </html>
Explanation:

Adding jQuery to Your Web Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The above line shows how to include jQuery from a CDN, like Google.

Document Ready Event

$(document).ready(function(){ });

Here $() indicates jQuery syntax and is used to define jQuery part. $(document).ready() method get called when document is loaded.

$("#myButton").click(function(){ alert("HELLO WORLD!!"); });

In this scenario, a jQuery selector has been employed. The expression $(#myButton) functions to identify the DOM element with the corresponding ID, specifically targeting a button element. When this button is clicked, the associated click function is invoked. Within this function, an alert function is invoked, prompting the display of the message "HELLO WORLD!!".

Conclusion

In jQuery's Hello World!" example, " a jQuery selector is used to target a button element identified by the ID "#myButton." Upon clicking this button, a click function is triggered, which subsequently invokes an alert displaying the message "HELLO WORLD!!". This basic demonstration showcases the utilization of jQuery for interactivity and event handling.






Related Topics
  1. What is jQuery?
  2. How jQuery Works
  3. jQuery Fundamentals
  4. What is $(document).ready() method in jQuery
  1. jQuery method chaining