JS基础记录

来源：互联网发布：微信支付发卡平台源码编辑：程序博客网时间：2024/05/22 11:34

<script language="javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript">$(document).ready(function(){var animal = document.getElementById("animal");animal.onclick=doClick;animal.onmouseout=out;animal.onmouseover=over;function doClick(){this.src="十二生肖/tiger.gif";}function out(){this.src="十二生肖/pig.gif";}function over(){this.src="十二生肖/cow.gif";}});</script></head><body><input type="text" value="jinhua" id="Jason" /><input type="image" id="animal" src="十二生肖/dog.gif"/></body></html>

1、JS在正常情况下士按照从上到下的顺序执行的，所以如果没有特殊控制，document.getElementById("animal")获取的值为空，当然，如果把JS放在body之后，就不会了。

2、可以通过2种方法让JS即放在head里面，又能通过上面的方式拿到值

1)、window.onload：在html所有资源加载完毕后执行

2)、$(document).ready:在dom结构加载完后执行（记得加上<script language="javascript" src="jquery-1.4.2.min.js"></script>）

3、现在一般都是将JS另写一个文件，同时对于事件的监听操作应该提取出来，不要放在标签里面做

Demo:

说明：$(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完

所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。

补充：(两者的具体用法)

window.onload用法

<script type='text/javascript'>function winready(){    document.getElementByIdx_x.('load').style.display='none';}window.onload=winready; //或者window.onload=function(){winready();}</scritp>

jquery用法:

<script type='text/javascript'>    $(document).ready(function(){        $('#load').css('display','none');    })</script>