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]
对象的遍历
将对象赋予另外一个对象名

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

遍历取值

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

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 删除元素