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, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

Leave a Reply

avatar
newest oldest most voted
Maha
Guest
Maha

Nice posting…

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.

Paras
Guest
Paras

You may not have the jQuery library in your machine. either download the jQuery library and give it path or use below line:

if you have jQuery libarary in your machine then use:

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

Thamizh Selvan
Guest
Thamizh Selvan

where to place the jquery.min.js file?

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/

carterson2
Guest
carterson2

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

Thanks for posting!

Guest
Guest
Guest

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

Squal Lionheart
Guest
Squal Lionheart

Best programming language in World Ranking System

curious beginner
Guest
curious beginner

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

Luciano Pinheiro
Guest
Luciano Pinheiro
This is just the minimum example (I got here just to remember sintaxe). This minimal example just add a text to a div. The only difference for raw HTML is that jquery is working on client side. So, client browser just changed that div. This is not a very usable example, though. We use jQuery to add behavior to HTML pages AFTER they are “downloaded” to browser. Some things you can do: – change colors of elements – hide and show elements – retrieve elements from other pages (the whole page or just a piece of HTML) and many many… Read more »
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.

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 ?

trackback
Hello jQuery | Samu Jukkola
trackback
Hello jQuery - Antti-Ville Jokela

[…] Mkyong – jQuery Hello World […]

anonymous
Guest
anonymous

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

praveenkumar Wani
Guest
praveenkumar Wani

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

jyoti
Guest
jyoti

awesome…

LANAS
Guest
LANAS

it dose not work with firefox!! :(

NZlife
Guest
NZlife

Really helpful for first time jQuery learner.

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?

Bangaru
Guest
Bangaru

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

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

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 […]

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.

name
Guest
name

It will work how ever . . . .

trackback
JQuery | hello, world! database
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
Different Call between JavaScript and JQuery | JQuery

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