The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); }
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using “window.onload” in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, here comes jQuery...Write Less, Do More, JavaScript Library.
window.onload = function(){ alert("welcome"); }
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using “window.onload” in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, here comes jQuery...Write Less, Do More, JavaScript Library.
1: <HTML>
2: <head>
3:
4: <!--download jquery.js and use the same version.
here i used "jquery-1.2.6.min.js"-->
5: <script type="text/javascript"
src="jquery-1.2.6.min.js"></script>
6:
7: <script type="text/javascript">
8:
9: //Mandatory function to start jquery on load.
10: $(document).ready( function() {
11:
12: //below line will apply style to all paragraph so
this should come first.
13: //Try moving this line below the paragraph by id tag
style and see the difference.
14: $("p").css( {color: "yellow", background: "green"} );
15:
16:
17: //Firsr and second are the name of the paragraph.
18: $("#First").css( {color: "red",
background: "yellow"} );
19: $("#Second").css( {color: "white",
background: "black"} );
20:
21: //another function to play around the anchor <a> tag
22: $("a").click(function(event)
23: {
24: alert("Welcome to asheej.blogspot.com");
25:
26: //comment the above single line and uncomment below
three line and see what JQyery can do.
27:
28: // alert("As you can see, the link no longer took
you to jquery.com");
29: // event.preventDefault();
30: // $(this).hide("slow");
31:
32: }
33: );
34:
35: });
36: </script>
37:
38: <head/>
39:
40: <BODY>
41:
42: <DIV style="border: 3px solid Green;">
43: <A href= "http://asheej.blogspot.com/">Google</a>
44: </DIV>
45:
46: <P id="First">This is First paragraph</p>
47: <P id="Second">This is Second paragraph</p>
48: <P>This is Third paragraph</p>
49: <P>This is Fourth paragraph</p>
50:
51: </BODY>
52: </HTML>
No comments:
Post a Comment