How to link jQuery in HTML page?

jQueryWeb DevelopmentFront End Technology

To link a separate js file in HTML is quite an easy task. We will see here how to link jQuery in an HTML web page. The linking code comes inside the <head> tag.

Here’s our HTML file, which links to a jQuery file new.js,

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
          height: 100px;
          width: 100px;
          background-color: red;
          border-radius: 5px;
          border: 2px solid blue;
          margin-left: 50px;
          margin-top: 50px;
          display: none;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="new.js"></script>
   </head>
   <body>
      <div></div>
   </body>
</html>

Here’s new.js file, with the fadeIn() method, which changes the opacity, for selected elements, from hidden to visible. It is to specify the speed of the fading effect, which can be slow or fast.

$(document).ready(function() {
  $('div').fadeIn('slow');
});


raja
Published on 05-Dec-2017 18:07:19
Advertisements