Create a Simple jQuery enabled page

By | September 17, 2018

Now we will create our simple jQuery enabled page. For our first jQuery example we’re going to keep things simple. What we will do is-

  • Include a reference of jQuery library
  • Then we will write an event handler. It will respond to the page loading in the browser window i.e. our event handler will fire the even when page is being loaded.
  • An alert will populate on the window that will say us that the event handler was called which means jQuery is working.

Before we write the code let’s see how the code will run

jQuery provides a way to run the code when the DOM of the page is ready which is called document.ready event. We write document.ready event is as follows-

$(“document”).ready(function(){
      //code goes here
});

Inside the event we will write our code.

Here $ is the jQuery object. By default jQuery uses $ as a shortcut of jQuery. So $(“document”).ready() means the ready event will occurs after the HTML document has been loaded. Inside the ready function we pass an anonymous function that will display the alert message when the page is being loaded. So this code will execute when the DOM of the page has loaded instead of waiting for all the page content finish downloading. Another advantage of this approach is that we can call this document.ready() functions for multiple times with individual functions we want to executed and jQuery will just chain each one together to be called in succession.

So let’s write the code-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>First jQuery-Enabled Page</title>
   <script type="text/javascript" src="../jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $("document").ready(function() {
           alert("The page just loaded!");
       });
   </script>
</head>

<body>

</body>
</html>

Here

+. First we referred the jQuery inside the <script></script> tag inside Head section.

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

+. Then inside another <script></script> tag we called $(“document”).ready() event and inside the event we declared an anonymous function and inside the function we called alert() function.

<script type="text/javascript">
       $("document").ready(function() {
           alert("The page just loaded!");
       });
</script>
20 Total Views 1 Views Today
Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org)
Certification Profile Link-
https://www.scrumalliance.org/community/profile/mhaque13

Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Category: 1.04-jQuery
Md. Mojammel Haque

About Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org) Certification Profile Link- https://www.scrumalliance.org/community/profile/mhaque13 Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Leave a Reply

Your email address will not be published. Required fields are marked *