学习周记 Week9

最新推荐文章于 2021-06-26 23:27:46 发布

Daisy47199390

最新推荐文章于 2021-06-26 23:27:46 发布

阅读量119

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/117981865

版权

学习周记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习周记 Week9

1.学习目标
2.学习内容
3.练习

1.学习目标

掌握DOM事件

2.学习内容

2.1 onload 和 onunload 事件

onload：进入页面
onunload：离开页面

*onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
**onload 和 onunload 事件可用于处理 cookie

例：
简单的网页弹窗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

运行结果：
运行结果1
当修改网页信息后：
判定结果不为真
运行结果：
运行结果2

2.2 onchange 事件

onchange 事件常结合对输入字段的验证来使用
例：
当你离开输入框后，函数将被触发，将小写字母转为大写字母
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

2.3 onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
例：
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

前：

后：

2.4 onmousedown、onmouseup事件

当点击鼠标按钮时，会触发 onmousedown 事件，
当释放鼠标按钮时，会触发 onmouseup 事件
例：
鼠标按下时更换字体背景色，抬起时还原默认颜色
代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title>
<style>
 .xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
  function downClick(){
    var dd=document.getElementById("dd");
dd.style.background="red";
  }
  function upClick(){
    var dd=document.getElementById("dd");
dd.style.background="#abcdef";
  }
</script>
</head>
<body>
  <div id="dd" onmousedown="downClick();" onmouseup="upClick();" class="xuexi"></div>
</body>
</html>

前：

后：

2.5 事件冒泡/捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 < p> 元素插入到 < div> 元素中，用户点击 < p> 元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： < p> 元素的点击事件先触发，然后会触发 < div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： < div> 元素的点击事件先触发，然后再触发 < p> 元素的点击事件。

例：
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

点击段落1
在这里插入图片描述
点击段落2

3.练习

3.1 全选、反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			window.onload = function(){
				selAll = document.getElementById("selAll");
				hobbys = document.getElementsByName("hobby");
				fx = document.getElementById("fx");
				
				//全选事件
				selAll.onclick = function(){
					//全选
					if(selAll.checked == true){
						for (var i=0;i<hobbys.length;i++) {
							hobbys[i].checked = true;
						}
					}else{
						for (var i=0;i<hobbys.length;i++) {
							hobbys[i].checked = false;
						}
					}
				}
				
				
				//反选
				fx.onclick = function(){
					
					for (var i=0;i<hobbys.length;i++) {
							var b = hobbys[i];
							if(b.checked == true){
								b.checked = false;
							}else{
								b.checked = true;
							}
						}
				}
				
			}
			
			
			
		</script>
	</head>
	<body>
		<input type="checkbox" name="" id="selAll" />全选
		<button id="fx">反选</button>
		<br>
		<input type="checkbox" name="hobby" />demo1
		<input type="checkbox" name="hobby" />demo2
		<input type="checkbox" name="hobby" />demo3
		<input type="checkbox" name="hobby" />demo4
	</body>
</html>

运行结果：
在这里插入图片描述

3.2 循环提示框

3.2.1 循环出现提示框5次

代码：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
window.onload=function ()
{
	var aBtn1=document.getElementById('button1');
	aBtn1.onclick=function ()
	{
		var i=0;
		while(i<5)
		{
			alert('这是第'+(i+1)+'次弹出');
			i++;
		}
	}
	
	var aBtn2=document.getElementById('button2');
	aBtn2.onclick=function ()
	{
		var aSpn3=document.getElementById('div3').getElementsByTagName('span');
		for(var i=0;i<aSpn3.length;i++)
		{
			aSpn3[i].style.background='yellow';
		}
	}
	
	var aBtn3=document.getElementById('button3');
	aBtn3.onclick=function ()
	{
		var aDiv3=document.getElementById('div4').getElementsByTagName('div');
		if(aDiv3[0].style.background=='yellow')
		{
			var i=0;
			while(i<aDiv3.length)
			{
				aDiv3[i].style.background='';
				aDiv3[i].style.height='';
				aDiv3[i].style.width='';
				i=i+1;
			}
		}
		else
		{
			for(var i=0;i<aDiv3.length;i++)
			{
				aDiv3[i].style.background='yellow';
				aDiv3[i].style.height='150px';
				aDiv3[i].style.width='50%';
			}
		}
	}
}
</script>

</head>

<BODY>
<div class="box box-re">
	<p><button id="button1" type="button">循环出现提示框5次</button></p>
</div>



</BODY>
</HTML>

在这里插入图片描述

3.2.2弹出一个提示框，今天你学习了吗？如果输入学习了，就提示结束，否则，一直询问

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			// 弹出一个提示框，今天你学习了吗？如果输入学习了，就提示结束，否则，一直询问
			var message=prompt('今天你学习了吗?');
			while(message!=='学习了'){
				message=prompt('今天你学习了吗?');
			}
			alert('离优秀又进了一步！');
			
		</script>
	</body>
</html>

在这里插入图片描述

3.3 隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				height: 30px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oli = document.getElementsByTagName("li");
				var i= 0;
				setInterval(function(){
					i++;
					if(i%2==0){
						for(var j=0;j<oli.length;j++){
							if(j%2==0){
								oli[j].style.background = "red";
							}else{
								oli[j].style.background = "blue";
							}
						}
						
					}else{
						for(var j=0;j<oli.length;j++){
							if(j%2==0){
								oli[j].style.background = "blue";
							}else{
								oli[j].style.background = "red";
							}
						}
					}
				},1000)
			}
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

在这里插入图片描述

3.4 判断是否为两位数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

    <script type="text/javascript">
        window.onload = function () {
            var input = document.getElementsByTagName('input')[0];
            var btn = document.getElementsByTagName('button')[0];
            input.onkeyup = function (){
                this.value = this.value.replace(/[^\d]/,"")
            }
            btn.onclick = function() {
                var arr = input.value.split('');
                if(arr.length == 2){
                    alert('√这是2位数');
                }else{
                    alert('这是'+arr.length+"位数");

                }

            }
        }
    </script>
    <body>
        <div class = 'outer'>
            <input type = 'text'>
            <button>是否为两位数</button>
        </div>
    </body>
</html>

在这里插入图片描述

Daisy47199390

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记 Week9

学习周记 Week91.学习目标2.学习内容2.1 onload 和 onunload 事件3.练习1.学习目标掌握DOM事件2.学习内容2.1 onload 和 onunload 事件onload：进入页面onunload：离开页面*onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。**onload 和 onunload 事件可用于处理 cookie例：3.练习...
复制链接

扫一扫