JavaScript

港岛叔公

已于 2022-09-17 00:42:43 修改

阅读量281

点赞数

文章标签： javascript 前端 html5

于 2022-08-20 00:28:16 首次发布

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

本文链接：https://blog.csdn.net/retuen_d/article/details/126433161

版权

本文档详细介绍了JavaScript的基础知识，包括浏览器执行JS、数据类型、运算符、循环、数组、函数、对象、内置对象、DOM操作和BOM。同时讲解了事件处理、定时器、元素偏移量、动画函数等Web APIs的使用，以及前端开发中的常见特效和本地存储。

摘要由CSDN通过智能技术生成

系列文章目录

文章目录

系列文章目录
一、初识js
二、web apis （交互效果）
pc端网页特效
移动端特效
本地存储

一、初识js

在这里插入图片描述

1游览器执行js简介

在这里插入图片描述

2js的组成

在这里插入图片描述

在这里插入图片描述

3js书写位置

内嵌式

在这里插入图片描述

行内式

在这里插入图片描述

在这里插入图片描述

外部

在这里插入图片描述

4、注释

在这里插入图片描述

5、输入输出语句

在这里插入图片描述

6、变量

在这里插入图片描述

在这里插入图片描述

命名

在这里插入图片描述

7、数据类型

在这里插入图片描述

1、简单数据类型

在这里插入图片描述

数字

在这里插入图片描述

在这里插入图片描述

isNaN（）判断非数字

字符串、转义符

在这里插入图片描述

在这里插入图片描述

布尔和undefined和nan

在这里插入图片描述

2、typeof检查数据类型

在这里插入图片描述

数据类型转换

在这里插入图片描述

8、运算符

算数运算符

在这里插入图片描述

比较运算符

在这里插入图片描述

逻辑运算符

在这里插入图片描述

优先级

在这里插入图片描述

三元表达式

在这里插入图片描述

数字补零

在这里插入图片描述

switch

在这里插入图片描述

9、循环

for循环

在这里插入图片描述

while循环

在这里插入图片描述

do while

continue break

在这里插入图片描述

10、数组

在这里插入图片描述

在这里插入图片描述
遍历数组

1数组长度

在这里插入图片描述

在这里插入图片描述

冒泡排序

在这里插入图片描述

10、函数

在这里插入图片描述

在这里插入图片描述

return返回值只返回一个

多个可以用数组

argumets

在这里插入图片描述

在这里插入图片描述

声名函数两种方法

在这里插入图片描述

11、作用域

在这里插入图片描述

作用域

在这里插入图片描述
### 变量作用域

在这里插入图片描述

js没有块级作用域

在这里插入图片描述

作用域链

内部函数能够访问外部，一层一层的找，就近原则在这里插入图片描述

在这里插入图片描述

12、预解析

在这里插入图片描述

1 、预解析

在这里插入图片描述

13、对象

在这里插入图片描述

1、对象

在这里插入图片描述

在这里插入图片描述

字面量创建对象

在这里插入图片描述

在这里插入图片描述

2、变量属性函数方法区别

在这里插入图片描述

new object 创建对象

在这里插入图片描述

构造函数创建对象

为什么需要构造函数
在这里插入图片描述

在这里插入图片描述

new关键字

在这里插入图片描述

3、for in 遍历对象

在这里插入图片描述

14、内置对象

在这里插入图片描述

1、内置对象

在这里插入图片描述

查文档

在这里插入图片描述
mdn网站

2、math对象

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3、deta 日期对象

在这里插入图片描述

格式化年月日
格式化时分秒

获取data毫秒数（时间戳）
在这里插入图片描述

倒计时

在这里插入图片描述

4、数组对象

在这里插入图片描述

在这里插入图片描述

1.添加删除数组

在这里插入图片描述

2.数组排序

在这里插入图片描述只能排列个位数

多位数

4.数组索引

在这里插入图片描述

案例

