JS基本重点总结

最新推荐文章于 2023-04-18 14:33:54 发布

TomorrowOkk

最新推荐文章于 2023-04-18 14:33:54 发布

阅读量529

点赞数 2

分类专栏： js基础概括文章标签： javascript

本文链接：https://blog.csdn.net/qq_40756936/article/details/108170114

版权

js基础概括专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一：事件

一：鼠标事件：

点击(单击)onclick、

移入onmouseover、

移出onmouseout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标事件</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		function randomNum() {
			return parseInt(Math.random() * (255 - 0 + 1)) + 0;
		}
		//获取div
		var div = document.getElementsByTagName("div")[0];
		/*
		 	js中如何绑定事件：
		 		标签对象.事件名称 = function() {
		 			事件行为
		 		}
		 */
		//点击
		div.onclick = function() {
			div.style.backgroundColor = "rgb(" + randomNum() + ", " + 
												randomNum() + ", " + 
												randomNum() + ")";
		}
		//移入
		div.onmouseover = function() {
			div.style.backgroundColor = "rgb(" + randomNum() + ", " + 
												randomNum() + ", " + 
												randomNum() + ")";
		}
		//移出
		div.onmouseout = function() {
			div.style.backgroundColor = "rgb(" + randomNum() + ", " + 
												randomNum() + ", " + 
												randomNum() + ")";
		}
	</script>
</html>

二：表单事件：聚焦onfocus、失焦onblur、值改变事件onchange

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单事件</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<form action="" method="post">
			用户名：<input type="text" name="username" placeholder="请输入用户名" /><br />
			学历：
				<select name="degree">
					<option value="本科">本科</option>
					<option value="专科">专科</option>
					<option value="幼儿园">幼儿园</option>
				</select><br />
			<input type="submit" value="提交"/>
		</form>
		<div></div>
	</body>
	<script type="text/javascript">
		//获取用户名的输入框
		var userInput = document.getElementsByName("username")[0];
		/*
		 	聚焦事件
		 		不是所有的标签都有焦点，表单事件主要针对于表单元素
		 		一个标签想要使用聚焦、失焦事件，首先你得有焦点！
		 */
		userInput.onfocus = function() {
			userInput.value = "张二麻子";
		}
		//失焦事件
		userInput.onblur = function() {
			userInput.value = "王二驴子";
		}
		//获取到学历的下拉选择框
		var degree = document.getElementsByName("degree")[0];
		//值改变
		degree.onchange = function() {
			alert(degree.value);
		}
		
		var div = document.getElementsByTagName("div")[0];
		div.onfocus = function() {
			alert("div被聚焦了！");
		}
	</script>
</html>

二：DOM的增删改查

只要是涉及到页面内标签的操作，势必需要用到dom.

什么是DOM

当网页被浏览器加载时，浏览器会创建一个用来表示当前页面文档的对象，document!

我们在js中，操作document对象，就相当于在操作整个html页面

对页面的操作，无外乎就是对页面内容进行增删改查功能

1.获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM获取元素的方法</title>
	</head>
	<body>
		<!--普通标签-->
		<div id="d" class="c">哈哈哈</div>
		<!--表单元素-->
		<input type="text" name="username" />	
	</body>
	<script type="text/javascript">
		/*
		 	getElementById("id名称") 通过id名称获取标签，得到的是唯一一个，可以直接操作！
		 */
		var div = document.getElementById("d");
		div.style.color = "red";
		
		/*
		 	getElementsByClassName("类名") 通过类名获取标签，得到的是一个数组
		 	而数组是不能直接操作的，我们必须通过下标取出单个标签，才能操作！
		 */
		var div = document.getElementsByClassName("c")[0];
		div.style.color = "blue";
		
		/*
		 	getElementsByTagName("标签名") 获取指定的标签名的所有标签，一组
		 	不能直接操作，需要先通过下标获取单个标签再操作！
		 */
		var div = document.getElementsByTagName("div")[0];
		div.style.color = "orange";
		
		/*
		 	getElementsByName("表单元素name属性的值") 专门用于获取表单元素，因为表单元素才有name属性！
		 	得到的也是一组，不能直接操作，需要先通过下标取出再操作！
		 */
		var userInput = document.getElementsByName("username")[0];
		userInput.value = "嘿嘿嘿";
	</script>
