JS加强

最新推荐文章于 2024-07-10 17:09:40 发布

@小匠

最新推荐文章于 2024-07-10 17:09:40 发布

阅读量550

点赞数 1

分类专栏： JavaStudy2020 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45629145/article/details/110665023

版权

JavaStudy2020 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

基础

var 、let、const关键字

跳转

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
```
var person={firstname:"John", lastname:"Doe", id:5566};
```

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

数组

1、数组的两个方法形成栈结构

push：
- 格式：数组.push(参数1、参数2。。。）
- 功能：给数组的末尾添加元素
- 返回值：插完元素以后数组的长度。
pop：
格式：数组.pop()
返回值：取出一个元素
功能：从数组末尾取下一个元素

2、队列结构

shift（）：
- 格式：数组.shift()
- 功能：从数组的头部取下一个元素
unshift():
- 格式：数组.unshift(参数1、参数2、。。。）
- 功能：从数组头部插入元素

3、concat（）

拷贝原数组，生成新数组
合并数组
格式：数组.concat(数组，数组，。。)
返回值，合成新的数组，原数组不会改变
就算传入的是数组，数组中的元素要单独拆出来再进行合并

4、slice（）

格式：数组.slice（start,end）;
功能：可以基于当前数组获取指定区域元素[start,end]，提取出元素生成新的数组
返回值：生成新的数组，原数组不会改变

5、splice（）

格式：数组.splice(start，end，数据1，数据2，。。）；
参数：
- start 开始截取的位置
- length：截取的元素的长度
- 第三个参数开始，在start位置，插入的元素
- 返回值：截取下来的元素组成的数组

6、join（）

格式：数组.join（字符串）
功能：将数组中的元素，用传入的拼接符，拼接成一个新的字符串

7、reverse（）：逆序
8、sort()：数组排序。默认是从小到大排序，按照字符串排序

参数：一个函数，代表要怎么去进行排序（固定用法）

9、concat（），将原数组复制一份，然后赋值给另一个变量时，另外一个变量更改元素，不会影响原数组。这就是引用类型的变量；
在这里插入图片描述

10、声明提升
在当前作用域，声明变量和函数，会直接提升在整个代码的最前面

11、省略var声明变量，会被js强制声明为全局变量

12、严格模式：

写在哪个作用域下，哪个作用域就会生效
使用“use strict”声明
注意：尽量不要将严格模式声明在全局位置

使用严格模式后行为变更

全局变量声明时，必须加var
this无法指向全局对象
函数内重名属性
arguments对象不允许被动态改变

      //没加严格模式之前
      function f(n1, n2) {
        n1 = "hello";
        console.log(arguments[0] + "," + arguments[1]);  //输出hello,2
      }
      f(1, 2);

   //加严格模式
   function f(n1, n2) {
     "use strict"
    n1 = "hello";
    console.log(arguments[0] + "," + arguments[1]);  //输出1,2
  }

新增保留字：implements，interface，let，package，private，protected，public，static，yield，不可能将这些声明成变量。

严格模式的目的：
1、消除js语法的一些不合理，不严谨之处，减少一些怪异行为；
2、消除代码运行的一些不安全之处，保证代码运行的安全。
3、提高编译器效率，增加运行速度
4、为未来新版本的js做铺垫
注：“严格模式”体现了js更合理、更安全、更严谨的发展方向，包括ie10在内的主流浏览器，都支持它。

13、indexOf（item，start）：在数组中查找第一次出现item元素的下标，从start开始查
14、map：将数组中的元素进行特定的操作，并返回新的数组，原数组不变
在这里插入图片描述
15、filter（）：过滤

      var arr = [1,2,3];
      var newArr = arr.filter(function(item,index,arr){
		  return item > 2;
      })
	  console.log(newArr); // 3
	  console.log(arr); // 1,2,3

16、some（）：判断数组里面有不有符合条件的，用法与filter一样
17、every（）：判断数组里面所有元素是否符合条件，用法与上面一样
18、reduce（）：
在这里插入图片描述

字符串

1、字符串声明

通过new运算符
省略new
字符串常量赋值

2、访问单个字符：charAt(下标，从0开始)
注意：字符串是只读，不可变的，既是基本数据类型又是对象类型

3、typeof：判断指定变量是什么类型的
4、charCodeAt()：访问字符串对应下标下的ASCII码值
5、fromCharCode（）将传入的 ASCII码转成字符
。。。。
详情

BOM对象（browser object model）

1、confirm（）：弹出一个对话话，点确定返回ture，取消返回false
2、alert（）
3、prompt（）：弹出一带输入框的提示框

第一个参数：面板显示的内容
第二个参数：输入框里面的默认（可以不传入）

4、open（）

参数1：跳转的URL，打开一个新窗口，并加载该url
参数2：字符串，给打开的窗口起一个名字

5、history对象

管理的是当前窗口的历史记录（只要加载了不同的url就会产生一条历史记录）
history.lenth：获取历史记录条数
history.back()：返回上一条历史记录
history.forward()：返回下一条历史记录
history.go（）：
参数：0 ：刷新当前页面
正整数：前进n条记录
负整数：后退n条记录

6、location（地址栏）的属性
URL：统一资源定位符
协议：//ip(域名)/:端口号/路径/?查询字符串#锚点

协议：location.protocol
主机名：location.hostname
端口号：location.prot
路径：location.pathname
查询字符串：location.search
锚点：# location.hash

方法：
location.assign(url)，在当前窗口跳转到这个url
location.replace(rul)，在当前窗口替换成新的url，不会产生历史记录
location.reload()，刷新当前窗口，传入ture，不经过浏览器缓存强制从服务器加载

DOM 和DOM下节点获取

在这里插入图片描述
节点类型：

元素节点：“div”
属性节点：“id = ‘div’”
文本节点：div文本

获取元素节点的方法：

document.getElementById(id)：通过id获取到节点对象
设置行间属性的值：.id,.title,.className
设置样式：.style.width，.style.height 。。。（只能访问标签行间的样式）
document.querySelector()：
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
document.querySelectorAll：
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
提示: 你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

获取当前有效元素：

/**
			 * 根据传入的结点对象和样式，分别对浏览器兼容进行判断后，选择对应的兼容方法
			 * currentStyle[]对象：返回所有样式声明包括外部、内部、内联，按照css层叠规则作用于元素的最终样式
			 * getComputedStyle(node)[cssStyle]：可以获取当前元素所使用的css属性值。
			 * @param {需要获取有效样式的结点对象} node
			 * @param {要获取的样式属性名} cssStyle
			 */
			function getStyle(node, cssStyle) {
				return node.currentStyle //踩坑点：没有（）
					? node.currentStyle[cssStyle]
					: getComputedStyle(node)[cssStyle];
			}

练习：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>定时器</title>
		<style>
			#div1 {
				width: 400px;
				height: 200px;
				background-color: white;
				border: 1px solid black;
				margin: 100px auto;
				text-align: center;
				line-height: 200px;
				font-size: 18px;
			}
		</style>

		<script>
			/*写一个定时器,每个一秒修改一次div内文本颜色和文字大小,最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
        文字大小开始缩小,缩小6次,文字再开始增大。*/

			//定义一个方法，生成随机的颜色范围：0-255
			function randomRgba() {
				/* let r = parseInt(Math.random()*256); //random生成0.1-0.9之间的随机数，不是整数，所以需要强制类型转换，后面乘n就是生成0-n-1之间的数
            console.log(r); */
				let str =
					"rgba(" +
					parseInt(Math.random() * 256) +
					"," +
					parseInt(Math.random() * 256) +
					"," +
					parseInt(Math.random() * 256) +
					"," +
					1 +
					")";
				return str;
			}

			onload = function () {
                let node = document.getElementById("div1");
                let speed = 5;//每次增大的范围
                let count = 0; //计数
				setInterval(() => {
                    node.style.color = randomRgba();
                    //获取字体大小
                    let size = parseInt(getStyle(node,"font-size"));
                    //将字体逐渐放大
                    node.style.fontSize = (size+speed)+"px"
                    count ++;
                    if(count % 6 == 0) {
                        speed *= -1;
                    }
				}, 1000);
			};
			/**
			 * 根据传入的结点对象和样式，分别对浏览器兼容进行判断后，选择对应的兼容方法
			 * currentStyle[]对象：返回所有样式声明包括外部、内部、内联，按照css层叠规则作用于元素的最终样式
			 * getComputedStyle(node)[cssStyle]：可以获取当前元素所使用的css属性值。
			 * @param {需要获取有效样式的结点对象} node
			 * @param {要获取的样式属性名} cssStyle
			 */
			function getStyle(node, cssStyle) {
				return node.currentStyle //踩坑点：没有（）
					? node.currentStyle[cssStyle]
					: getComputedStyle(node)[cssStyle];
			}
		</script>
	</head>
	<body>
		<div id="div1">hello</div>
	</body>
</html>

在这里插入图片描述

DOM进阶

1、setAttribute

2、getAttribute

3、removeAttribute

class属性的访问
支持自定义属性的访问

4、innerHTML：获取标签之间的内容，可以赋值，会解析HTML标签

5、innerText：获取标签之间的纯文本，可以赋值

6、outerHTML：从外标签开始到外标签结束

7、childNodes：访问当前节点下所有的子节点

8、firstChild：访问子节点中的首位

9、lastChild：访问子节点中的最后一位

在这里插入图片描述
10、nextSibling：访问当前节点兄弟节点中的下一个节点

11、previousSibling：访问当前节点兄弟节点中的上一个节点
下面这些方法IE8一下不兼容
在这里插入图片描述
12、节点操作

document.write()：覆盖页面上原有的内容
createElement（）：创建一个节点
node1.appendChild(node2)：将node2节点插入到node1节点的子节点的末尾
document.createTextNode（文本）：创建文本节点
node1.parentNode.insertBefore(node2,node1)：将node2添加到node1前面
node1.parentNode.replaceChild(node2,node1)：用node2节点将node1节点替换
node.cloneNode()：克隆出来新节点（传入true，克隆节点本身和子节点）

节点操作案例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>节点操作</title>
		<style>
			#div1 {
				background-color: orange;
				width: 300px;
				height: 70px;
			}
			#i1 {
				width: 290px;
				height: 30px;
				margin-left: 1px;
			}
			.b {
				margin-top: 5px;
				margin-left: 40px;
				color: white;
				background-color: black;
			}
			#div2 {
				width: 300px;
				height: 600px;
				background-color: rgba(255, 238, 0, 0.377);
			}
		</style>
		<script>
			//定义一个方法，生成随机的颜色范围：0-255
			function randomRgba() {
				let str =
					"rgba(" +
					parseInt(Math.random() * 256) +
					"," +
					parseInt(Math.random() * 256) +
					"," +
					parseInt(Math.random() * 256) +
					"," +
					1 +
					")";
				return str;
			}
			window.onload = function () {
				//获取div1节点
				let div1 = document.getElementById("div1");
				//获取输入框
				let input = document.getElementById("i1");
				//获取所有的按钮
				let buttons = document.getElementsByClassName("b");
				//获取div2
				let div2 = document.getElementById("div2");
				//设置第一个按钮的操作
				buttons[0].onclick = function () {
					//创建一个元素节点div
					let newdiv = document.createElement("div");
					//创建一个文本节点,并将输入框的值添加到文本节点
					let text = document.createTextNode(input.value);

					//将文本节点添加到div节点下
					newdiv.appendChild(text);
					//将新div添加颜色样式
					newdiv.style.backgroundColor = randomRgba();
					//将新的div添加到div2节点的末尾
					div2.appendChild(newdiv);
					//添加完将输入框清空
					input.value = "";
					//创建一个按钮节点
					let b = document.createElement("button");
					b.innerText = "删除";
					b.style.marginLeft = "10px";
					b.onclick = function () {
						div2.removeChild(newdiv);
					};
					newdiv.appendChild(b);
				};

				//设置第二个按钮的操作
				buttons[1].onclick = function () {
					//删除最后一个节点
					div2.removeChild(div2.lastChild);
				};
				//克隆最后一个节点
				buttons[2].onclick = function () {
					let divlast = div2.lastChild.cloneNode(true);
					div2.appendChild(divlast);
				};
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<input type="text" id="i1" />
			<button type="button" class="b">添加</button>
			<button type="button" class="b">删除</button>
			<button type="button" class="b">复制</button>
		</div>
		<div id="div2"></div>
	</body>
</html>

选项卡案例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>选项卡操作</title>
		<style>
			#div1 {
				width: 300px;
				height: 330px;
				background-color: antiquewhite;
			}
			#div1 .activity {
				background-color: orange;
				color: blue;
			}

			#div1 div {
				width: 295px;
				height: 300px;
				border: 1px solid black;
				display: none;
			}
		</style>

		<script>
			onload = function () {
				//获取div1
				let div1 = document.getElementById("div1");
				//获取div1下所有的按钮和div
				let buttons = div1.getElementsByTagName("button");
				let divs = div1.getElementsByTagName("div");
				let index = 0;
				for (let i = 0; i < buttons.length; i++) {
					buttons[i].onclick = function () {
						for (let j = 0; j < buttons.length; j++) {
							buttons[j].className = "";
							divs[j].style.display = "none";
						}
						this.className = "activity";
						divs[i].style.display = "block";
					};
				}
			};
		</script>
	</head>
	<body>
		<div id="div1">
			<button class="activity">JavaScript</button>
			<button>Java</button>
			<button>Python</button>
			<div style="display: block">
				JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。
				简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。
			</div>
			<div>
				JavaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开发人员所重视。很多人认为，写JavaScript代码很简单，并且JavaScript只是为了在网页上添加一点交互和动画效果。
			</div>
			<div>
				但这是完全错误的理解。JavaScript确实很容易上手，但其精髓却不为大多数开发人员所熟知。编写高质量的JavaScript代码更是难上加难。
			</div>
		</div>
	</body>