数组转换为字符串

在这里插入图片描述

在这里插入图片描述

5、字符串对象

原本是普通类型
在这里插入图片描述

1遍历字符串

在这里插入图片描述

1字符串查找

在这里插入图片描述
查找相同字符索引

1根据位置返回字符

在这里插入图片描述

在这里插入图片描述

1字符串操作方法

在这里插入图片描述

在这里插入图片描述

6、总结

在这里插入图片描述

7、内存分配栈和堆

在这里插入图片描述

二、web apis （交互效果）

在这里插入图片描述

一、DOM

在这里插入图片描述

在这里插入图片描述

二、获取元素

在这里插入图片描述

1.根据id获取（getElementById）

在这里插入图片描述

2.根据标签名获取(getElementByTagName )

在这里插入图片描述

3.通过html’5 ie9兼容低版本不进入兼容

在这里插入图片描述

在这里插入图片描述

三、事件

在这里插入图片描述

事件高级应用

在这里插入图片描述

注册事件(addEventListener)

在这里插入图片描述

在这里插入图片描述

注册事件(attachEvent)

在这里插入图片描述

在这里插入图片描述

删除事件

传统

在这里插入图片描述

方法监听

在这里插入图片描述

在这里插入图片描述

四、操作元素

改变文本( element.innerText 和 element.innerHTML)

在这里插入图片描述
改变元素文本内容

innerText不识别html标签

在这里插入图片描述

改变属性

在这里插入图片描述

在这里插入图片描述

表单元素的操作

在这里插入图片描述

改变样式属性操作 (element.style 和 elemen.className)

在这里插入图片描述
是行内样式操作

在这里插入图片描述

在这里插入图片描述

精灵图遍历

在这里插入图片描述

在这里插入图片描述

排他思想

在这里插入图片描述

百度换肤

在这里插入图片描述

获取属性的值(element.属性和 element.getAttribute(‘属性’))

在这里插入图片描述
获取自定义属性的值

设置属性值

在这里插入图片描述

移除属性值

在这里插入图片描述

5、tab的切换

在这里插入图片描述

布局两个大盒子
在这里插入图片描述

上面模块

下面模块

新增加自定义属性（ie11后兼容）

在这里插入图片描述

六、节点操作

在这里插入图片描述

在这里插入图片描述

1. 父节点(node.parentNode)

在这里插入图片描述

打印出box

2.子节点( parentNode.childNoes)

在这里插入图片描述

麻烦========

第二种

3第1最后节点

第一
最后
在这里插入图片描述
第二种方法获取的是元素节点兼容i9以上

实际开发

下拉菜单

在这里插入图片描述

在这里插入图片描述

4.兄弟节点

下一个
上一个
在这里插入图片描述

获得元素节点兼容i9以上
在这里插入图片描述

七、创建节点

在这里插入图片描述

ul里面有li就放在后面

放在前面
在这里插入图片描述

发表留言

在这里插入图片描述

在这里插入图片描述

删除节点(node.removeChild(child) )

在这里插入图片描述

删除留言

在这里插入图片描述
在发布留言那添加

复制节点

在这里插入图片描述

在这里插入图片描述

动态生成表格

在这里插入图片描述

在这里插入图片描述

三种动态创造元素的区别

在这里插入图片描述

1==========
在这里插入图片描述 2============

在这里插入图片描述拼接字符串慢效率低
数组形式

3============
在这里插入图片描述

八、Dom事件流

在这里插入图片描述

事件对象

在这里插入图片描述

兼容性有些不识别e 在这里插入图片描述

事件对象的属性

在这里插入图片描述

在这里插入图片描述

阻止默认行为（事件）

在这里插入图片描述

阻止冒泡

在这里插入图片描述

兼容性方案

事件委托（代理）

不用给li每个都注册事件，直接给父元素注册
在这里插入图片描述

鼠标事件对象

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

跟随鼠标的天使案例

