Java学习笔记day34

最新推荐文章于 2024-08-16 23:08:28 发布

新手小白6

最新推荐文章于 2024-08-16 23:08:28 发布

阅读量45

点赞数

分类专栏： Java学习记录文章标签： java 学习 javascript

本文链接：https://blog.csdn.net/kouzai8880/article/details/127796069

版权

Java学习记录专栏收录该内容

41 篇文章 0 订阅

订阅专栏

JS高级

BOM

简介

全称:浏览器对象模型

window对象

创建:在浏览器打开时自动创建,bom顶层对象

属性

			//获取浏览器对象
//			var n = window.navigator;
//			console.log(n);
			//获取显示器对象
//			var s = window.screen;
//			console.log(s.availWidth);
			//获取网址对象
//			var l = window.location;
//			console.log(l);
			//获取历史记录对象
//			var h = window.history;
//			console.log(h);
			//获取网页文档对象
//			var d = window.document;
//			console.log(d);

			var w = window;
			//网页可视化内部宽度(*)
			console.log(w.innerWidth);
			console.log(w.innerHeight);
			//网页可视化外部宽度
			console.log(w.outerWidth);
			console.log(w.outerHeight);

方法

//打开与关闭
window.close();
window.open("https://www.baidu.com");

//弹框(*)
//警告框
//window.alert("你好世界");
//确认框
//var b = window.confirm("你好世界");
//console.log(b);
//输入框
var t = window.prompt("请输入账号","admin");
console.log(t);

//延迟执行(*)
function test01(){
	alert("延迟后执行");
}
//设置延迟任务,返回值为延迟任务对象
var time = setTimeout(test01,5000);
//清理延迟任务对象
clearTimeout(time);

//重复执行(*)
function test01(){
	console.log("test01方法被执行");
}			
var task = setInterval(test01,3000);
clearInterval(task);

navigator对象

简介:代表浏览器

console.log(navigator.appCodeName); //浏览器代码名
console.log(navigator.appName); //浏览器的名称
console.log(navigator.appVersion); //浏览器平台和版本信息

screen对象

简介:显示器

//console.log(screen.width);
//console.log(screen.height);

//console.log(screen.availWidth);
//console.log(screen.availHeight);

console.log(screen.deviceXDPI);
console.log(screen.deviceYDPI);

location对象

简介:网址

console.log(location.host); //127.0.0.1:8020
console.log(location.hostname); //127.0.0.1
console.log(location.port); //8020

console.log(location.href);(*)
//location.href = "https://www.baidu.com";
location.reload();(*)
location.replace("https://www.taobao.com");(*)

history对象

简介:历史记录

history.length
history.back();
history.forward();
history.go(数字)

DOM

简介

中文名称:文档对象模型
结构:树型结构

Document

属性

//			console.log(document.URL);
//			console.log(document.title);
			//cookie存值
//			document.cookie = "username=admin";
//			document.cookie = "password=123456";
//			//cookie取值
//			console.log(document.cookie);
//			//cookie改值
//			//key相同就是修改
//			document.cookie = "username=123";
//			console.log(document.cookie);
//			var name = "张三";
//			name=escape(name);
//			document.cookie = "name="+name;
//			console.log(document.cookie);


var info = "{'name':'张三','sex':'男'}";
document.cookie = info;

console.log(document.cookie);
var p =eval("("+document.cookie+")");
console.log(p.name);

方法

页面输出:

document.write("你好世界<input />");

寻找html标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<img id="img01" src="img/test.png" />
		<br />
		<font class="text">font标签1</font>
		<br />
		<font class="text">font标签2</font>
		<br />
		<font name="xxx">font标签3</font>

		<h1 class="text">h1标签</h1>
	</body>
	<script type="text/javascript">
		//getElementById,通过id的属性值寻找当前网页中对应的html标签
		//只能寻找到一个节点对象
		var img = document.getElementById("img01");
		console.log(img);
		//getElementsByClassName:通过class的属性值寻找当前网页中指定的标签
		//返回值为一个数组
		var texts = document.getElementsByClassName("text");
		console.log(texts);
		console.log(texts.length);
		console.log(texts[0]);
		console.log(texts[2]);
		//getElementsByTagName:通过标签名寻找当前网页中指定的标签
		//返回值为一个数组
		var h1s = document.getElementsByTagName("h1");
		console.log(h1s);
		console.log(h1s.length);

		//getElementsByName:通过name的属性值进行寻找
		//返回值为一个数组
		var tests = document.getElementsByName("xxx");
		console.log(tests);
		console.log(tests.length);
	</script>
</html>

对标签属性的操作

方式1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<input type="text" id="input"/>
	</body>
	<script type="text/javascript">
		var inputs = document.getElementsByTagName("input");
		var i = inputs[0];

		i.setAttribute("class","username");
		i.setAttribute("placeholder","请输入账号");
		i.setAttribute("type","password");

		var iId = i.getAttribute("id");
		console.log(iId);
	</script>
</html>

方式2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<input type="text" id="input"/>
	</body>
	<script type="text/javascript">
		var i = document.getElementById("input");
		i.className = "啦啦啦";
		i.placeholder = "请输入账号";
		i.type = "password";

		console.log(i.id);
	</script>
</html>

