Friday, April 11, 2014

Downloading and including JQuery API library file in your HTML file


Step 1:

Click this link http://jquery.com/ to open the JQuery official website and click on the download button on the home page as shown in the following image :



Step 2:

Clicking the download button will open up a new page where you can see multiple download option,one for uncompressed version,second for production version etc etc for both (1.x & 2.x). But we recommend to download the " uncompressed,development JQuery " from version 1.x as shown below :



Step 3:

Now you are done with download and you can rename the downloaded JQuery file to any name you want.
After that to use the JQuery functionalites you need to include it in your HTML file so for that first create a simple HTML file like below comprising of all the basic syntax :

   <html>
      <head>
      </head>
   
      <body>
      </body>

   </html>

Step 4:

Now add a <script> tag betwen the <head> tag with the type & src attribute specifying the type of script and path of the file your are going to include respectively. For help refer to the code below :

   <html>
      <head>
          <script type="text/javascript" src="D:\Jquery.js"></script>
      </head>

      <body>
      </body>

   </html>

Step 5:

Ok now you are done with everything you need to create a interactive page. Now the final step is to test your JQuery and for that just copy and paste the below code to your notepad as save it in " .html " format and run your page if everything went well you will see the <div> element sliding up.

   <html>
      <head>
          <script type="text/javascript" src="D:\Jquery.js"></script>

          <script type="text/javascript">


                $(document).ready(function(){
                $("#btn").click(function(){
                    $("#d").slideUp("slow");
               });
          });

          </script>
      </head>

      <body>
       
       <div id="d"></div><br /><br />
       <input id="btn" type="button" value="Slide Up"></input>
       
      </body>

   </html>

All done, we hope the example worked and if you enjoyed our post please link our blog in your website or blog and if you any suggestions or problem with the above code please comment and do recommend us.

Happy Programming !

No comments :

Post a Comment