JavaScript

最新推荐文章于 2024-10-30 18:24:25 发布

烟花倒耀易逝

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量791

点赞数 22

分类专栏： Javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_64038133/article/details/134706934

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript由ECMAScript(JavaScript语言基础),Web APIs(DOM'页面文档对象模型',BOM'浏览器对象模型')组成

ECMAScript: 规定了js基础语法核心知识,比如变量,分支语句,循环语句,对象等等

Web APIs:DOM,BOM
DOM: 操作文档,比如对页面元素进行移动,大小,添加删除等操作
BOM: 操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等等

书写位置: 内部,外部,行内

内部:

外部:

记得外部要先创建一个js文件

行内:

vue才会用到

注意: 1.书写的位置尽量写到文档末尾</body>前面
2.外部js标签中间不要写代码，否则会被忽略

JavaScript输入输出语法

输出语法:

输入语法:

ECMAScript(JavaScript语言基础)

1.变量:

语法: let 变量名

多个变量用逗号隔开

命名规范和java变量一样

注意:声明变量我们优先使用const(常量),等发现它后面是要被修改的,再改为let
记住!引用类型储存的是地址,所以只要地址不变,就不会报错,所以!数组和对象都是用const来声明
只有基本数据类型的值或引用类型的地址发生变化的时候才用let

2.数组:

语法: let 数组名 = [数据1, 数据2, ... , 数据n ]

1.操作数组之添加新数据:

(1).末尾添加(push)

语法:数组名.push(元素1,...,元素n)

用法:方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度

例子:

(2).开头添加(unshift)

语法: 数组名.unshift(元素1, ... ,元素n)

用法: 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

例子:

2.操作数组之删除某个数据

(1).删除最后一个元素(pop)

语法: 数组名.pop()

用处:方法从数组中删除最后一个元素,并返回该元素的值

例子:

(2). 删除第一个元素(shift)

语法: 数组名.shift()

用处: 方法从数组中删除第一个元素,并返回该元素的值

例子:

(3). 删除指定元素(splice)

语法: 数组名.splice(start, deleteCount)

用处: 删除指定元素,start(指定修改的开始位置),deleteCount(表示要移除的数组元素的个数,如果不写,就默认从指定位置删除到最后)

3.数组排序:

语法: 数组名.sort()

用处: 用来数组排序的,可升序可降序

例子:

3.常量:

使用场景:当某个变量永远不会改变的时候，就可以使用const来声明，而不是let。

语法: const 常量名 = 常量值

注意:1.常量不允许重新赋值
2.声明的时候必须赋值（初始化)

4.数据类型(和java有些不一样):

和java的不同:

JS是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
Java是强数据类型 , 例如int a= 3必须是整数

(1).基本数据类型:

①.number 数字型(Number)

即我们数学中学到的数字,可以是整数,小数,正数,复数

②. string 字符串型

单引号,双引号,反引号都行

字符串拼接可以用+,嫌麻烦也可以直接用模板字符串
模板字符串:

注意:1.``是反引号

③.boolean 布尔型

和java一样

④.undefined 未定义型

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined.

使用场景:当我们不知道这个数据是否传递过来的时候,可以检测这个变量是不是undefined,是就能判断用户没有数据传过来

与null的区别:
null代表赋值了,但是内容为空
undefined代表没有赋值

⑤.null 空类型

和java一样

(2).引用数据类型

①.object 对象

(3).检测数据类型

用法:可以返回被检测的数据类型

语法: typeof x

例子:let age = 18 console.log(typeof age) 就能返回number

(4).数据类型转换

prompt和表单这些默认传过来的数据都是字符串

①.隐式转换

用法:某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则:1.＋号两边只要有一个是字符串，都会把另外一个转成字符串
2.除了+以外的算术运算符,此如– */等都会把数据转成数字类型

例子: 2 - '2' 结果是0 +'123' 结果是123

②.显示转换

用法:自己写代码告诉系统该转成什么类型

转换为数字型(Number)

例子:let str = '123' console.log(Number(str)) 结果就会是123

parseInt(数据) : 就是只保留整数
parseFloat(数据) : 就是可以保留小数

5.对象

(1).新增(对象名.新属性名 = 新值)

(2).删除(delete 对象名.属性名)

(3).修改(对象名.属性 = 新值)

(4).查询

(1).对象名.属性名
例: console.log(obj.num)

(2).对象名['属性名']
例: console.log(obj['num'])

(5).遍历对象

可以用for循环,但是最推荐用for in

语法:

