JS学习笔记

embedded/2024/9/24 7:04:15/

文章目录

      • JS学习
        • 一、修改样式属性
          • 1、注意
          • 2、通过classList修改样式
        • 二、获取表单里面的值
        • 三、定时器函数
        • 四、删除数组中选中的元素
        • 五、事件类型
          • 1、鼠标事件
          • 2、焦点时间
          • 3、键盘事件
          • 4、文本事件
        • 六、document通过type获取
        • 七、获得焦点伪类选择器(focus)
          • 仅需要样式改变时可以使用
        • 八、事件对象
        • 九、trim方法
        • 十、文本框注意事项
        • 十一、this
        • 十二、checked伪类选择器
        • 十三、全等号(===)
        • 十四、mouseenter、mouseleave
        • 十五、获取事件对象的方法
        • 十六、DOM树获取上/下一个兄弟
        • 十七、form表单提交中的问题
          • 1、有时候需要阻止默认提交事件
          • 2、表单清空
        • 十八、立即调用函数的写法
        • 十九、元字符精确匹配
        • 二十、元字符量词
        • 二十一、className与classList的区别
        • 二十二、blur和change的区别
        • 二十三、开发中多使用剩余参数
        • 二十四、对象解构注意
        • 二十五、什么时候使用原型对象
        • 二十六、浅拷贝怎么理解
        • 二十七、直接赋值和浅拷贝有什么区别
        • 二十八、深拷贝中的问题
        • 二十九、如何深拷贝
        • 三十、this的指向
          • 1、普通函数
          • 2、箭头函数

JS学习

一、修改样式属性

对象.style.样式属性 = ‘值’

1、注意

有短横线链接的属性,采取小驼峰命名法

例如: b a c k g r o u n d − c o l o r ——》 b a c k g r o u n d C o l o r background-color ——》 backgroundColor backgroundcolor——backgroundColor

  • JS可以通过修改类名的方式修改样式,相当于结构体赋值,适用于修改内容较多的情况
2、通过classList修改样式
二、获取表单里面的值

用对象名.value

  • d i s a b l e d disabled disabled 禁用按钮
  • c h e c k e d checked checked 勾选框
  • s e l e c t e d selected selected 多选框
三、定时器函数

开启定时器 s e t I n t e r v a l ( 函数名 / 需要操作的代码,间隔时间 ) 函数名不要加小括号 setInterval(函数名/需要操作的代码,间隔时间) 函数名不要加小括号 setInterval(函数名/需要操作的代码,间隔时间)函数名不要加小括号

关闭定时器 c l e a r I n t e r v a l ( 定时器对象 ) clearInterval(定时器对象) clearInterval(定时器对象)

四、删除数组中选中的元素

a r r . s p l i c e ( 开始删除下标,删除数量 ) arr.splice(开始删除下标,删除数量) arr.splice(开始删除下标,删除数量)

五、事件类型
1、鼠标事件
  • c l i c k 鼠标点击 click 鼠标点击 click鼠标点击
  • m o u s e e n t e r 鼠标经过 mouseenter 鼠标经过 mouseenter鼠标经过
  • m o u s e l e a v e 鼠标离开 mouseleave鼠标离开 mouseleave鼠标离开
2、焦点时间
  • f o c u s 获得焦点 focus获得焦点 focus获得焦点
  • b l u r 失去焦点 blur失去焦点 blur失去焦点
3、键盘事件
  • k e y d o w n 键盘按下触发 keydown键盘按下触发 keydown键盘按下触发
  • k e y u p 键盘弹起触发 keyup键盘弹起触发 keyup键盘弹起触发
4、文本事件
  • i n p u t 用户输入触发 input用户输入触发 input用户输入触发
六、document通过type获取

在这里插入图片描述

七、获得焦点伪类选择器(focus)
仅需要样式改变时可以使用

. t e x t : f o c u s .text:focus .text:focus

八、事件对象

在事件回调函数中绑定的第一个参数就是事件对象

在这里插入图片描述

九、trim方法

可以去掉字符串左右两侧的空格

十、文本框注意事项
  • value属性中的内容是文本框中的内容
十一、this

每个函数里面都有this 环境对象

  • 普通函数里面this指向的是window

  • 在这里插入图片描述

谁调用函数,函数中的this就指向谁

this指向触发者

十二、checked伪类选择器

只选择被勾选的复选框

  • 可以利用这个性质判断有几个复选框被选中
十三、全等号(===)

与c++等语言不同,需要三个等号

十四、mouseenter、mouseleave

一般使用这两个事件,这两个事件不会冒泡

mouseover和mouseout会冒泡

十五、获取事件对象的方法

e.target(target就是点击的对象)

e.target.tagName 是点击的对象具体是什么

在这里插入图片描述

十六、DOM树获取上/下一个兄弟
  • 上一个 当前兄弟对象 . p r e v i o u s E l e m e n t S i b l i n g 当前兄弟对象.previousElementSibling 当前兄弟对象.previousElementSibling
  • 下一个 当前兄弟对象 . n e x t E l e m e n t S i b l i n g 当前兄弟对象.nextElementSibling 当前兄弟对象.nextElementSibling
十七、form表单提交中的问题
1、有时候需要阻止默认提交事件

