jQuery tutorial for beginners with examples

Here we will discuss jQuery tutorial with a simple Hello World example so that beginners can understand how jQuery is used in programming.

jQuery tutorial for beginners with examples

In this section we will create a simple Hello World example using jQuery library that will help beginners understand how jQuery can be used within their programming and how does it works. But first a brief introduction about jQuery.

jQuery is a library that provides functions and methods to makes rich Ajax based application. Due to simple features and easy development, jQuery is very famous among developers, who use it to develop web 2.0 applications.

jQuery library is designed to keep code simple, concise and reusable. It can be used in all the web based applications irrespective of the technology.

jQuery library simplifies the programming in JavaScript and can be used to traverse and select tings from HTML pages. It can handle events, perform animation, and add the Ajax support in a web application.

jQuery library can be used along with JSP, Servlets, ASP, PHP, CGI and other languages.

jQuery Hello World example:

Here we will create out first Hello world example using jQuery, which will simply display "Hello World !! (display due to jQuery)" message in browser. It will help you understand how jQuery works and can be used in our programming.

To create your first program you need jQeury library. Download it from:

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

Save the jQuery library script file of around 70kb as "jquery-1.4.2.js".

Hello World Example

<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:

We used the jQuery library, which you downloaded by the following tag:

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

If you saved the library in another folder, you need to provide the relative path or you can save it in the same page you are saving the html page.

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)");});

Resource: