前端学习第七周-number的方法，正则表达式，dom中的获取元素控制元素，事件绑定

---

前言

本周主要学习关于bom的知识，需要多操作练习

一、number的方法

tofixed() 四舍五入取整，不填写参数默认为0,取整。得到的数据类型为字符串
isInteger(123) 判断一个数是不是整数，无法强制转换，字符串类型的数字为false

Math类型
Math.PI 求π
Math.pow(2,3) 求2的3次方
Math.sqrt(3,2) 开方
Math.abs(-123) 求绝对值
Math.max(23,231,4,23) 打印最大值
Math.min(23,231,4,23) 打印最小值
//var arr=[24,13,43,34]
//var temp = Math.max(…arr)
//求数组的最大值
Math.ceil(3.14) //向上取整
Math.floor(3.14) //向下取整
Math.round(3.14) //四舍五入取整，返回的值为number
Math.random() //取0-1的随机数
//求[x,y]区间的随机数
parseInt(Math.random()(y-x+1)+x)*

二、正则表达式

var reg1 = new RegExp(‘x’,‘mgi’);
var reg2 = /x/igm //推荐

1.正则对象.test()

正则对象存在lastIndex属性，如果不是全局查找的话， lastIndex 恒为0
如果全局查找，默认为0， 查找成功的话，lastIndex更新为成功的位置的下一位
查找失败的话，lastIndex重置 为0

最好不要在中途更改查找的字符串，否则容易会从更新的字符串之后再开始查找，导致漏查

2.正则.exec(str) 返回的数据是 数组 或者 null

3.字符串的方法

1.字符串.match(正则)
匹配字符串当中是否有满足正则验证，没有返回NULL
满足的话，看是否有 g : 有g, 返回所有满足的项 组成的数组
没有g，返回的数据和 exec 一样
2.字符串.replace(正则) 如果存在做替代
3.字符串.split(正则)
4.字符串.search(正则)

4.规则

