The execution of jQuery is not the same way as normal javascript execution. Javascript will execute whenever it loads irrespective of total HTML page loaded or not.
But, jQuery provides different functionality. The code inside the jQuery will execute after HTML page load completion.
Here I am giving simple example where you can compare the execution of jQuery with normal javascript execution.
I included the jQuery Framework file jQuery.js.
<html>
<head>
<title>This is first jquery example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('This is from head tag using jquery document ready event');
});
alert('This is from head tag with out using jquery document ready event');
</script>
</head>
<body>
<script type="text/javascript">
alert('This is from body tag');
</script>
</body>
</html>
In the above code, we have three javascript alerts. First one is in <body> tag, second one is inside the <head> tag and third one is inside the <head> tag with jQuery functionality.
Whenever you open this HTML file in browser, you will get first alert as "This is from head tag with out using jquery document ready event", second as "This is from body tag" and after page load completion you will get thrd alert as "This is from head tag using jquery document ready event" which is from jQuery.
That means, whenever page loads first javascript code in <head> tag will execute. But jQuery as ready function, it will wait untill page load completion. So, normal javascript code in <head> tag will execute first after that code in <body> tag will executes. After page load completion, jQuery code will execute.
Conclusion:
From the above, jQuery is not only light weight and also it will wait untill page loads. So, what ever you write code using jQuery that will execute after page loads.
Download source code: first jQuery Exp.zip (35.60 kb)