</html>

//拓展---很多时候也用的到
//这两个支持传递选择器来获取标签
//querySelector("选择器")得到单个标签
//querySelectorAll("选择器")得到一组标签


var div = document.querySelector("#d");
div.style.color = "purple";

var div = document.querySelectorAll(".c")[0];
div.style.color = "pink";

2.修改元素

1）css样式

改变css样式的方法为：标签对象.style.css样式名称 = “值”;

//举例
//获取div
var div = document.getElementsByTagName("div")[0];
//修改
div.style.color = "red";
div.style.fontSize = "30px";

2）标签内容，值

第一类：修改，获取普通标签的内容，值，需要用到：

innerHTML,innerText

两者的区别：

innerText只能处理纯文本，而innerHTML可以解析HTML结构

第二类：修改，获取表单元素的内容，值，需要用到：value属性

3）标签属性

三：BOM

浏览器对象模型

浏览器页面被加载，初始化时，会在内存中创建一个全局的对象，来描述当前窗口的属性或者行为，这个对象称为浏览器对象模型。

BOM中有一个最核心的对象window，代表浏览器的窗口，这个窗口的主要子模块是

A--documen文档对象

B-history浏览历史对象

C-location窗口位置对象

1.定时器

分为单次定时器，循环定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定时器</title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*
		 	定时器分类：单次定时器、循环定时器
		 		单次定时器最大的作用，可以实现方法的延迟执行，而且方法只执行一次！
		 		setTimeout(function() {
		 			
		 		}, 延迟时间毫秒)
		 		参数解析：
		 			参数1function，代表绑定执行的方法
		 			参数2delay，代表延迟的时间
		 		
		 		循环定时器的最大作用，可以让一个方法反复的执行！
		 		setInterval(function() {
		 			
		 		}, 时间毫秒)
		 		参数解析：
		 			参数1function，代表绑定执行的方法
		 			参数2时间，方法执行的间隔时间，单位毫秒！
		 		setInterval()方法除了开启循环定时器外，还返回了一个定时器对象
		 		如果我们想要关闭定时器，可以调用clearInterval(定时器对象)！
		 */
		setTimeout(function() {
			console.log("单次定时器中的方法执行了！~");
		}, 2000);
		var index = 0;
		var timer = setInterval(function() {
			index++;
			if (index > 4) {
				clearInterval(timer);
			}
			console.log(index);
		}, 1000);
	</script>
</html>

2.window中的弹出框

A-alert警告框

B-confirm确认框，返回布尔值，点击确定返回true,点击取消返回false

C-提示输入框prompt("提示输入文本","默认值"),此方法的返回值为输入的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>window的弹出框</title>
	</head>
	<body>
		<input type="button" value="alert()" id="alert" />
		<input type="button" value="confirm()" id="confirm" />
		<input type="button" value="prompt()" id="prompt" />
	</body>
	<script type="text/javascript">
		var alertBtn = document.getElementById("alert");
		var confirmBtn = document.getElementById("confirm");
		var promptBtn = document.getElementById("prompt");
		
		//alert警告框
		alertBtn.onclick = function() {
			alert("这是一个警告框！");
		}
		//确认框,返回布尔值，点击确定返回true，点击取消返回false
		confirmBtn.onclick = function() {
			if(confirm("您确定要删除吗？")) {
				console.log("您点击了确认按钮！");
			} else {
				console.log("您点击了取消按钮！");
			}
		}
		/*
		 	提示输入框 prompt("提示输入的文本", "默认值")
			此方法的返回值为输入的内容！
		 */
		promptBtn.onclick = function() {
			var name = prompt("请输入你的姓名：", "");
			console.log(name);
		}
	</script>
</html>

3.window中的其他对象（常用）

1）window.location在js中可以实现路径的切换

实现路径切换的案例代码：

window.location = “新路径”;支持在js中实现路径跳转，书写时可以省略window，但为了增强语义，不建议省略！

TomorrowOkk

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS基本重点总结

一：事件一：鼠标事件：点击(单击)onclick、移入onmouseover、移出onmouseout<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标事件</title> <style type="text/css"> div { width: 200px; height: 200px;.
复制链接

扫一扫