注意:
1.for in语法中的 k 是一个变量,在循环的过程中依次代表对象的属性名
2.由于 k 是变量, 所以必须使用 [ ] 语法解析
3.k 是获得对象的属性名, 对象名[k] 是获得属性值

(6).对象中的方法

语法:

注意:
1.方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2.多个属性之间使用英文，分隔
3.方法是依附在对象中的函数
4.方法名可以使用 " " 或 ' ' ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

(7).随机数(Math.random)

语法:

随机生成N - M之间的随机数
Math.floor(Math.random() * (M - N + 1) ) + N

随机生成N以内的随机数
Math.floor(Math.random() * N+1)

Web APIs

DOM

简介:是浏览器提供的一套专门用来操作网页内容的功能,用于开发网页内容特效和实现用户交互

1.DOM树

简介:将HTML文档以树状结构直观的表现出来,直观体现了标签与标签之间的关系

2.DOM对象

简介:浏览器根据html标签生成的JS对象,把网页内容当作对象来处理

注意:所有的标签属性都可以在这个对象上面找到,修改这个对象的属性会自动映射到标签身上

document对象:
是DOM里提供的一个对象,同时也是网页最大的一个对象,所以网页所有内容都在document里面.
它提供的属性和方法都是用来访问和操作网页内容的

3.获取DOM对象

(1).利用CSS选择器来获取DOM元素

①选择匹配的第一个元素

语法: document.querySelector( ' css选择器 ' )

参数:包含一个或多个有效的CSS选择器字符串(也就是必须加 ' ' )

返回值: CSS选择器匹配的第一个元素,一个HTMLElement对象,如果没有匹配到,则返回null

②选择匹配的多个元素

语法: document.querySelectorAll( ' css选择器 ' )

参数: 包含一个或多个有效的CSS选择器字符串(也就是必须加 ' ' )

返回值: CSS选择器匹配的NodeList 对象集合

例子:

4.DOM修改元素内容

因为DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象

(1).对象.innerText 属性

将文本内容添加/更新到任意标签位置,但是不解析标签

例子:

(2).对象.innerHTML 属性

将文本内容添加/更新到任意标签位置,但是会解析标签,多标签建议使用模板字符

例子:

5.修改元素属性

(1).修改元素常见属性

语法: 对象.属性 = 值

例子:

(2).修改元素样式(css)属性

①只修改几个的时候

语法: 对象.style.样式属性 = 值

例子:

注意:1.如果属性有 - 连接符,需要转换为小驼峰命名法
2.赋值的时候,需要加单位时不要忘记加

②全部都要修改的时候

语法: 元素.className = ' css类名 '

例子:

box已经提前写了样式(.box)

③修改一些(这个最常用也最重要)

语法: 元素.classList.add(' 类名 ') 追加一个类
元素.calssList.remove(' 类名 ') 删除一个类
元素.classList.toggle(' 类名 ') 切换一个类

例子:

注意: classList 是追加和删除不影响以前的类名

(3).修改表单属性

正常的修改和其他没什么区别,获取值的时候用value
语法: 表单.value = '值'

(4).自定义属性

在标签上一律以data-开头,在DOM对象上一律以dataset对象方式获取

6.定时器-间歇函数

可以根据时间自动重复执行某些代码,定时器函数可以开启和关闭定时器

(1).开启定时器

语法: setInterval(函数, 间隔时间)
间隔时间单位是毫秒

例子:

(2)关闭定时器

语法: clearInterval(变量名)

例子:

注意: 1.函数名字不需要加括号
2.定时器返回的是一个id数字

7.事件

(1).事件监听

就是让程序检测是否有事件产生，一旦有事件触发,就立即调用一个函数做出响应，也称为注册事件

语法: 元素对象.addEventListener( ' 事件类型 ' , 要执行的函数)
元素对象.on事件 = function(){}(这是以前的写法,因为容易被覆盖,所以现在都不用了)

事件监听三要素:

事件源: 那个dom元素被事件触发了, 要获取dom元素
事件类型: 用什么方式触发, 比如鼠标点击 click, 鼠标经过 mouseover 等
事件调用的函数: 要做什么事

例子:

注意: 1.事件类型要加引号
2.函数是点击之后再去执行,每次点击都会执行一次

(2)事件类型

①鼠标事件

鼠标触发
click 鼠标点击
mouseenter 鼠标经过(没有冒泡效果)推荐
mouseleave 鼠标离开(没有冒泡效果)推荐
mouseover 鼠标经过(有冒泡效果)
mouseout 鼠标离开(有冒泡效果)