在这里插入图片描述

键盘事件

在这里插入图片描述

在这里插入图片描述

二、BOM

在这里插入图片描述

一.bom概述

在这里插入图片描述

如
在这里插入图片描述

页面加载事件

页面所以加载完成再加载
在这里插入图片描述

调整窗口大小事件

在这里插入图片描述

在这里插入图片描述

二、定时器回调函数

在这里插入图片描述

一、setTimeout

在这里插入图片描述

在这里插入图片描述

5秒后关闭广告

在这里插入图片描述

清除定时器

在这里插入图片描述

在这里插入图片描述

二、setlnterval

在这里插入图片描述

倒计时案例

在这里插入图片描述

在这里插入图片描述

停止定时器

在这里插入图片描述定时器名字定义在全局变量例timer

发短信案例

在这里插入图片描述

在这里插入图片描述

三、js执行机构

在这里插入图片描述

同步

在这里插入图片描述

异步

在这里插入图片描述

location对象

在这里插入图片描述

点击跳转页面

获取参数值

在这里插入图片描述

在这里插入图片描述

location对象的方法（网页跳转）

在这里插入图片描述

在这里插入图片描述

navigator对象

在这里插入图片描述

history对象

在这里插入图片描述
相当于这个按钮
几就是前进几
加负号就是后退
比如-1

pc端网页特效

在这里插入图片描述

一、元素偏移量 offset系列

在这里插入图片描述

获取盒子里鼠标的距离

在这里插入图片描述

在这里插入图片描述

拖拽

在这里插入图片描述

京东放大镜

在这里插入图片描述

二、元素可视区client

在这里插入图片描述

在这里插入图片描述

立即执行函数

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、元素滚动scroll

在这里插入图片描述

滚动条事件

在这里插入图片描述

仿淘宝右侧侧边栏

在这里插入图片描述

四、动画函数封装

在这里插入图片描述

简单的动画封装函数

在这里插入图片描述

优化

在这里插入图片描述

案例轮播图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

animate在上面

在这里插入图片描述

在这里插入图片描述

小bug

在这里插入图片描述
优化清除样式的封装成函数

自动

在这里插入图片描述

在这里插入图片描述

节流阀

在这里插入图片描述

在这里插入图片描述

淘宝动画返回顶部

在这里插入图片描述在

筋斗云案例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

移动端特效

在这里插入图片描述

在这里插入图片描述

触摸事件对象（touchstart）

在这里插入图片描述

在这里插入图片描述

拖到元素

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

移动端轮播图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

classList属性

在这里插入图片描述

添加类

在这里插入图片描述

移除类

在这里插入图片描述

切换类

原来有的类就删除掉
没有就加上
在这里插入图片描述

小圆点

在这里插入图片描述

手指移动

在这里插入图片描述

回弹

在这里插入图片描述

在这里插入图片描述

优化用户移动手指才操作

在这里插入图片描述

在这里插入图片描述

二、返回顶部

在这里插入图片描述

在这里插入图片描述

移动端click事件延迟300毫秒解决

在这里插入图片描述

fastclick插件

在这里插入图片描述

轮播图插件

在这里插入图片描述

把css，js文件放进项目

在demo里的html文件打开查找代码

相关样式cv到相关页面的css文件里

在这里插入图片描述将js cv到相关页面js的

属性

修改样式
在页面css中覆盖掉他

在这里插入图片描述

其他插件

http://www.superslide2.com
https://github/cubiq/iscroll
在这里插入图片描述

视频插件

在这里插入图片描述

bootstrap插件

在这里插入图片描述

在这里插入图片描述

本地存储

在这里插入图片描述

1.window.sessionStorage

在这里插入图片描述

在这里插入图片描述

2.window.localStorage(同一个游览器所以页面可以使用此数据)

在这里插入图片描述

案例用户名保存

在这里插入图片描述

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

js
复制链接

扫一扫

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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