</html>

offset系列方法

offsetWidth：能获取元素宽并且以数字返回（width+border+padding，眼睛能看到的实际的宽都算上）
offsetHeight：类似offsetWidth
offsetLeft/top：眼睛能看到实际距离第一个有定位的父节点的距离

文档碎片

<script>
			onload = function () {
        let div1 = document.getElementById("div1");
				/* console.time("test1"); //计时开始 
				for (let i = 0; i < 100000; i++) {
					let newdiv = document.createElement("div");
					div1.appendChild(newdiv);
				}
				console.timeEnd("test1"); //计时结束test1: 112.801025390625 ms */

        //使用文档碎片方式：现将全部的节点创建出来，添加到一个节点里面，然后在插入div
        console.time("test1");
				let node = document.createElement("div");
				for (let i = 0; i < 100000; i++) {
					let newdiv = document.createElement("div");
					node.appendChild(newdiv);
				}
        div1.appendChild(node);
        console.timeEnd("test1");//test1: 84.226806640625 ms
			};
		</script>

数组和对象遍历方法JS数组遍历的十二种方式

数组
1、for循环

	for (let index = 0; index < array.length; index++) {
	        const element = array[index];
	        
	      }

2、for…in快速遍历

for (const key in object) {
        if (object.hasOwnProperty(key)) {
          const element = object[key];
          
        }
      }

