window.onload 只能绑定一条指令
window.onload = function(){
prepareGallery();
}
接下来封装一个函数，如果在代码变的复杂的时候，无论打算在页面加载完毕时执行多少个函数，只要多写一条语句就可以了。
//封装一个公共调用方法
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload= func;
}else{
window.onload =function (){
oldonload();
func();
}
}
}
//只需要一条即可
addLoadEvent(prepareGallery);
整体实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>windowonload封装</title>
<style type="text/css">
body{
font-family: "Helvetical","Arial","serif";
background-color:#ccc;
color:#333;
margin: 1em 10%;
}
a{
font-weight: bold;
text-decoration: none;
}
img{
display:block;
clear: both;
}
li{
float:left;
padding:1em;
list-style:none;
}
</style>
</head>
<body>
<p id="description">hello</p>
<ul id="imagegallery">
<li><a href="image/01.png" title="this is one">red</a></li>
<li><a href="image/02.png" tilte="a is tow">cooffe</a></li>
<li><a href="image/IMG_5030.JPG" title ="this is img">block</a></li>
</ul>
<script type="text/javascript">
function showPic(e){
var soure = e.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute("src",soure);
}
//childNodes 获取一个任何元素的所有子元素
// function countChirldNodes(){
// var body_elemnt = document.getElementsByTagName('body')[0];
//获取body全体子元素的长度
// alert(body_elemnt.childNodes.length);
// }
function countChirldNodes(){
//获取body
var body_elemnt = document.getElementsByTagName('body')[0];
console.log(body_elemnt);
alert(body_elemnt.nodeType);
}
//nodeValue
function coutnodeValue(e){
// 将获取的title保存到新创建变量
var text =e.getAttribute('title');
//获取p的ID 并保存到新创建的变量
var description = document.getElementById("description");
//点击时，将title的值给到P的text (firstChild是第一个，lastChild是最后一个)
description.firstChild.nodeValue =text ;
}
// window.onload = function(){
// prepareGallery();
// }
//优化方式将html的onclick放到js中调用
function prepareGallery(){
//判断是否支持getElementsByTagName
if(!document.getElementsByTagName) return false;
//判断是否支持getElementById
if(!document.getElementById) return false;
//判断点击的值是否与获取的相同
if(!document.getElementById('imagegallery')) return false;
var gllery =document.getElementById('imagegallery');
var links = gllery.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
showPic(this);
return false;
}
}
}
//封装一个公共调用方法
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload= func;
}else{
window.onload =function (){
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
</script>
</body>
</html>
网友评论