对标签样式的操作

设置样式

获取样式

注意:只能对内联样式进行操作

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<div id="box" style="width: 200px; height: 200px; background: orange;">
			这是一段文本
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		box.style.background = "green";

		var w = box.style.width;
		console.log(w); //"200px"

		var size = box.style.fontSize;
		console.log(size); //""
		box.style.fontSize = "60px";
	</script>
</html>

对标签内容的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<font>昨晚多几分钟的准备</font>
			<p>
				今天少几小时麻烦
			</p>
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		//console.log(box.innerText);
		//console.log(box.innerHTML);
		//box.innerText = "你好世界<hr />"
		//box.innerHTML = "你好世界<hr />"
		box.innerHTML = box.innerHTML + "你好世界<hr />";
	</script>
</html>

对节点操作

1.创建节点

2.添加节点

3.插入节点

4.替换节点

5.删除节点

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
			#box01{
				background: orange;
			}
			#box02{
				background: green;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="box01">
			<font>x</font>
		</div>
		<div id="box02">
			<font id="font01">box02的第一个标签</font>
			<br />
			<font id="font02">box02的第二个标签</font>
		</div>
	</body>

	<script type="text/javascript">
		//创建节点
		var img = document.createElement("img");
		img.src = "img/test.png";
		img.style.width = "100px";
		var box01 = document.getElementById("box01");
		//添加到尾部
		box01.appendChild(img);

		var hr = document.createElement("hr");
		var font02 = document.getElementById("font02");
		var box02 = document.getElementById("box02");
		//指定位置插入
		//父容器对象.insertBefore(要插入的标签,插入在谁之前);
		box02.insertBefore(hr,font02);


		var i = document.createElement("input");
		//替换节点
		box02.replaceChild(i,font02);
		//删除节点
		box02.removeChild(i);
	</script>
</html>

事件

事件连接

内联:直接在事件属性后写方法的方法名

如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function myClick(){
				alert("图片被点击了");
			}
		</script>
	</head>
	<body>
		<img src="img/test.png" onclick="myClick()"/>
	</body>
</html>

外联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font id="btn">百度一下</font>
	</body>
	<script type="text/javascript">
		var font = document.getElementById("btn");
		font.onclick = function(){
			location.href = "https://www.baidu.com";
		}
	</script>
</html>

鼠标事件

点击事件(*):onclick

双击事件:ondblclick

鼠标移入(*):onmouseenter

鼠标移出(*):onmouseleave

鼠标移动:onmousemove

鼠标左键按下:onmousedown

鼠标左键抬起:onmouseup

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/test.png" id="img" />
	</body>
	<script type="text/javascript">
		var img = document.getElementById("img");
		img.onclick = function(){
			alert("按钮被点击了");
		}
		img.ondblclick = function(){
			alert("按钮被双击了");
		};

		img.onmouseenter = function(){
			img.style.border = "5px solid green";
		}

		img.onmouseleave = function(){
			img.style.borderWidth="0";
		}

//		img.onmousemove = function(){
//			console.log("鼠标移动");
//		}
		img.onmousedown = function(){
			console.log("鼠标左键按下");
		}
		img.onmouseup = function(){
			console.log("鼠标左键抬起");
		}
	</script>
</html>

键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img id="img" src="img/test.png" />
	</body>
	<script type="text/javascript">
		
		var img = document.getElementById("img");
		img.style.left = "0";
		img.style.top = "0";		
		document.onkeydown = function(){
			var left = parseInt(img.style.left);
			var top = parseInt(img.style.top)
			switch(window.event.key){
				case "a":
					img.style.left = left-10+"px";
					break;
				case "s":
					img.style.top = top+10+"px";
					break;
				case "d":
					img.style.left = left+10+"px";
					break;
				case "w":
					img.style.top = top-10+"px";
					break;
                default:
                    break;
			}
		}
	</script>
</html>

窗口事件

onload:页面加载完成后

onscroll:页面滑动时触发

表单事件

获取焦点

失去焦点

内容发生改变

选中

提交(必须给form设置)

重置(必须给form设置)

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var i = document.getElementById("input");
				i.onfocus = function(){
					console.log("获取到了焦点");
				}
				i.onblur = function(){
					console.log("失去焦点");
				}
				i.onchange = function(){
					//失去焦点后,判断目前的内容与以前的内容是否有改变
					//如果有改变,触发该事件
					console.log("内容发生改变");
				}
				i.onselect = function(){
					console.log("内容被选中");
				}

				var form02 = document.getElementById("form02");
				form02.onsubmit = function(){
					var input02 = document.getElementById("input02");
					var info = input02.value;
					if(info.length > 0){
						console.log("可以提交");
						//可以继续提交
						return true;
					}else{
						//不用继续提交
						return false;
					}
				}
				form02.onreset = function(){
					var input03 = document.getElementById("input03");

					input03.value = "";

					return false;
				}

			}
		</script>
	</head>
	<body>
		<form id="form01">
			<input id="input" />
		</form>
		<form id="form02" action="http://127.0.0.1:8020" method="get">
			<input id="input02" name="info01"/>
			<input id="input03" name="info02"/>
			<input type="submit" value="登录" />
			<input type="reset" value="重置" />
		</form>
	</body>
</html>