jQuery Hello World

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery is a new technology? Definitely not, i rather said jQuery is a new approach to simplify client side web development like the HTML traversing with DOM and Ajax manipulation. iQuery was created by John Resig, a young kid, please visit his website to figure it out how this jQuery guy look like ~

Let go through a jQuery Hello World example to understand how it works.

1. Download jQuery Library

jQuery is just a small 20+kb JavaScript file (e.g jquery-1.2.6.min.js), you can download it from the jQuery official website. .

2. HTML + jQuery

Create a simple HTML file (test.html), and include the downloaded jQuery library as normal JavaScript file (.js).


<html>
<head>
<title>jQuery Hello World</title>

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

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){
 $("#msgid").html("This is Hello World by JQuery");
});

</script>

This is Hello World by HTML

<div id="msgid">
</div>

</body>
</html>

3. Demo

The $() indicate a a jQuery syntax, and the following script means when DOM elements are ready or fully loaded, execute the jQuery script to dynamic create a message and append it to html tag id “msgid”.


$(document).ready(function(){
 $("#msgid").html("This is Hello World by JQuery");
});

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
25 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
23 Comment authors
Thamizh SelvanJohn HenckelMahacarterson2Guest Recent comment authors
newest oldest most voted
Guest
Guest
Guest

didnt work for me. I had to modify the one line to this:

Tim
Guest
Tim

Hi,

Pardon me, I am new. I have just copy and pasted the code “This is Hello by JQuery” not working in of the browsers.

Please help.

Maha
Guest
Maha

Nice posting…

trackback
Different Call between JavaScript and JQuery | JQuery

[…] Pre Tutorial – JQuery Hello World […]

trackback
jQuery Tutorials | J2EE Web Development Tutorials

[…] jQuery Hello World Example A simple jQuery hello world example to show how to download and include the jQuery library into a HTML page. […]

trackback
JQuery | hello, world! database
Bauke Scholtz
Guest
Bauke Scholtz

The script tag should go inside the head or body tag, not in between. This might fail on some browsers.

trackback
eclipse javascript files | DEEP in PHP

[…] on March 12, 2011 by News i ran the code found here http://www.mkyong.com/jquery/jquery-hello-world/ but eclipse doesnt seem to run the jquery code ? i placed the jquery.js file in all the directories […]

Pardeep
Guest
Pardeep

The above example is written for jquery-1.2.6.min.js, kindly check the jquery name you downloaded at your end and change accordingly else example will not work

Bangaru
Guest
Bangaru

rather other versions can also be used, check http://code.google.com/intl/da/apis/libraries/devguide.html#jquery

Atlantech Int. Cameroun
Guest
Atlantech Int. Cameroun

Hi,
I want to use strut and jQuery together and I’m trying to find a little tutorial that explain how to realy integrate jQuery in strut. Are there any helloworld tutorial for my porpose?

NZlife
Guest
NZlife

Really helpful for first time jQuery learner.

LANAS
Guest
LANAS

it dose not work with firefox!! 🙁

jyoti
Guest
jyoti

awesome…

praveenkumar Wani
Guest
praveenkumar Wani

Your examples are very helpful. Thanks a lot for these examples….

anonymous
Guest
anonymous

Your example helps me a lot… Thanks….!!!
This is Awesome…!!!

trackback
Hello jQuery - Antti-Ville Jokela

[…] Mkyong – jQuery Hello World […]

trackback
Hello jQuery | Samu Jukkola
Asha
Guest
Asha

As per another tutorial The type=”text/javascript” is not required for current browsers in the script for jquery. Can you tell when is it required ?

Isabella Cris
Guest
Isabella Cris

Hey Guys,
For advance JQuery developers I found below URL worthy. Here I found an excellent use of JQuery which I have never seen before.Please find below URL

http://e-weddingcardswala.in/e_cardscollection/841/
http://e-weddingcardswala.in/e_cardscollection/840/
http://e-weddingcardswala.in/e_cardscollection/837/
http://e-weddingcardswala.in/e_cardscollection/834/
http://e-weddingcardswala.in/e_cardscollection/833/
http://e-weddingcardswala.in/e_cardscollection/790/

I Hope this would be helpful for UI Developers.
Thanks.

curious beginner
Guest
curious beginner

how is jquery different from html in this example? they both are doing the same job!!

Squal Lionheart
Guest
Squal Lionheart

Best programming language in World Ranking System

carterson2
Guest
carterson2

Didn’t work for me, but putting file in new /scripts directory and modifying this line did work!

Thanks for posting!

John Henckel
Guest
John Henckel

Step 1 is bad advice. Do not host jquery yourself. see this post http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Thamizh Selvan
Guest
Thamizh Selvan

where to place the jquery.min.js file?