WebAPI个人学习心得

最新推荐文章于 2023-04-02 09:22:48 发布

肉乎乎的鸭

最新推荐文章于 2023-04-02 09:22:48 发布

阅读量402

点赞数

分类专栏：新手文章标签： js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/zcylxzyh/article/details/113524351

版权

新手专栏收录该内容

27 篇文章

订阅专栏

本文是作者关于JavaScript WebAPI的学习心得，涵盖了API简介、DOM操作、事件处理、BOM对象等多个方面，通过实例展示了如何获取页面元素、动态创建元素、处理事件及进行页面交互等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS快速入门个人学习心得

WebAPI个人学习心得

1、API简介

在这里插入图片描述

2、DOM

在这里插入图片描述

3、获取页面元素

3.1 根据id获取元素

在这里插入图片描述
通过document来获取

-proto-:
是这个对象真实类型

3.2 获取对应标签的元素

在这里插入图片描述
获取id为container下的所有div标签：

3.3 其他方式

在这里插入图片描述

4、属性操作和注册事件

事件源

在这里插入图片描述

一般来说，页面标签的属性在对象中是都存在的。

非表单元素属性

在这里插入图片描述

注册事件：当点击或者是其他操作时去做什么事（监听事件产生去执行一个事）。

this

在这里插入图片描述
取消a标签跳转
获取到a标签元素后在点击事件中return false就可以

案例一：点击小图片显示大图片且不跳转

在这里插入图片描述

innerHTML和innerText
获取开始标签和结束标签之间的内容

控制台打印出对象

textContent和innerText相同，都是获取文本内容。但是兼容性不同。

获取内容时，根据是否想获取带标签的元素来决定使用哪个
设置的时候：
在这里插入图片描述

表单元素属性

在这里插入图片描述

有三个：

在这里插入图片描述
获取到所有input标签后它是一个数组，可以通过数组形式访问里面每个元素。

案例二：检测用户名和密码不满足就高亮显示

注意： class属性对应的DMO对象是className
在这里插入图片描述

这段写在JS里：
在这里插入图片描述

案例三：设置下拉框的随机选中

在这里插入图片描述

案例四：全选反选

在这里插入图片描述

先把定义出来

由于频繁调用所以封装成函数

自定义属性操作

获取
在这里插入图片描述
设置

移除

模拟DOM

5、节点层次结构

DOM维护了一个节点树，页面结构在DOM中就是树形结构。
在这里插入图片描述

父子结构：获取子节点和子元素

在这里插入图片描述

获取子元素：

隔行换色小案例

获取第一个和最后一个子元素和子节点：

案例一：菜单栏

在这里插入图片描述

在这里插入图片描述

、

兄弟节点

在这里插入图片描述

6、动态创建元素

在这里插入图片描述

把已经存在的元素移动到另一个地方：

write：用得少
放在按钮中会切换页面。

innerHTML : 创建简单标签所用
在这里插入图片描述
这个不会切换页面：

**createElement 😗*生成复杂结构用

p元素就是p标签。

这个对象里就有相对应的方法。先创建在放在DOM树上，追加在之前标签后面。

案例一：点击按钮生成列表

在这里插入图片描述
innerHTML实现：

基础版本：问题：每次加载innerHTML都会重新绘制，效率低
在这里插入图片描述
注意：这里之所以是 += 是因为 = 会将之前的覆盖掉，我们要做的不是赋值而是字符串拼接。

优化一：先拼接好字符串在赋值
问题：字符串因为不可变，所以每次拼接都需要重新开辟内存，需要耗费时间
在这里插入图片描述
优化二：用数组代替，拼接后在转化为字符串

createElement实现：

将案例一高亮显示
在这里插入图片描述

在这里插入图片描述

案例二：动态创建表格

在这里插入图片描述

删除功能：

案例三：多选水果移动

在这里插入图片描述

multiple : 这个属性可以让select下拉框变为一个可以多选的文本框。

children是实时的

注意：如果使用下面方式移动的话

7、事件

注册事件

在这里插入图片描述
第二种方法：

新的注册事件的方法：（与上面 事件源.事件名（一般带on） 不同）
在这里插入图片描述
事件类型就是之前的事件名不带on

第三种注册事件方式：浏览器兼容IE 6-10

在这里插入图片描述

在这里插入图片描述
处理兼容性问题：了解

移除事件

通过第一种方式创建的时候：
在这里插入图片描述
通过第二种方式创建的时候：

从外到内：

从内到外：

事件委托

交给上一级去做，原理事件冒泡，这样就不用给每一个子元素都添加事件，直接给父元素添加事件有时就可以达到目的。
在这里插入图片描述

8、事件对象

在这里插入图片描述

获取真正触发事件的对象
在这里插入图片描述

获取事件处理函数所属对象（当前正在执行的元素）
在这里插入图片描述
二者区别：比如在事件冒泡中，给下面三个盒子都注册事件，点击蓝色，那么两者都是蓝色盒子，蓝色盒子执行完之后，会冒泡传递到绿色盒子，此时真正触发事件的对象为蓝色盒子，事件处理函数所属对象（当前正在执行的元素）为绿色盒子…
在这里插入图片描述

在这里插入图片描述
e.type ：获取事件名称

获取鼠标点击位置

案例一：获取鼠标在盒子中的位置（不是相对于整个页面是相对于盒子）

在这里插入图片描述

这里这个getPage方法是为了解决兼容性问题，我们自己自定义的方法在common.js中。

取消默认行为

方法一：在事件函数中返回false
在这里插入图片描述
方法二：通过事件对象

取消冒泡

在这里插入图片描述

键盘事件

在这里插入图片描述

9、BOM

在这里插入图片描述
了解三种对话框（不用）

JS加载

在这里插入图片描述

点关闭页面就是卸载页面。

定时器

在这里插入图片描述
setTimeOut:

属于window的属性都可以省略window
之所以把标示定义为全局变量是因为局部变量外部无法访问。
在这里插入图片描述
让一个块隔一段时间自动隐藏：

setInterVal:

案例一：倒计时

获取两个日期时间差
在这里插入图片描述
返回一个对象

location对象（可以实现页面跳转）

在这里插入图片描述
页面跳转：

法一：
在这里插入图片描述
法二：

法三：

法四：

案例二：小盒子移动动画（获取当前位置坐标）

在这里插入图片描述

URL

在这里插入图片描述
模拟浏览器自带：

前进：
在这里插入图片描述

后退：
在这里插入图片描述
可以通过 navigator.userAgent 来判断是PC还是移动端

10、和大小、位置相关的三组属性

offset（偏移量）

在这里插入图片描述

Left - 横向偏移：横坐标
Top - 纵向偏移：纵坐标

client(客户区大小)

在这里插入图片描述

scrool (滚动偏移)

在这里插入图片描述

案例一：鼠标拖拽

鼠标点下并未抬起事件
鼠标移动事件
位置：
在这里插入图片描述

注意：一定要在style.left = x + **‘px’**带单位！

案例二：登录框

在这里插入图片描述
显示遮盖层：将display从none变为其他
隐藏就改为none

案例三：放大镜

在这里插入图片描述

结构：
在这里插入图片描述

11、简单动画

让一个盒子执行从左移动到右的动画。JS可以随时给一个元素增加属性：元素名.要增加的属性名就可以了。
在这里插入图片描述

案例一：轮播图

在这里插入图片描述

注：这里的my$就是根据id获取元素

第二步放在第一步的循环中，把函数定义放在循环外。记录索引放在循环中，第二步之后

在这里添加：

案例二：回到顶部

在这里插入图片描述

结束~

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。