②焦点事件

表单获得光标
focus 获得焦点
blur 失去焦点

③键盘事件

键盘触发
keydown 键盘按下触发
keyup 键盘抬起出发

④文本事件

表单输入触发
input 用户输入事件

(3)事件对象

也是一个对象,这个对象里有事件触发时的相关信息(例如鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息

使用场景: 可以判断用户按下哪个键, 比如按下回车键可以发布新闻
2.可以判断鼠标点击了哪个元素,从而做相应的操作

语法: 在事件绑定的回调函数的第一个参数就是事件对象(一般命名为event, ev, e)

部分常用属性

①type 获取当前的事件类型
②clientX / clientY 获取光标相对于浏览器可见窗口左上角的位置
③offsetX / offsetY 获取光标相对于当前DOM元素左上角的位置
④key 用户按下的键盘键的值

(4)事件解绑

on事件方式,直接使用null覆盖就可以实现事件的解绑

语法:

addEventListener方式,必须使用removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])

语法:

注意: 匿名函数无法被解绑

(5)事件委托

利用事件冒泡特点,给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件

语法: 事件对象.target.tagName 可以获得真正触发事件的元素

例子:

(6)页面加载事件

加载外部资源(如图片,外联CSS和Javascript等)加载完毕时触发的事件

语法:

load是事件名,不能改
注意:不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

(7)页面滚动事件

滚动条在滚动的时候持续触发的事件

语法:

事件名: scroll
scrollLeft和scrollTop是属性
1.获取被卷去的大小
2.获取元素内容往左,往上滚出去看不到的距离
3.这两个是可读写的

8.事件流

指的是事件完整执行过程中的流动路径,会经过两个阶段(捕获阶段, 冒泡阶段)

说明: 假设页面里有个div,当触发事件时, 会经历两个阶段, 分别是捕获阶段(从父到子)和冒泡阶段(从子到父),实际工作都是使用事件冒泡为主

(1)事件捕获

从DOM的根元素开始去执行对应的事件

事件捕获需要写对应代码才能看到效果(因为捕获和冒泡是一种概念,相当于从父到子执行和从子到父执行)

(2).事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件(默认就是事件冒泡)

这个就是先弹'我是儿子'再弹'我是爸爸'最后弹'我是爷爷',而捕获就相反

(3).阻止冒泡

如果想把事件就限制在当前元素内,就需要阻止事件冒泡

语法: 事件对象.stopPropagetion()

注意: 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

某些情况下需要阻止默认行为的发生,比如阻止链接的跳转,表单域跳转等

语法: e.preventDefault()

例子:

9. 日期对象方法

使用场景: 因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式

例子:

时间戳:

使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成

什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式

算法: 1.将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
2.剩余时间毫秒数转换为剩余时间的年月日时秒分就是倒计时时间

获得时间戳方式:

语法: 简写 + new Date() 无需实例化
例子: console.log(+new Date());

10.节点操作

(1)DOM节点:

dom树里每一个内容都被称之为节点

①父节点查找

语法: 子元素.parentNode

返回最近一级的父节点,找不到返回null

②子节点查找

语法: 父元素.children

③兄弟关系查找

语法: nextElementSibling(下一个兄弟)
previousElementSibling(上一个兄弟)

(2)增加节点:

①插入到父元素的最后一个子元素:

语法: 父元素.appendChild(要插入的元素)

②插入到父元素中某个子元素的前面:

语法: 父元素.insertBefore(要插入的元素, 在哪个元素前面)

例子:插入到最前面
ul.insertBefore(li , ul.children[0])

③克隆节点:

某些情况下我们新增节点需要复制一个原有节点,把复制的节点放入到指定的元素内部

语法: 元素.cloneNode(布尔值)

true:克隆时会包含后代节点一起克隆
false: 克隆时不包含后代节点
默认为false

(3)删除节点:

要删除元素必须通过父元素删除

语法: 父元素.removeChild(要删除的元素)

注意: 如不存在父子关系则删除不成功

11.Swiper(插件)

触摸滑动插件,简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等

使用流程:

1.熟悉官网,知道这个插件可以干什么(https:// www.swiper.com.cn/)
2.看在线演示,找到符合自己需求的demo
3.查看基本使用流程
4.查看APi文档,去配置自己的插件

BOM

BOM是浏览器对象模型

1. window对象是一个全局对象，也可以说是JavaScript中的顶级对象
2.像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
3.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
4.window对象下的属性和方法调用的时候可以省略window