Creating the first jQuery Script

Example 1

Create a program select.html which will illustrate the various selectors & actions

<html>
<head>
     <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
          //specify the client side scripting language and include the jquery library file
     </script>
     <script type = "text/javascript">
          $(document).ready(function()
          {
               $("button").click(function()
               {
                    $(this).hide();
               });
          });
     </script>
</head>
<body>
     <button> Let me Hide </button>
</body>
</html>


Output:

select html

A button will appear on the screen written 'Let me Hide'.

Example 2 : Hello World Program

<html>
<head>
     <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
          //jquery library
     </script>
     <script type = "text/javascript">
          $(document).ready(function()
          {
               $("p").click(function()
               {
                    alert ("Hello user!!! You clicked on the alert");
               });
          });
     </script>
</head>
     <body> <p> Click on this alert </p></body>
</html>


Output:
hellow world
When you click on “Click on this alert” an alert box is displayed with a message.

Custom Scripts

  • We can write custom codes in the custom JavaScript file.
  • This custom file is simple user defined file which can be included in any .html, as required.

Example : Create a mycommon.js script and save it in the folder

$(document).ready(function()
{
     $("p").click(function()
     {
          alert ("Hello user!!! You clicked on the alert");
     });
});

After this, create a .html file named helloworld.html and provide a reference of the custom script and the jQuery library.

<html>
     <head>
     <script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
          //jquery library
     </script>
     <script type = "text/javascript" src =”mycommon.js”>
          //custom script
     </script>
     </head>
<body> <p> Click on this alert </p></body>
</html>


Output:
hellow world
▲