<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var animal = document.getElementById("animal");
animal.οnclick=doClick;
animal.οnmοuseοut=out;
animal.οnmοuseοver=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.οnlοad=winready; //或者window.οnlοad=function(){winready();}
</scritp>
jquery用法:
<script type='text/javascript'>
$(document).ready(function(){
$('#load').css('display','none');
})
</script>
扫一扫
836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
