JS（第一篇）

注：前端缩进推荐为2

基础篇

认识JS

JS是什么？

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
作用？
网页特效
表单核验
数据交互
服务端编程（node.js）
规范
写在body的闭合标签前面
原因：js会改html的结构，所以后加载比较好
JS代码执行顺序
按html文档流顺序执行
alert() 和 prompt() 他们会跳过页面渲染先被执行
变量命名
可以用$ 和 _开头
遵守小驼峰命名
现在基本只使用let了
数组的基本使用
let arr = [xxx,xxx]
常量
const 声明
模板字符串
${age}

null 和 undefined 的区别

undefined 表示没有赋值
null 表示赋值了，但是内容为空，吧null作为尚未创建的对象

parseInt 和 parseFloat

配合css使用，更改属性的大小

比较运算符

！== 左右两边是否不相等
NaN和任何值都不相等，包括它自己
== 只要求值相等，不要求数据类型一样
=== 要求值和数据类型都一样才返回true
开发中，常用 ===

逻辑运算符

表达式和语句的区别

表达式一定可以赋值给左边
语句不一定有值

三元运算符

条件？满足 : 不满足

数组

arr.push('xxx') 这个返回的新增后的数组长度

arr.unshift 增添到数组的开头，这个返回的新增后的数组长度

arr.pop() 从数组中三处最后一个元素，并且返回改元素的值

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

函数使用

命名建议：常用动词约定

can 判断是否可以执行某个动作
has 判断是否含义某个值
is 判断是否为某个值
get 获取某个值
set 设置某个值
load 加载某些数据

匿名函数

function() 注：没有名字的函数，无法直接使用

函数表达式 let fn = function(){}
立即执行函数

具名函数的调用可以写到任何位置
函数表达式，必须先声明函数表达式，后调用
立即函数的好处：避免全局变量之间的污染

(function(x,y){console.log(x+y)
})(1,2);//其中x,y是行参；1,2是实参

实践写法

逻辑中断

function fun(a,b){a = a || 0;b = b || 0;console.log(a+b);}fun(1,2); // 3
fun(1); // 1
fun(); // 0

隐式转换

有字符串的加法 “” + 1 ----> “1”
减法会让空字符串转换成0
null 经过数字转换之后变成 0
undefined 转成数字是 NAN

对象

声明

let 对象名 = {}
let 对象名 = new Object()

let 对象名 = { 属性名：属性值，方法名：函数}

增

对象名.新属性 = 新值

注：属性名尽可能不要使用中横线，因为在索引的时候会被当成减号，若使用，解决方法是用中括号索引

for in 一般不去遍历数组


let obj = {name: "小明", age: 18, height: 1.8};
for(let key in obj){console.log(key + ":" + obj[key]);
}

注：这里的key是字符串类型

内置对象

Math

random (0~1)
ceil (向上取整)
floor （向下取整）
round （四舍五入）
max
min
pow
abs4

生成随机数

生成0-10的随机数
Math.floor(Math.random() * (10+1))

生成5-10的随机数
Math.floor(Math.random() * (5+1)) + 5

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

随机点名案例

let arr1 = ["小明", "小红", "小刚", "小花", "小白"];function fun1(){return arr1[Math.floor(Math.random() * arr.length)]
}for (let i = 0; i < 5; i++) {console.log(fun1());
}

注：alt ＋上下箭头，可以快速移动语句位置

变量声明

优先使用const，后面发现需要修改，再改为let
建议数组和对象使用const来声明
基本数据类型，常发生地址的变化，使用let

DOM（文档对象模型） —> 操作网页内容

BOM（浏览器对象模型）

document是DOM提供的一个对象，网页所有内容都在document里面

API

选择元素

获取匹配的第一个元素
document.querySekector(.box)

返回一个列表
document.querySelectrAll(.box)

注：这个数组是个伪数组。没有pop(),push()等方法

操作元素内容

innerText
1. 将文本内容添加/更新到仍以标签位置
2. 显示纯文本，不解析标签
innerHTML
1. 与上面的区别在于，识别标签

修改元素属性

const pic = document.querySelector('img')pic.scr = 'xxxx'
pic.title = 'xxxx'

操作样式属性

通过style属性操作 CSS
- 修改样式通过style属性引出
- 小驼峰命名法
- css单位要带上
操作类名操作CSS
- 添加类名
- className是用新值换旧值，如果需要添加一个类，需要保留之前的类名
通过classLise操作CSS
- 上面那个不如这个
- xxx.classList.add()
- xxx.classList.remove()
- xxx.classList.toggle()
  - 有就删掉，没有接加上