3、foreach

array.forEach(element => {
        
      });

4、for…of

for (const iterator of object) {
        
      }

javascript原生遍历方法的建议用法：
用for循环遍历数组
用for-in遍历对象
用for-of遍历类数组对象（ES6）
用Object.keys()获取对象属性名的集合

事件

事件是发生并得到处理的

绑定事件：1、内联模式 2、外联模式（脚本模式）
绑定事件格式：
元素节点.on + 事件类型 = 匿名函数
click 事件类型 onclick：事件处理的函数

事件的种类

1、鼠标事件

click 单击
dblclick 双击
mouseover 鼠标移入（经过子节点也会触发）
mouseout 鼠标移出（经过子节点会触发）
mousemove 鼠标移动（会不停的触发）
mouseenter 鼠标移入（经过子节点不会触发）
mouseleave 鼠标移出 (经过子节点不会触发）

2、键盘事件（表单元素，全局Window）

keydown 键盘按下（如果按下不松手，会一直触发）
keyup 键盘抬起
keypress 键盘按下（只支持字符键）

3、HTML事件
window事件

load ：当页面加载完以后会触发
unload：当页面解构的时候触发（刷新页面，关闭当前页面）只有IE兼容
scroll：页面滚动触发
resize：页面窗口大小发生变化

表单事件

blur：失去焦点
focus：获取焦点
select：选中文本时触发
change：文本进行修改并失去焦点重复
submit：但我们点击submit上的按钮才触发
reset

事件绑定：

系统会在事件触发的时候，生成一个事件对象
触发事件的时候，系统会自动去调用事件绑定的函数
获取事件对象固定写法：var e = ev(传参) || window.event;
需要使用事件对象的属性的时候，就需要获取事件对象

鼠标事件对象的属性

1、事件对象：

button : 0 左键 1 滑轮 2 右键

2、获取当前鼠标位置

clientX clientY (可视窗口的左上角为原点）
pageX pageY （整个页面的左上角为原点）
screenX screenY （电脑屏幕的左上角为原点）

跟随鼠标移动提示框案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跟随鼠标移动提示框</title>
		<style>
			a {
				display: block;
				font-size: 20px;
				margin: 20px;
				width: 130px;
			}
			#msg {
				width: 150px;
				height: 30px;
				background-color: gray;
				color: white;
				display: none;
				position: absolute;
			}
		</style>
		<script>
			//创建一个数组，用于存放div标签的内容
			let mgs = [
				'唐太宗：哈哈哈',
				'唐高宗：呵呵呵',
				'唐玄宗：嘻嘻嘻',
				'武则天：哈啊哈',
			];

			onload = function () {
				//获取a标签对象
				let a = document.getElementsByTagName('a');
				//获取div
				let div = document.getElementById('msg');
				//遍历a标签给所有a标签添加鼠标移入时间
				for (let i = 0; i < a.length; i++) {
					//添加鼠标移入事件
					a[i].onmouseover = function () {
						div.style.display = 'block';
					};
					//添加移出事件
					a[i].onmouseout = function () {
						div.style.display = 'none';
					};
					//添加div跟随鼠标移动事件
					a[i].onmousemove = function (ev) {
						//获取事件对象
						let e = ev || event;
						div.style.left = e.clientX + 5 + 'px';
						div.style.top = e.clientY + 5 + 'px';
						div.innerText = mgs[i];
					};
				}
			};
		</script>
	</head>
	<body>
		<a href="#">唐太宗</a>
		<a href="#">唐高宗</a>
		<a href="#">唐玄宗</a>
		<a href="#">武则天</a>
		<div id="msg"></div>
	</body>
</html>

修改键

shiftKey：按下为true，默认为false
AltKey
CtrlKey
metaKey：win系统：按下Windows键为true，macOS：按下command键为true

键盘事件对象的属性

keyCode 键码
which
格式：var which = e.which || e.keyCode
只在keydown下支持
charCode 字符码
which
格式：var which = e.which || e.charCode
只在keypress下支持

目标对象和this

target 目标对象/触发对象
IE8一下不兼容，whindow.event.srcElement

this和baievent.target的区别：

this返回的是绑定事件的对象（元素）；e.target返回的是触发事件的对象（元素）。
简单来说，this：哪个元素绑定了这个点击事件，就返回哪个元素；e.target：点击了哪个元素，就返回哪个元素。

事件冒泡：由里向外逐级触发
事件捕获：由外向里逐级触发
事件对象的属性和方法
阻止事件冒泡：浏览器兼容问题canceBubble = true 或 stopPropagation()

跟随鼠标移动案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跟随鼠标移动</title>
		<style>
			* {
				margin: 0px;
        padding: 0px;
			}
			div {
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: red;
				border-radius: 50%;
			}
		</style>
		<script>
			onload = function () {
				//获取到所有的div
				var divs = document.getElementsByTagName('div');
				//添加鼠标移动事件
				document.onmousemove = function (ev) {
					let e = ev || event;
					for (let i = divs.length - 1; i > 0; i--) {
						divs[i].style.left = divs[i - 1].offsetLeft + 'px';
						divs[i].style.top = divs[i - 1].offsetTop +'px';
					}
					divs[0].style.left = e.clientX + 'px';
					divs[0].style.top = e.clientY +'px';
				};
			};
		</script>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

阻止右键菜单

在这里插入图片描述

阻止超链接行为

在这里插入图片描述

拖拽节点案例

在这里插入图片描述

/**
 * 元素节点跟着鼠标拖动（可以越界）
 * @param {拖拽的节点} node 
 */
function drag(node) {
	node.onmousedown = function (ev) {
		let e = ev || event;
		var omlift = e.clientX - node.offsetLeft;
		var omtop = e.clientY - node.offsetTop;
		//鼠标移动事件
		document.onmousemove = function (ev) {
			let e = ev || event;
			node.style.left = e.clientX - omlift + 'px';
			node.style.top = e.clientY - omtop + 'px';
		};
	};
	document.onmouseup = function() {
		document.onmousemove = null;
	}
}

不可越界

/**
 * 元素节点跟着鼠标移动（不能越界）
 * @param {拖拽的结点} node 
 */

function drag(node) {
	node.onmousedown = function (ev) {
		let e = ev || event;
		var omlift = e.clientX - node.offsetLeft;
		var omtop = e.clientY - node.offsetTop;
		//鼠标移动事件
		document.onmousemove = function (ev) {
			let e = ev || event;
			//拖拽后div的坐标
			let l = e.clientX - omlift;
			let t = e.clientY - omtop;
			//出界控制
			if(l <= 0) {
				l = 0;
			}
			let windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
			if(l >= windowWidth - node.offsetWidth) {
				l = windowWidth - node.offsetWidth
			}
			if(t <= 0) {
				t = 0;
			}
			let windowHeight = document.documentElement.clientHeight || documetn.body.clientHeight;
			if(t >= windowHeight - node.offsetHeight) {
				t = windowHeight - node.offsetHeight;
			}
			node.style.left = l + 'px';
			node.style.top = t + 'px';
		};
	};
	document.onmouseup = function() {
		document.onmousemove = null;
	}
}

事件委托

实现步骤：

找到当前节点的父节点或者祖先节点
将事件添加到你找到的这个父节点或者祖节点上
找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作

arguments

每一个函数内部都有一个arguments，系统内置的。
1、用来存储实参
属性：arguments.length输出当前里面存储的参数个数
访问某一个数据：arguments[下标]: 从零开始

@小匠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS加强

基础var 、let、const关键字跳转数据类型值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。引用数据类型：对象(Object)、数组(Array)、函数(Function)。注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型对象由花括号分隔。在括号内部，对象的属性以名称和值对的
复制链接

扫一扫

专栏目录