Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Ajax Jquery jQuery Hello World

Related Tutorials


 
 

Share on Google+Share on Google+

jQuery Hello World

Advertisement
Learn how to develop jQuery Hello World example.

jQuery Hello World example

     

This section we are going to create our first jQuery application called "Hello World jQuery". This application will simply display "Hello World !! (display due to jQuery)" message in browser.

After completing the example you will be able include the jQuery library in your application and use it to do simple functions.

Let's start developing the Hello World application in jQuery.

Video Tutorial of jQuery Hello World.

Setting up jQuery

For start , we require the jQuery library. You can get it using the following link :

http://code.jquery.com/jquery-1.4.2.js

When you click on the following link it will open a page containing jQuery library script. This file is around 70kb.You need to save this as "jquery-1.4.2.js". Now we are ready to use jQuery inside your html page.

Hello World Example(HelloWorld.html)

<html>
<head>
<title>jQuery Hello World</title>
 
<script type="text/javascript" src="jquery-1.4.2.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 $("#flag").html("Hello World !! (display due to jQuery)");
});
 
</script>
<body>
<font color=red> 
Hello World !! (display due to HTML)
</font>
<font color=blue>
<div id="flag">
</div>
</font>
</body>
</html>

Description of the program

The first and most important thing is to include jQuery library  as:

<script type="text/javascript" src="jquery-1.4.2.js"></script>

If you are using the above tag as it is , you need to save the "jquery-1.4.2.js" in the same folder in which you saved your html page. You can also save it in another folder but in that case you need to provide the relative path.

Look precisely the below code :

<script type="text/javascript">
 
$(document).ready(function(){
 $("#flag").html("Hello World !! (display due to jQuery)");
});
 
</script>

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 code given below set the message at div "flag" in html form :

$("#flag").html("Hello World !! (display due to jQuery)");});

OUTPUT
 
When page loaded it will show :

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Advertisements

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   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:5
Obaid
January 8, 2012
thanks

u have put in ur porgram wat i need i love to do this porgram this is also my first porgram i found great easines to do this ..thanks gud work :)
surekha
March 7, 2012
doubt in jqurey hello world

I copied and Pasted your code but I didnot get your answer. I get only "Hello World !! (display due to HTML)"; I did not get "Hello World !! (display due to jQuery)". pls help me What should i do
HIREN DHOLARIYA
February 27, 2012
jqury

please send to exmple of jquery or send link
sivakumar
June 7, 2012
Need Help for adding jquery.js in app

Hi All, I have downloaded jquery.js in my E:\javascript folder <script type="text/javascript" src="E:\\javascript\jquery.min.js"> i am not getting any jquery output. May be there is a problem of adding jquey library... can any body help.. advance Thanks: M.sivakrishna
mohit
August 16, 2012
about this answer

vary nice thanks for this answer...........
DMCA.com