一、函数调用的三种情况
1.作为一个函数来调用（不带参数）：利用函数名来调用
2.作为一个函数来调用（带参数）：利用函数传参进行计算并返回的调用
3.作为函数表达式来调用（带参/不带参）：将函数赋值给变量，可直接调用这个“变量函数”，并且可传参
二、函数作为方法调用
先取对象，再用对象取方法函数
三、闭包函数
函数嵌套，利用函数套函数的函数，闭包函数中的变量作用域为：子函数可以调用父级函数中的变量，父级函数无法调用子函数中的变量，只能用return返回值
四、HTML DOM
查找元素
1.通过id去找：document.getElementById('') 返回单个节点
2.通过Name属性去找：document.getElementsByName('') 返回Name集合
3.通过标签名去找：document.getElementsByTagName('') 返回标签集合
4.通过Class去找：document.getElementsByClassName('') 返回Class集合
获取/设置节点属性或内容
1.获取节点属性：node.getAttribute(属性名)
2.设置节点属性：node.setAttribute(属性名)
3.获取节点内容：node.innerHTML
4.设置节点内容：inner.innerHTML=''
实例
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="icon" href="images/lb/favicon.ico">
<style>
*{margin:0; padding:0;}
div{width:500px; height:300px; margin:0 auto; position:relative; overflow:hidden;}
img{width:500px; height:300px;}
p{width:500px; color:#000; text-align:center; position:absolute; left:0; bottom:10px; z-index:2;}
span{display:inline-block; width:30px; height:30px; line-height:30px; margin:5px; background:rgba(55,255,255,0.3); border-radius:15px; cursor:pointer;}
</style>
</head>
<body>
<div id='photo'>
<a href=""> <img src="images/lb/1.jpg" alt=""></a>
<a href=""> <img src="images/lb/2.jpg" alt=""></a>
<a href=""> <img src="images/lb/3.jpg" alt=""></a>
<a href=""> <img src="images/lb/4.jpg" alt=""></a>
<a href=""> <img src="images/lb/5.jpg" alt=""></a>
<p>
<span onclick='change(0)'>1</span>
<span onclick='change(1)'>2</span>
<span onclick='change(2)'>3</span>
<span onclick='change(3)'>4</span>
<span onclick='change(4)'>5</span>
</p>
</div>
<script type='text/javascript'>
function change(num){
var obj=document.getElementById('photo'); //定义对象，并找到某个范围
var obj_a=obj.getElementsByTagName('a'); //定义对象2，并在范围内找到需要改变的标签
for(var i=0; i<obj_a.length; i++){ //循环所找到的标签
obj_a[i].style.display='none'; //循环隐藏所找到的标签
}
obj_a[num].style.display='block'; //点击触发对应标签的显示
}
</script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切换效果</title>
<style>
#div11{width:600px; height:400px; margin:100px auto; border:2px solid #ccc; overflow:hidden;}
div div{width:196px; height:40px; background:pink; text-align:center; float:left; font-size:22px; padding-top:10px; border:2px solid #ccc; cursor:pointer;}
img{width:600px; height:360px;}
</style>
</head>
<body>
<div id='div11'>
<div onmouseover='change(0)'>人 像</div>
<div onmouseover='change(1)'>风 景</div>
<div onmouseover='change(2)'>字 画</div><br>
<img src="images/timg (1).jpg" alt="">
<img src="images/timg.jpg" alt="">
<img src="images/timg (2).jpg" alt="">
</div>
<script>
function change(num){
var obj=document.getElementsByTagName('img'); //获取图片节点
for (var i=0; i<obj.length; i++) { //循环所有图片
obj[i].style.display='none'; //将对应图片隐藏
}
obj[num].style.display='block'; //将被触发的图片显示
}
</script>
</body>
</html> -->运行实例 »
点击 "运行实例" 按钮查看在线实例