1.转义符 \ ^、.、[、$、(、)、|、*、+、?、{和
2.[]
3.元字符
4.| 或者 表示并列
5.+ * ? {x} {x,y} {x,}
6.()
7.var str=‘aaabaaaaaaa’
var reg=/a+/g
console.log(str.match(reg));
[“aaa”, “aaaaaaa”]

可以学习一下emmet 方便快速书写html

  <!-- emmet-->
  <!-- ul.test#qwe>li{text$}*8 -->

三、dom

DOM:Document Object Model 文档对象模型
提供一系列的用于操作页面元素内容属性方法
包含内容：

1.获取元素

(1).搜索（方法）
(2).遍历（属性）

基准元素
Document->根节点
Document.documentElement->html
Document.head->head
Document.body->body

元素搜索
querySelector->通过选择器去查询元素（第一个）->元素
querySelectorAll->通过选择器去查询元素（全部）->节点列表（伪数组）
getElementById->通过id获取元素->元素
getElementsByTagName->通过标签名获取满足条件的元素->元素集合（伪数组）
getElementsByClassName->通过类名获取满足条件的元素->元素集合（伪数组）
△ el.closest(selector)->以当前元素开始向上搜索，获取第一个满足条件的父级元素

节点遍历
父级
parentElement
parentNode

子级
△ children 子级元素
firstElementChild
lastElementChild
childNodes 子级节点
firstChild
lastChild

兄弟级
previouselementSibling
nextelementSibling
previousSibling
nextSibling

2.nodeType节点相关

-1 元素节点
-3 文本节点
-9 document
-11 DocumentFragment ->文档碎片（独立于dom树，常用于临时存储dom元素）
tagName ->标签名 要注意需要全大写
获取值
节点：
nodeValue
data
元素：
普通元素
△ textContent
innerText//只能以纯文本文字设置节点中的内容
△ innerHTML//以html语法设置节点的内容
outerHTML
输入控件 ->input Textarea Select
△ value

方法
el.matches(Selector) ->判断当前元素是否满足选择器条件

---标准w3c属性，如src,href等等，只需要直接打点调用进行更改就可以
oImg.src="imges/2.jpg';
data-src自定义的属性，可以通过this.dataset.src获取
或者通过el.setAttribute('data-src',12);
var n =el.getAttribute('data-src);

属性 & 特性(征)
- 属性：DOM 对象属性 -> 不可见
- 特性：HTML 标签属性 -> 元素可见
- 标准特性：标签标准中包含的属性
- 非标准特性(自定义特性)
- data-abc = qwe -> el.dataset *

自定义 DOM 属性 & 自定义特征：存储数据

3.控制元素 添加 删除 替换 样式 储存信息

~元素添加
-innerHTML

javascript
ul.innerHTML +=‘

• item8
• ’
  可以进行添加，但是会让原来元素的绑定事件失效//因为添加的元素相当于全部重新渲染，不会包含之前已经绑定的
  元素

  -创建元素

  1.createElement

  let li = document.createElement('li');
  li.className='test1';
   li.innerHTML=`<p>123</p>
  	   <div>123</123>`;
  

  2.cloneNode(true)

  参数只能为布尔值，可写可不写，true为深层拷贝，里面的内容都拷贝，默认为flase，只拷贝外层

  -插入页面

  △常用（不兼容ie）
  before 最前面
  prepend 子元素最前面
  append 子元素最后面
  after 最后面
  老（兼容性高）
  appendChild ->等同于append
  insertBefore ->parentNode.insertBefore(child,beforeNode)
  //ul.prepend(1i)
  //ul.insertBefore(li,ul.firstElementchild)
  中间
  insertAdjacentElement //不建议使用

  ~元素删除
  △ -remove ->el.remove()
  -removeChild ->parentNode.removeChild(chile)

  ~元素替换
  △ -replaceWith ->oldNode.replaceWith(newNode)
  -replaceChild -> parentNode.replaceChild(newNode,oldNode)

  -样式控制

  直接设置 el.style.样式名=样式值（控制内联样式）
  △ 类名控制：通过对类名的添加和修改，完成对样式的控制
  className
  classList
  -add
  -remove
  -contains 判断是否包含
  -toggle 切换
  -replace

  ondblclick双击事件
  onkeydown 监听键盘事件
  unblur 失焦事件
  focus 聚焦
  Select 选中

  -获取元素位置大小

  offset:
  width:元素占据空间大小 content+padding+border（滚动条的大小）
  height
  parent：获取当前元素的定位级元素
  left：当前元素距离定位父级元素的距离
  top
  △client:
  width:元素可利用空间大小 contect+padding
  height
  left：border的大小
  top：border的大小
  △scroll:
  width:内容不超出元素，等同于client
  内容超出元素，获取内容实际占据大小
  height
  left：内容在元素中滚动的距离
  top
  △获取当前元素距离视窗的位置信息
  el.getBoundingClientRect()

  height:inherit 继承父级的高度

  4.事件绑定

  事件
  事件组成：
  事件源
  事件类型 ->有哪些事件需要处理
  事件处理器/事件处理函数

  1.有哪些事件

  常见事件
  click
  dblclick
  mouseover
  mouseout
  mousemove
  focus
  blur
  change
  touchstart
  touchmove

  2.事件处理器部署方式

  DOM属性
  △ el.onclick = handler//直接写函数，不用加括号,如果加了括号，即执行该函数，但是函数并没有返回值，所以返回的为undefind,值其实是null
  只能绑定一个事件处理器
  移除事件：el.οnclick=null

  html特性：<div class="box" onclick="">123</div>
  

  事件侦听器
  可以同时绑定多个事件处理器

  事件对象：储存跟当前事件相关的一系列属性方法的对象，作为事件处理器的第一个参数返回，供开发者使用
  target 触发事件的元素
  修饰键 ->绑定快捷键
  ctrlKey
  altKey
  shiftKey
  mataKey win->win mac->command
  位置信息
  clientX,Y 当前触点离视口的距离
  pageX,pageY 当前触点离文档顶部的距离

  △事件流：事件传播方向

  捕获阶段：Window->document->body->…->target (从外往内)
  冒泡阶段(默认值):target->…->document->Window (从内往外)

  只有事件侦听器可以将事件布置在捕获阶段
  let h1 =document.querySelector('h1')
  h1.onclick=f2
  
  h1.addEventListener('click',function f1(e){
  	console.log(1,this.textContent);
  })
  h1.addEventListener('click',f2)//添加f2,不能带括号
  h1.removeEventListener('click',f2)//移除f2
  function f2(e){
  	console.log(this.textContent);
  }
  

  △利用冒泡的特性：事件委托（事件代理）
  将子级的事件委托给父级进行部署，当父级触发事件时，判断触发的元素是否时需要执行操作的元素，如果是就实现对应操作
  使用时机：存在大量相同的操作行为
  动态内容的事件绑定

  阻止冒泡的方法
  stopPropagation();

  6.27
  object-fit:cover; //功能其实类同于background-position=cover;这个针对于音频视频图片

  键盘事件

  onkeypress 当键盘的某个键被按下（系统按钮如箭头键和功能键无法得到识别）
  onkeydown 当键盘的某个键被按下（系统按钮可以识别，并且会先于onkeypress发生）
  onkeyup 当某个键盘的键被松开

  表单事件

  onchange 当用户改变域的内容
  onfocus 聚焦（比如tab键或鼠标点击）
  onblur 失焦
  onsubmit 当表单被提交
  onreset 当表单被重置

  鼠标事件

  点击 click
  双击 dblclick
  右键 contextmenu(上下文菜单)
  移动 mousemove
  按下 mousedown
  松开 mouseup
  移入 mouseover/mouseenter
  移出 mouseout/mouseleave
  滚轮 wheel
  属性
  e.clientX,clientY
  e.pagex,e.pagesY
  target

  浏览器的默认行为：
  右键->打开菜单
  按下->文字选中
  阻止默认行为
  e.preventDefault()
  return false; ->DOM属性

  事件是否能进行冒泡：
  大部分事件都会产生冒泡行为
  不产生冒泡：
  focus
  blur
  mouseenter
  mouseleave
  // mouseover,mouseout 如果移入移除子元素，也会进行变化
  //mouseenter,mouseleave 移入移除不会受子元素影响,不会重复触发
  code拿的是键位，key拿的是值

  ---

  总结

  例如：多多练习。