const box = document.querySekector('.box');
//多组单词的采取小驼峰命名法
box.style.width = '300px';

操作表单元素属性

得到表单的内容表单.value
改变表单的种类表单.type = 'password / text'

<input type="checkbox" name="" id="">
const tem = document.querySelector('input')
tem.check = true

自定义属性


const tem = document.querySelector('div');
console.log(tem.dataset.smT)

时间间隔setInterval

setInterval(function(){},1000)

setInterval(fn,1000)

注：如果调用的是有名函数，不用写小括号
注：定时器返回的是一个id数字

关闭定时器

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

事件监听

元素对象.addEventListener('事件类型',要执行的函数)

事件类型

鼠标事件
- click
- mouseenter鼠标经过
- mouseleave鼠标离开
焦点事件
- 获得焦点 focus
- 失去焦点 blur
键盘事件
- Keydown键盘按下触发
- Keyup键盘抬起触发
文本事件
- input用户输入事件

轮播图

鼠标经过暂停定时器
鼠标离开开启定时器
左侧箭头点击，变量 –
右侧箭头点击，变量++

事件对象

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

事件对象的常用属性

type
- 获取当前的事件类型
clientX/clientY
- 获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
- 获取光标相对于当前DOM元素左上角的位置
key
- 用户按下的键盘键的值
- 现在不提倡使用keyCode

环境对象

每个函数里面都有this，环境对象
普通函数里面的this 指向的是window
this指向的是函数的调用者

回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数
使用匿名函数作为回调函数比较常见

注：boxcheck 被选中的话， .ck:checked

css中的伪选择器，用来选择被选中的元素

事件流

事件流指的是事件执行过程中的流动路径
捕获阶段（父到子）
- 简单了解，一般用不到
- addEvent('xxx',fn,是否使用捕获机制)
- 注册了同名事件，那么就从到父容器依次执行到子容器
事件冒泡阶段（子到父）
- 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发

阻止冒泡

因为默认有冒泡模式的存在，所以容易导致事件影响到父级元素
想把事件就限制在当前元素，阻止冒泡
阻止冒泡需要那到事件对象
事件对象.stopPropagation()
此方法可以阻断事件流动传播，冒泡，捕获都有效

解绑事件

注：匿名函数无法解绑

btn.removeEventListener('click',fn)

mouseover 和 mouseout会有冒泡效果
mouseenter和mouseleave 没有冒泡效果

事件委托

优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
- 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
- e.target 是点击的对象
- target.tagName 显示标签名

补充：dir(obj) ----> 展示这个对象下的属性和方法

 const container = document.querySelector('.container');container.addEventListener('click', function(e){if(document.querySelector('.active')){      document.querySelector('.active').classList.remove('active');}if(e.target.tagName === 'LI'){e.target.classList.add('active');}});//这里关于先移除的思想案例
//然后再进行添加

阻止默认行为e.preventDefault()

其他事件

页面加载事件
元素滚动事件
页面尺寸事件

加载事件

加载外部资源（如图片，外联css和js）
有些时候需要等页面资源全部加载了做一些事情
事件名 load
window.addEventListener('load',function())
等待页面所有资源加载完毕，就回去调用这个函数
不光可以监听整个页面资源加载完毕，也可以正对某个资源绑定load事件
document.addEventListener('DOMContentLoaded',fn)
- 无需等待样式表，图片等全部加载

元素滚动事件

事件名 scroll
window.addEventListener('scroll',function())
用处：当页面滚动到某个区域后做一些处理，比如固定导航栏，返回顶部
属性scrollLeft 和 scrollTop
这是HTML标签的属性
这两个值是可以读写的
开发运用：页面滚动一定距离，显示一个元素或者固定一个元素

注：获取HTML标签的方法document.documentElement

页面尺寸事件

事件名 resize
浏览器窗口大小发生改变时，就会触发的事件
clientWidth 和 clientHeight 获取元素可见部分的宽高
不包含边框和padding

元素尺寸与位置

获取宽高
- 包括padding 和 border
- offsetWidth 和 offsetHeight
- 获取出来的是数值，方便计算
- 获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置
- 最近一级带有定位的祖先元素
- 这个是元素的属性
- offsetLeft 和 offsetTop
- 这个属性只读