JavaScript的使用

一，JavaScript的介绍

1.1 简介

网页开发唯一可选语言

增加网页动态性与交互性

服务端开发

可以对数据库文件读写

1.2 引入

html内部使用script标签

在script在外部文件中填写

在外部文件中填写

在html内部通过script的src属性引入外部js内部直接编写js

二，变量的声明

const 声明常量

不可以更改

必须赋值

一般都是大写

let 声明局部变量

出了语句块失效

没有赋值前不能访问

var 声明全局变量

在任何地方都可以使用

三，数据类型

数字 number
字符串 string
布尔值 bool
空值 null
用来清除内存使用type返回的是object
未定义 underfined
声明一个变量但是没有赋值
数组 []
对象 {}

四，字符串的使用方法

length 长度
遍历使用下标 0 length-1
charAt 根据索引找字符
indexOf 根据字符返回索引
concat 字符串拼接
endsWith 结尾
startWith 开头
replace 替换
match 匹配返回对象
search 返回索引
slice 切片
spilt 切割
toLowerCase 转小写
toUpperCase 转大写
trim 剔除空格

五，数组的使用方法

length 长度
遍历 0 length-1
concat 数组连接
includes 是否包含
indexOf 返回元素索引
join 将元素只有字符串拼接
pop 删除末尾
push 末尾插入
shift 删除开头
unshift 开头插入
reverse 逆序
slice 切片
splice start 操作位置 deleteCount 删除个数 items 插入内容可以不插入
进阶方法
forEach 遍历
every 美哟此都返回true 才是true 后面跟一个匿名函数
some 每一个都是flase 才是flase
find 找到一个满足条件的
filter 过滤剔除不合格的

六，对象

对象的取值

对象名[name,age,addr]

对象的遍历

将对象赋予另外一个对象名

javascript 复制代码

let keys = Object.keys(o);
        console.log(keys);

遍历取值

javascript 复制代码

for(let i = 0;i<keys.length;i++){
            console.log(keys[i],o[keys[i]]);
        }

javascript 复制代码

for(let key in o){
            console.log(key,o[key]);
        }

序列化与反序列化

序列化：将对象转字符串JSON.stringify

将字符串转对象

JSON.parse

七，BOM

window全局对象下的属性

history

back 回退
forward 前进
go（n）正值前进负值后退 0 刷新
location
href 当前地址
protocol 协议
port 端口
pathname 虚拟路径
search 查询参数
hash 路由模式
文档对象类型通过js来操作页面元素

八，DOM

8.1页面元素的获取

querySelector 找到匹配第一个
qerySelectorAll
找到所有
返回类似数组
可以使用下标索取单个
document.query*
搜索整个文档
- target.query*
  在target内部去

8.2 绑定事件

鼠标事件

onclick
onmouse
enter
leave
down
up
move
表单元素
onfucus 聚焦
onblur 失去焦点
oninput 输入内容发生改变
onkeyup 键盘抬起

8.3 获取，修改

内容

innerText 不考虑标签标签里的内容直接变成文本

innerHTML 可以识别标签

属性

非类名

href
title
id
对象属性名
类名
对象.classList
add 添加
remove 删除
contains 是否有
toggle 有就删除没有就添加
样式
设置行内样式 .style样式属性名
获取内补样式表一级外部样式表
需要通过getComputedStyle(obj)样式属性名

8.4 相关元素

parentElement 父节点
children 字节点
nextElementSibling 下一个相邻
previousElementSibling 上一个相邻

8.5 元素的创建与删除

createElement 创建元素
appendChild 将元素插入文档
remove 删除元素