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,
<!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');
});
