函数的调用、闭包、HTML DOM、tab图片切换-2019年3月27日

一、函数：无参函数、带参函数、函数表达式。

带参函数的调用：

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20190404002737.png

实现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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

实例

实例

实例

实例

实例

实例

相关文章