jQuery Hello World alert

Develop jQuery Hello World alert example. This jQuery example shows how to use alert() function in jQuery.

jQuery Hello World alert

jQuery Hello World alert example

    

This section guides you  to create a program which display "Hello World" alert box using jQuery. This application will use the JavaScript alert() method to display the "Hello World" message.

In this example you will learn how to write JavaScript using jQuery. When user clicks on the button "Click Me", the alert message is displayed to the user.

The following method is used to attached the click event to the button:

$("#cl").click(function(){....})

The above code of jQuery handles the button click event and then executes the JavaScript defined in the curly braces{}. In the curly braces we have defined the JavaScript alert() method.

Hello world alert box example(HelloAlert.html)

<html>
<head>
<title>jQuery Hello World Alert box</title>
 
<script type="text/javascript" src="jquery-1.4.2.js"></script>
 
</head>
 <script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>

Here is the video instruction of running the example program - How to display alert message in jQuery?

Description of the program

For using jQuery script ,we write it inside <script> tag. The below code checks whether the page loading is finished (DOM elements are ready or fully loaded) and if page loading is finished then it executes the code in the block.

$(document).ready(function(){
// Your code here
});

The Html page contains a button named "cl", when click event is triggered on this element , it will display a alert box showing message "Hello World". The "alert()" function of jQuery creates a alert box having provided message.

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

When you click on button , it will display :




Download Source Code


See here to see online demo

Learn from experts! Attend jQuery Training classes.