Home Ajax Jquery jQuery Hello World alert

Related Tutorials


 
 

Share on Google+Share on Google+

jQuery Hello World alert

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

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>

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.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 2, 2010

Related Tutorials

Discuss: jQuery Hello World alert  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:6
Mr.Green
June 29, 2011
Just for one question

Why the script tag is not in the head tag ,
Patch
September 23, 2011
YnFMepgMPhmLSVB

Just do me a favor and keep wtriing such trenchant analyses, OK?
pradeep
December 1, 2011
alert jquery

good post thank u
thainese victoria
February 3, 2012
jquery samples for beginners can be clear

can u give me the exact learning for jquery?
hello
August 30, 2012
hello

hello world
surbhi mathur
December 4, 2012
alertbox value for dynamic data

Hiee....I am working on project in which i want by click on particular student name then alert box would be open with its particular details.Can anyone help me with the code.?? thanx
DMCA.com