Uncategorized

Lesson 1 – Using JQuery

There are a couple of ways to include jQuery in the document. You can locally install jQuery in your development folder or you can use a Content Delivery Network to directly include the jQuery code in your HTML document.

Local Installation

You have to download jQuery for local installation. The following is the complete procedure.

  • Go to the home page of jQuery and Click Download jQuery.
  • Now download jQuery’s latest version which is jQuery 3.4.1 in our case.
  • Now go to your “downloads” folder and find the jQuery file.
  • Now place the file in your development directory. The name of the file should be something like jQuery-3.4.1.min.js.

It is now time to include the jQuery file in your HTML document. Here is how it is done.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Including jQuery</title>
    [block]1[/block]
</head>
<body>
    
</body>
</html>

You have successfully installed jQuery in your directory. We can also write a quick function to check whether or not jQuery is working.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Including jQuery</title>
    [block]2[/block]

    
        $(document).ready(function() {
           document.write("Hello World!");
        });
     
</head>
<body>
    
</body>
</html>

If you get the following as an output, jQuery is well and truly working.

Installing jQuery through Content Delivery Network (CDN)

A CDN enables you to directly include jQuery in your HTML document. You can use content deliverer either by Google or Microsoft to include jQuery through CDN. In your course, we are going to use one delivered by Google.

  • Go to developers.google.com and click jQuery from the right side menu.
  • Now copy the link for the latest version of jQuery.
  • Now simply paste the link in the head<head></head> tag of your HTML document.

We write the same function once again to check whether or not jQuery has been successfully installed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Visual Effects</title>
    [block]4[/block]

    
      $(document).ready(function() {
         document.write("Hello World!");
      });
   
</head>
<body>
  
</body>
</html>

You will get the following output which means jQuery has been installed successfully.

In the next lesson, we will study basic jQuery concepts.