在这里插入图片描述

2、表单清空

reset()方法

十八、立即调用函数的写法
  • ( f u n c t i o n ( ) { } ) ( ) (function()\{\})() (function(){})()
  • ! f u n c t i o n ( ) { } ( ) !function()\{\}() !function(){}()
十九、元字符精确匹配

^$/str$/$

二十、元字符量词
  • *(>=0次)
  • +(>=1次)
  • ?(0或1次)
  • {n} (必须出现n次)
  • {n,}(>=n次)
  • {n,m}(n=< x<=m次)
二十一、className与classList的区别
  • 前者会覆盖原类名
  • 后者不会
二十二、blur和change的区别
  • blur失去焦点后会触发
  • change失去焦点且修改过内容才会触发
二十三、开发中多使用剩余参数

因为剩余参数是真数组,可以使用pop,push方法

二十四、对象解构注意
  • 结构变量名必须和属性名一致

  • 对象解构的变量名可以重新改名,结构

    • 旧变量名:新变量名
二十五、什么时候使用原型对象
  • 可以把不变的方法,直接定义在prototype对象上,这样所有对象的实例都可以共享这个方法
二十六、浅拷贝怎么理解
  • 拷贝对象之后,里面的属性值是简单数据类型直接拷贝值

  • 如果属性值是引用数据类型则拷贝的是地址

二十七、直接赋值和浅拷贝有什么区别
  • 直接赋值的方法,只要是对象都会相互影响,因为是直接拷贝对象栈里面的地址
  • 浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响
二十八、深拷贝中的问题

一定要先处理数组在处理对象

二十九、如何深拷贝
  • 自己写
  • 利用lodash
  • 利用JSON
三十、this的指向
1、普通函数

this指向调用者

2、箭头函数

this指向就近外层作用域中的this


http://www.ppmy.cn/embedded/104428.html

相关文章

【区块链 + 司法存证】印记区块链电子印章 | FISCO BCOS应用案例

电子印章作为传统物理印章的数字化锚定&#xff0c;除了拥有和物理印章一样的法律效力外&#xff0c;还能够有效地为企业增效降 本提质。近年来&#xff0c;随着国家双碳目标的提出以及全球新冠疫情&#xff0c;进一步加速了企业数字化转型的步伐&#xff0c;电子印章 的价值也…

C++之搜索二叉树(上)

目录 搜索二叉树的概念 搜索二叉树的操作 递归版本 二叉树的插入 二叉树的查找 二叉树的删除 非递归版本 二叉树的递归插入 二叉树的递归查找 二叉树的递归删除 在之前我们已经学习过了二叉树这一数据结构&#xff0c;本期我们将学习一种新的数据结构------搜索二…

【Faiss】构建高效搜索系统 - Faiss向量数据库的搭建

目录 ​编辑1. 引言 2. Faiss简介 3. 安装与配置 3.1 在不同操作系统上的安装方法 3.1.1 Windows 3.1.2 macOS 3.1.3 Linux 3.2 配置开发环境 3.2.1 使用virtualenv 3.2.2 使用Anaconda 1. 引言 在当今这个数据爆炸的时代&#xff0c;快速有效地处理海量数据已经成为…

高防服务器中的流量清洗是什么意思?

高防服务器能够为企业防御一定的网络攻击&#xff0c;是网络游戏行业经常会选择的一款服务器类型&#xff0c;其中高防服务器的流量清洗则是指对服务器所接收的流量进行实时监测、识别和过滤&#xff0c;将恶意流量与攻击流量进行清除&#xff0c;保证网络能够正常运行。 接下来…

前端知识HTMLCSS

目录 1. 前端开发介绍 1.1 认识前端开发 1.2 web标准 2. HTML & CSS 2.1 HTML快速入门 2.1.1 操作 2.1.2 总结 2.2 开发工具 2.3 基础标签 & 样式 2.3.1 标题实现 2.3.1.1 标题排版 2.3.1.1.1 分析 2.3.1.1.2 标签 2.3.1.1.2 实现 2.3.1.2 标题样式 2.…

Electron 项目实战 02:打包和自动更新

技术选型 electron-forgeelectron-builder electron-forge 是Electron 官方文档介绍的&#xff0c;打包和发布都包含了&#xff0c;但是包含的坑也非常多。electron-builder下载量和集成打包非常顺利&#xff0c;本教程也是采用electron-buid来介绍打包。大家在技术选型的时候…

【代码随想录|图论part03之后】

代码随想录|数组 704. 二分查找,27. 移除元素 一、part031、101. 孤岛的总面积1.1 dfs版本1.2 BFS版本2.102. 沉没孤岛3、103. 水流问题4、104.建造最大岛屿二、part041、110. 字符串接龙2、105.有向图的完全可达性3、106. 岛屿的周长三、part05-06 并查集理论1、107. 寻找存在…

Java 单元测试指南

本文不仅介绍了单元测试的规范&#xff0c;还结合实际开发案例&#xff0c;演示了如何编写单元测试。我们使用了 JUnit、H2、Surefire 等常用的单元测试工具。如果你希望深入了解这些工具&#xff0c;可以查阅相关资料。本文基于企业内部实际应用的工作流程&#xff0c;通过教程…