![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
一、函数：无参函数、带参函数、函数表达式。
带参函数的调用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用、闭包、DOM事件介绍</title>
</head>
<body>
<script type="text/javascript">
function getname(name){
return name;
}
var a=getname("张三")
document.write(a);//调用函数
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.无参函数的调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用、闭包、DOM事件介绍</title>
</head>
<body>
<script type="text/javascript">
function name(){
document.write('李四');
}
name();//调用函数
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.函数作为方法调用
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 第三章</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
</head>
<body>
<script type="text/javascript">
var abname={
a:"中国",//注意这里使用的是逗号
b:"北京",
abnamea:function(){
return this.a + this.b;
}
}
document.write(abname.abnamea());
document.write(abname.a);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.函数的闭包：闭包就是能够读取其他函数内部变量的函数，变量的作用域无非就是两种：全局变量和局部变量，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用、闭包、DOM事件介绍</title>
</head>
<body>
<script type="text/javascript">
function one(){
var x=50;
function two(){
var y=100;
document.write(x);
}
alert(y);
}
one();
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
二、DOM操作
获取元素有三种方式
方式1：var x=document.getElementById("id名");
方式2：var y=document.getElementsByClassName("类名")[i];注意这种获得的元素是一个数组，需要用[i]获得数组中的具体某个元素,document.getElementsByClassName中getElement后要加s
方式3：var z=document.getElementsByTagName("标签名");注意这种获得的元素是一个数组，需要用[i]获得数组中的具体某个元素。document.getElementsByTagName中getElement后要加s
获取/设置元素的内容如下：
var x=document.getElementById("in");//获取节点
var cen=x.innerHTML;//获取元素内容
document.write(cen);
x.innerHTML="我已经设置元素";//设置元素内容
var y=document.getElementsByClassName("box")[1];//注意getElementsByClassName中的Element后要加s
document.write("<br>获得到的属性值为"+y.getAttribute("value"));//获得元素的属性用getAttribute("属性值名")
y.setAttribute("value","点击!~");//设置元素属性值用getAttribute("属性值名","设置的属性值")
var z=document.getElementsByTagName("div")[0];//注意getElementsByTagName中的Element后要加s
document.write(z.innerHTML);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用、闭包、DOM事件介绍</title>
</head>
<body id="content">
<input type="text" name="" class="box">
<input type="button" name="" value="innerHTML" class="box">
<div id="inner" style="border: 2px solid red;width: 200px;height: 200px;text-align: center;margin-top: 10px;">php中文网!</div>
<div id="in">内容二</div>
<script type="text/javascript">
//获取元素有三种方式
//方式1：var x=document.getElementById("id名");
//方式2：var y=document.getElementByClassName("类名");注意这种获得的元素是一个数组，需要用[i]获得数组中的具体某个元素。
//方式3：var z=document.getElementByTagName("标签名");
//获取/设置元素的内容
var x=document.getElementById("in");//获取节点
var cen=x.innerHTML;//获取元素内容
document.write(cen);
x.innerHTML="我已经设置元素";//设置元素内容
var y=document.getElementsByClassName("box")[1];//注意getElementsByClassName中的Element后要加s
document.write("<br>获得到的属性值为"+y.getAttribute("value"));//获得元素的属性用getAttribute("属性值名")
y.setAttribute("value","点击!~");//设置元素属性值用getAttribute("属性值名","设置的属性值")
var z=document.getElementsByTagName("div")[0];//注意getElementsByTagName中的Element后要加s
document.write(z.innerHTML);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、实现图片轮播案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用js实现图片轮播</title>
<link rel="icon" type="image/x-ioc" href="static/images/favicon.ico">
<style type="text/css">
body{
background: #ccc;
}
div{
width: 900px;height: 450px;
margin:20px auto;
overflow: hidden;/*超过内容隐藏*/
position: relative;
}
img{
width: 900px;height: 450px;
}
p{
/*background: red;*/
width: 900px;height: 30px;
color: #fff;
position: absolute;z-index: 1000;bottom:0;left: 0
line-height: 30px;
text-align: center;
}
p span{
display: inline-block;
/*background-color: red;*/
background: rgba(254,254,254,0.6);
border-radius: 50%;
text-align: center;
width: 30px;height: 30px;
line-height: 30px;
cursor: pointer;/*实现鼠标小手*/
}
</style>
</head>
<body>
<div id="centent">
<a href=""><img src="static/images/1.jpg"></a>
<a href=""><img src="static/images/2.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></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>
</p>
</div>
<script type="text/javascript">
function change(x){
var cen=document.getElementById('centent');
var b=cen.getElementsByTagName('a');
//隐藏
for(var i =0;i <b.length;i++) {
b[i].style.display="none";
}
b[x].style.display="block";
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
实现tab切换图片案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现tab切换</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;/*清除a标签下划线*/
line-height: 30px;
display: inline-block;/*转变为行内块元素*/
}
ul{
list-style: none;
width: 300px;
margin: 4px 2px;
}
ul li{
float: left;
border: 0px solid;
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin:4px 1px 0px 1px;
background: rgba(40,41,35,0.2);
box-shadow: 0px 10px 100px #ccc;
}
li a:hover{
color: red;
}
ul li:hover{background-color:rgba(134,134,77,0.6);
cursor: pointer;
}
.tab{
width: 300px;
height: 40px;
margin: 20px auto;
}
#tab_img{
overflow: hidden;/*超出范围,其他图片自动隐藏*/
width: 400px;
height: 150px;
}
.tab img{
width: 400px;
height: 150px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li onmouseover="tab_ds(0)" class="start">美女</li>
<li onmouseover="tab_ds(1)">美男</li>
<li onmouseover="tab_ds(2)">不男不女</li>
<li onmouseover="tab_ds(3)">其他</li>
</ul>
<div id="tab_img">
<a href=""><img src="https://img.php.cn/upload/course/000/001/120/59e7018b107f1234.png" class="start"></a>
<a href=""><img src="http://www.php.cn/static/images/index_yunv.jpg"></a>
<a href=""><img src="http://www.php.cn/static/images/index_php_new4.jpg"></a>
<a href=""><img src="https://img.php.cn/upload/course/000/001/120/59edb17869f79684.png"></a>
</div>
</div>
<script type="text/javascript">
function tab_ds(x) {
var c=document.getElementById("tab_img");
var b=c.getElementsByTagName("a");
for (var i =0; i<b.length;i++) {
b[i].style.display="none";
}
b[x].style.display="block";
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例