Skip to main content

jQuery Hello World example

Hello World jQuery Application

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

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

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

Setting up jQuery

Click on the following link to open a page containing the jQuery library script. This file is around 70KB. 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 the jQuery library as:

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

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

Let's look at the code precisely:

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

To use jQuery script, we write it inside the <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, it executes the code in the block.

$(document).ready(function(){
  // Your code here
});

The code given below sets the message in the div with id "flag" in HTML form:

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

Comments

Post a Comment

Popular posts from this blog

Handling Change Events in jqGrid

Handling Change Events in jqGrid In this tutorial, we'll explore how to handle the change event in jqGrid to dynamically update another column based on the selected value. This approach is useful when you need to update related data based on user selections. Example Scenario Let's say we have a jqGrid table with two columns: Country and State. When the user selects a country, the State column should dynamically update to show the relevant states for the selected country. Implementation We'll use the dataEvents option in the colModel configuration to handle the change event. HTML Structure First, let's set up our basic HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H...
5 comments
Read more

Handling Row Selection in jqGrid with jQuery

Handling Row Selection in jqGrid with jQuery The example below specifies the action to take when a row is selected in a jqGrid: var lastSel; jQuery("#gridid").jqGrid({ ... onSelectRow: function(id) { if(id && id !== lastSel) { jQuery('#gridid').restoreRow(lastSel); lastSel = id; } jQuery('#gridid').editRow(id, true); }, ... }); Explanation This script sets up a jqGrid with a custom action for when a row is selected. Here’s a step-by-step explanation: var lastSel; : A variable to store the last selected row ID. jQuery("#gridid").jqGrid({ ... }); : Initializes the jqGrid on the element with ID gridid . onSelectRow: function(id) { ... } : Defines a function to execute when a row is selected. ...
2 comments
Read more

Persisting jqGrid State with Cookies

Persisting jqGrid State with Cookies jqGrid is an excellent jQuery plugin for displaying a grid. To enhance user experience, we added some filter possibilities and used jQuery to update the URL where data was fetched from. However, when users navigated away from the grid and returned, it would reset to its start position, losing any filtering or sorting they had set. To solve this, we needed to store the user's selections. Here are two JavaScript functions that achieve this using cookies: function saveGridToCookie(name, grid) { var gridInfo = new Object(); name = name + window.location.pathname; gridInfo.url = grid.jqGrid('getGridParam', 'url'); gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname'); gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder'); gridInfo.selrow = grid.jqGrid('getGridParam', 'selro...
Post a Comment
Read more