web_学习笔记

网页背景

##########################################################
-------------------------------------------
背景
background-color: #fff;  背景颜色
background-image: url();  背景图片

background-repeat: no-repeat;  背景平铺
取值：no-repeat--不平铺  repeat--平铺(默认值) repeat-x 水平平铺  repeat-y 垂直平铺

background-position: 0 0;  背景位置
取值：
方位名词 left center right top bottom
坐标系 原点(0,0) 

背景连写
background: color image repeat position  推荐顺序

背景图片与img标签区别
img是一个标签有默认宽高
背景图片仅仅只是装饰的css样式，不能撑开div标签
-------------------------------------------
##########################################################

页面标签

####################################################################
标签
<h1></h1>  标题 h1 - h6 
<p></p>  段落标签
<br>  换行标签
<hr>  水平线标签
-----------------------
<b></b> 加粗
<u></u> 下划线
<i></i> 倾斜
<s></s> 删除线
-----------------------
   推荐使用
<strong>加粗</strong>  加粗
<ins>下划线</ins>  下划线
<em>倾斜</em>  倾斜
<del>删除线</del>  删除线
------------------------
<img src="/a.png" alt="这是个猫">  图片标签  src 图片路径  alt 提示文本 图片加载失败才显示

---------音视频---------------
<audio src=""></audio>  音频标签
<video src=""></video>  视频标签  
src 文件路径  controls 播放控件 
autoplay 自动播放(部分浏览器支持) 
loop 循环播放 
muted  静音 （谷歌浏览器视频支持静音自动播放）
注意 音频标签目前只支持三种格式： MP3、Wav、Ogg  视频标签仅支持三种格式：MP4、WebM、Ogg
------------------------

<a href=""></a>  超链接 
href 跳转目标链接  # 1、空链接回到顶部功能 2、占位
target 取值 _self 默认值，当前窗口跳转覆盖原网页  _blank  在新窗口中跳转(保留原网页)

----------列表--------------
<ul><li></li></ul>  无序列表
<ol><li></li></ol>  有序列表
注意： ul标签 和 ol标签 中只允许包含 li标签  li标签可以包含任意内容
-----------列表-------------
自定义列表
<dl>             dl 表示自定义列表的整体
    <dt></dt>    dt 表示自定义列表的主题(标题) 
    <dd></dd>    dd 表示自定义列表中的每一项解释说明
</dl>
注意： dl标签 中只允许包含dt/dd标签  dt/dd标签可以包含任意内容

------------表格------------
<table>  table标签 表格整体
    <caption>  表格大标题 默认在表格整体顶部居中位置显示
        <h1>学生成绩单</h1>
    </caption>
    <tr>
        <th></th>  th标签 表头单元格
        <th></th>
    </tr>
    <tr>  tr标签 表格的每一行
        <td></td>  td标签 表格的单元格
        <td></td>
     </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
    
表格结构标签：
<thead></thead>  表格头部
<tbody></tbody>  表格身体
<tfoot></tfoot>  表格底部

表格属性：
border: 表格的边框
rowspan: 合并单元格  多行  垂直方向合并
colspan: 合并单元格  多列  水平方向合并

----------表单--------------
<input type="text">
type属性值：
text 文本框，用于文本输入     placeholder 属性 文本占位符
password  密码框，用于输入密码
radio  单选框，用于多选一   name属性--分组  checked属性--默认选中
checkbox  多选框，用于多选多  checked属性--默认选中
file  文件选择，用于之后上传文件  multiple--选中多个文件
submit  提交按钮用于提交
reset  重置按钮，用于重置
button  普通按钮，默认无功能，之后配合js添加功能   value--修改默认值

<form action=""></form>  将表单包裹起来按钮功能才可配合使用

button按钮标签  
<form action="">
    <input type="text" name="" id="">
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
   <button type="button">普通按钮</button>
</form>
注意：谷歌浏览器中button默认是提交按钮  button标签是双标签，更便于包裹其他内容：文字，图片等

---------下拉菜单---------------
<select name="" id="">
        <option value="">上海</option>
        <option value="" selected>北京</option>   selected--默认选中
        <option value="">广州</option>
        <option value="">深圳</option>
</select>

----------textarea文本域标签--------------
<textarea name="" id="" cols="30" rows="10"></textarea>
cols  宽度
rows  行数
------------------------
label标签  绑定与input标签的区域
<input type="checkbox" name="" id="a1"><label for="a1">敲代码</label>

-----------语义化标签-------------
没有语义的标签：
div 独占一行
span  一行可以显示多个

-------------HTML空格合并现象--------------------
多个空格解析后只会展示一个空格
用字符实体解决

字符实体类型：
&nbsp;  空格
&lt;  小于号 <
&gt;  大于号 >
&amp;  和号 &
&quot;  引号 "
&apos;  撇号 '  （IE不支持）
&cent;  分  
&pound;  磅 
&yen;  元
&euro;  欧元
&sect;  小节
&copy;  版权
------------------------------------------------
有语义的标签
<header>网页的头部</header>
<nav>网页的导航</nav>
<footer>网页的底部</footer>
<aside>网页的侧边栏</aside>
<section>网页的区块</section>
<article>网页的文章</article>
------------------------------------------------
####################################################################
属性
title  鼠标悬停时显示的文本
width  宽度
height  高度 
####################################################################

网页特效

############################################################################
--- offset 系列属性
element.offsetParent  // 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop  // 返回元素相对带有定位父元素上方的偏移
element.offsetLeft  // 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth  // 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight  // 返回自身包括padding、边框、内容区的高度，返回数值不带单位

--- client 系列属性
element.clientTop   // 返回元素上边框大小
element.clientLeft  // 返回元素左边框大小
element.clientWidth   // 返回自身包括padding 内容区的宽度，不含边框，返回数值不带单位
element.clientHight   // 返回自身包括padding 内容区的高度，不含边框，返回数值不带单位

--- scroll 系列属性
element.scrollTop    // 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft   // 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth  // 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight // 返回自身实际的高度，不含边框，返回数值不带单位

-- 页面被卷去的头部
window.pageYoffset

############################################################################
--- 立即执行函数
-- 格式一
(function(){})()
-- 格式二
(function(){}())
############################################################################
--- 移动端触摸事件
touchstart  // 触摸
touchmove   // 移动触摸
touchend   // 离开

div.addEventListener('touchend', function(){})

-- 触摸事件对象
touches  // 正在触摸屏幕的所有手指的一个列表
targetTouches  // 正在触摸当前DOM元素上的手指的一个列表
changedTouches  // 手指状态发生了改变的列表，从无到有，从有到无变化
############################################################################
第三章学习到 3-18  移动端插件使用及轮播图实现

############################################################################
--- 边框图片
border-image-source   // 用在边框的图片的路径
border-image-slice   // 图片边框内偏移（裁剪的尺寸，一定不加单位，上右下左顺序）
border-image-width   // 图片边框的宽度（需要加单位）（不是边框的宽度时边框图片的宽度）
border-image-repeat   // 图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸

############################################################################

响应式布局

############################################################################

/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {
    body {
        background-color: pink;
    }
}

/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width: 1200px) {
    body {
        background-color: skyblue;
    }
}

##################################################################
-- bootstrap  框架
-- 超小屏
< 768px
col-xs-*
容器宽度 100%

-- 小屏幕
>= 768px
col-sm-*
容器宽度 750px

-- 中等屏幕
>= 992px
col-md-*
容器宽度 970px

-- 大屏幕
>= 1200px
col-lg-*
容器宽度 1170px

网站
https://v3.bootcss.com/

############################################################################

移动端布局

##############################################################
-- 布局
display: flex;
justify-content: center;

使用justify-content调节元素在主轴的对齐方式
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

align-items: center;
使用align-items调节元素在侧轴的对齐方式

align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

-- flex
flex: 2   注意 : 只占用父盒子剩余尺寸 份数
使用flex属性修改弹性盒子伸缩比

-- flex-direction
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
属性值 作用
row 行, 水平(默认值)
column * 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上

-- flex-wrap
使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示 : flex-wrap: wrap;

-- align-content
调整行对齐方式 ：align-content  取值与justify-content基本相同

###############################################################
-- 移动端适配  rem 旧 vw/vh 新
- rem

###############################################################

元素显示模式

##########################################################
-------------------------------------------
块级元素
属性: display: block
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
div, p, h, ul, li, 等
-------------------------------------------
行内元素
属性：display: inline
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a, span, b, u, i, s, strong, ins, em, del 等
-------------------------------------------
行内块元素
属性：display：inline-block
显示特点：
1.一行可以显示多个
2.可以设置宽高
代表标签：
input, textarea, button, select
-------------------------------------------
元素显示模式转换
display: block;  转换块元素
display: inline-block;  转换行内块元素

注意事项：
1. p标签不能再嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素 但不能嵌套a标签
-------------------------------------------
##########################################################
 

正则表达式

##########################################################
--- 正则表达式

-- 1、利用 RegExp 对象来创建正则表达式
var regexp = new RegExp(/123/);

-- 2、 利用字面量创建 正则表达式
var rg = /123/;

-- 测试正则表达式是否规范 test();  // true 符合  flase 不符合
rg.test(123);

-- 正则符号
^ $  // 边界符 开始  结尾
[]   // 字符类  /[abc]/ 包含abc的都是true  /^[abc]$/ 三选一  /^[a-z]$/ 范围中任一个
-- 量词符
*  // 0或者多次
+  // 出现1次或者多次
?  // 1次或者0次
{3}  // 重复3次
{3, }  // 对于等于三次
{3, 16}  // 大于等于三 小于等于16

-- 小括号表示优先级高

-- 正则替换
 str.replace(/机器/gi, '**')  // g 全局匹配， i 忽略大小写  replace 默认值替换第一个 加上g可以替换所有
##########################################################

ajax 跨域

###################################################################
--- jQuery中的Ajax
说明：浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，
提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。

-- jQuery中发起Ajax请求最常用的三种方法如下：
- $.get()
语法示例：
$.get(url, [data], [callback])  // data 是object对象 参数  callback 请求成功的回调函数
$.get('http://www.liulongbin.top:3006/api/getbooks', {
            id: 14262
        }, function(res) {
            console.log(res)
        })

- $.post()
$.post(url, [data], [callback])  // data 是object对象 参数  callback 请求成功的回调函数
$.post('http://www.liulongbin.top:3006/api/addbook', {
            bookname: '金瓶梅w',
            author: '小猪佩奇',
            publisher: '上海图书馆',
        }, function(res) {
            console.log(res)
        })
- $.ajax()
$.ajax({
    type: 'GET',
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    data: {
        id: 14262
    },
    success: function(res) {
        console.log(res);
    },
    error: function(res) {

    }
})

###################################################################
-- XMLHttpRequest  使用
XMLHttpRequest 简称 xhr

-- GET
function fnxhr() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
            console.log(typeof xhr.responseText);
            console.log(JSON.parse(xhr.responseText));
            console.log(JSON.parse(xhr.responseText).status);
        }
    }
};

-- POST
function fnxhrpost() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('bookname=水w浒传ww&author=小李&publisher=武汉出版社');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
            console.log(typeof xhr.responseText);
            console.log(JSON.parse(xhr.responseText));
            console.log(JSON.parse(xhr.responseText).status);
        }
    }

};
-- url 编解码
var a = encodeURI('黑马')  // 编码
decodeURI(a)  // 解码
###################################################################
-- 数据交换格式

- XML 是一种数据载体

- JSON 也是一种数据载体
- 对象结构
对象结构在JSON中表示为{}括起来的内容
key 必须是使用英文双引号包裹的字符串  value 的数据类型可以是 数字，字符串，布尔值，null,数组,对象 六种类
- 数组结构
数组结构在JSON中表示为[] 括起来的内容，数据结构为["JAVA", "JS"] 数字，字符串，布尔值，null,数组,对象 六种类

-- JSON 对象转化
obj = JSON.parse(str)   // json字符串转对象 
str = JSON.stringify(obj)  // 对象转json 字符串

###################################################################
--- 新版 XMLHttpRequest
新特性：
1、可以设置HTTP请求时限  xhr.timeout = 3000  // 3s超时  xhr.ontimeout=function(){超时事件}
2、可以使用 FormData 对象管理表单数据
3、可以上传文件 利用 FormData 对象传参  
4、可以获取数据传输的进度信息 xhr.upload.onprogress = function(e){
    e.lengthComputable  // 当前上传的资源是否具有可计算的长度
    e.loaded  // 已传输的字节
    e.total  // 需传输的总字节
}

###################################################################
--- axios

-- GET 请求
- 方式一
function fnaxiosget() {
    var url = 'http://www.liulongbin.top:3006/api/get';
    var paramsobj = {
        name: 'zs',
        age: 20
    };
    axios.get(url, {
        params: paramsobj
    }).then(function(res) {
        console.log(res.data)
    })

}
- 方式二
function axiosget() {
    axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/get',
        params: { // GET参数要通过params属性提供
            name: 'zs',
            age: 20
        }
    }).then(function(res) {
        console.log(res.data)
    })
}

-- POST 请求
- 方式一
function fnaxiospost() {
    var url = 'http://www.liulongbin.top:3006/api/post';
    var paramsobj = {
        address: '北京',
        location: '顺义区'
    };
    axios.post(url, {
        params: paramsobj
    }).then(function(res) {
        console.log(res.data)
    })

}

- 方式二
function axiospost() {
    axios({ 
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: { // GET参数要通过params属性提供
            address: '深圳',
            location: '龙岗区'
        }
    }).then(function(res) {
        console.log(res.data)
    })
}

###################################################################
-- 同源策略
同源指的是两个url的协议、域名、端口一致，反之则是跨域

-- 跨域
浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

浏览器 -》发起请求 -》服务器响应数据 -》浏览器收到跨域请求数据 -》 同源策略限制 数据被拦截无法显示

--- 解决跨域请求的两种方案 JSONP 和 CORS

-- JSONP
出现的早，兼容性好（兼容低版本IE）. 是前端程序员解决跨域问题，被迫想出来的一种临时解决方案，
缺点是支支持GET请求，不支持POST请求
$.ajax({
    // 使用ajax 发起 jsonp 请求
    dataType: 'JSONP',
    // 自定义参数
    jsonp: 'cd',
    // 自定义回调函数名
    jsonpCallback: 'abc',
    url: 'http://www.liulongbin.top:3006/api/getbooks?name=zs&age=20',
    success: function(res) {
        console.log(res)
    }
})
-- CORS 
出现的较晚，他是W3C标准，属于跨域Ajax请求的根本解决方案，支持GET和POST请求，缺点是不兼容某些低版本浏览器
1、 CORS 主要在服务器端进行配置。客户端无须做任何额外的配置，即可请求开启了CORS的接口
2、 CORS 在浏览器中有兼容性。只有支持XMLHttpRequest Level2的浏览器，才能正常访问开启了CORS的服务端口
（IE10+, Chrome4+, FireFox3.5+）

主要原理通过配置一些 Access-Control-Allow-* 相关的响应头来解决

###################################################################
--- 防抖 通过定时器实现
如果事件被频繁触发，防抖能保证只有最后一次触发生效，前面N次触发都会被忽略
--- 节流阀
如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择地执行一部分事件

###################################################################

--- JWT 认证机制
JWT 是目前最流行的跨域认证解决方案

不存在跨域时 推荐用 session认证
存在跨域时 推荐用JWT 认证

总结： 用户的信息通过Token 字符串的形式，保存在客户端浏览器中，服务器通过还原Token字符串的形式来认证用户身份

JWT 通常由三部分组成，分别是Header， Payload, Signature

Payload 部分是真正的用户信息，它是用户信息经过加密之后生成的字符串
Header 和 Signature 是安全相关的部分，只是为了保证 Token 的安全性

JWT 通常被存储在LocalStorage 或 sessionStorage 中
客户端每次与服务器通信，都要带上这个JWT 的字符串，从而进行身份认证，推荐做法是 JWT 放在 http 请求头的
Authoritarian 中 例如 Authoritarian: Bearer <token>
###################################################################

浏览功能 BOM
页面元素 DOM  
WEB APIs 是 js 的应用

############################################################################
--- DOM
-- 选择器

- 根据类返回对象   H5
document.getElementsByClassName('box');
- 根据选择器返回第一个元素对象  H5
document.querySelector('#nav');
- 根据选择器返回所有元素对象集合  H5
document.querySelectorAll('.box');

--- 特殊元素 body html
document.body  // 返回body元素对象
document.documentElement  // 返回 html 元素对象

############################################################################
--- 事件
-- 鼠标事件
- onclick   // 鼠标点击左键触法
- onmouseover  // 鼠标经过触发
- onmouseout  // 鼠标离开触发
- onfocus   // 获取鼠标焦点触发
- onblur  // 失去鼠标焦点触发
- onmousemove  // 鼠标移动触发
- onmouseup  // 鼠标弹起触发
- onmousedown  // 鼠标按下触发

-- 文本
div.innerText = '新内容'  // 修改元素内容  不识别html标签  非标准  去除空格换行
div.innerHTML = '新内容'  // 识别html标签  W3C标准  保留空格换行

-- 样式
- style属性修改
div.style.backgroundColor = 'red';
div.style.width = '100px';
- 类修改
div.className = '新类名'  // 直接用会覆盖原来的类
原类名 temp = div.className;
新类名 div.className = 'temp 新类名'  // 拼接老的 使老的类保留

-- 自定义属性操作
div.getAttribute('属性名')
- 设置属性值
div.setAttribute('属性名', '值');
- 移除属性
div.removeAttribute('属性名')
############################################################################
--- 节点操作
节点概念： 一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3  （文本节点包括文字、空格、换行等）

-- 父级节点
div.parentNode  // 得到离元素最近的父级节点 找不到父节点 返回 null

-- 子节点
div.childNodes  // 所有子节点 包含元素节点  文本节点 标准不常用

div.children  // 获取所有的子元素节点  实际开发中常用

-- 返回第一个子元素  实际开发中使用
div.children[0]  // 第一个
-- 返回最后一个子元素  实际开发中使用
div.children[div.chlidrebn.length - 1];   // 最后一个

-- 兄弟节点
div.nextSibling   // 得到下一个兄弟节点  元素节点 文本节点
div.previousSibling  // 上一个兄弟节点

div.nextElementSibling;  // 得到下一个兄弟元素节点    IE9
div.previousElementSibling;  // 得到上一个兄弟元素节点 IE9

-- 创建添加节点
var li = document.createElement('li');  // 创建
node.appendChild(li);  // 添加
node.insertBefore(child, 指定元素);  // 添加

-- 删除节点
node.removeChild(child)   // 删除子节点
javascript:;  // 阻止链接跳转

-- 克隆节点
node.cloneNode()  // 如果括号参数为空或者flase  是浅拷贝 只复制节点本身，不克隆里面的子节点

-- 三种创建元素方式的区别
- document.write()  创建元素
区别：直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

- innerHTML  创建元素
区别：拼接字符串慢  如果采用数组模式则更快，结构复杂些

- document.createElement()  创建元素
区别：快
############################################################################
--- 事件高级

-- 注册事件两种方式

- 传统
btn.onclick = function(){}   // 特点：注册事件的唯一性

- 监听事件  addEventListener()  IE9之前不支持此方法 可使用 attachEvent() 代替
eventTarget.addEventListener(type, listener, useCapture)
type：事件类型字符串，如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。

-- 删除事件
- 传统
btn.onclick = null;  // 达到解绑效果

- 监听事件删除
eventTarget.removeEventlistener(type, listener, useCapture);  // 删除事件

############################################################################
--- DOM事件流

-- 事件对象
div.onclick = function(event){
    console.log(event)  // 事件对象
    console.log(this)  // 返回事件绑定的元素
    console.log(event.target)  // 返回点击的元素
    console.log(event.type)  // 返回事件类型
    event.preventDefault()  // 阻止默认行为
    event.stopPropagation()  // 阻止冒泡
}
############################################################################
--- 常用的键盘事件
-- keyup  // 键盘弹起事件
-- kedown // 键盘按下时触发
-- keypress  // 按下时触发  不识别功能键 ctrl shift等  区分按键大小写

############################################################################
--- DOM概述
- 文档对象模型 document

--- BOM概述
-- 浏览器对象模型  window
- 传统
window.onload = function(){
    // 窗口加载完毕再执行代码
}
- 新 监听事件可以绑定多个
window.addEventListener('load', function(){
    // 窗口加载完毕再执行代码  
})

- DOMContentLoaded  DOM加载完就执行  适用于 图片 flash 样式表比较多的情形
window.addEventListener('DOMContentLoaded', function(){
    // 窗口加载完毕再执行代码  
})

############################################################################
--- 定时器
setTimeout(function(){}, 2000)  // 2000单位时毫秒  省略时间代表立即执行 只调用一次
var timer1 = setTimeout(function(){}, 2000);  // 给定时器取名
- 停止定时器 clearTimeout(timer1);

-- setInterval   // 每隔一段时间 调用一次

############################################################################
--- location 对象
location.href  获取或者设置 整个url
location.assign()  跟href一样 可以跳转页面（也成为重定向页面）可以回退页面
location.replace()  替换当前页面，因为不能记录历史记录所以不能回退页面
location.reload()  重新加载页面，相当于刷新按钮或者 f5 如果参数为true 强制刷新 ctrl+f5
location.host  返回主机（域名）
location.prot  返回端口号 如果未写返回空字符串
location.pathname  返回路径
location.search  返回参数
location.hash  返回片段  # 后面内容 产检与链接 锚点
############################################################################
--- navigator 对象
navigator.userAgent  # 获取设备信息
############################################################################
--- history 对象
history.forward()   前进
history.back()   返回
history.go(1)   前进几步

############################################################################

css 样式及动画

##########################################################
引入方式:
内嵌式： 小案例
外联式： 项目中
行内式:  配合js使用
##########################################################
选择器种类：
标签选择器
类选择器
id选择器
通配符选择器
--------------------类选择器----------------------------
结构：.类名 {css属性名：属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1、所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3、一个标签可以同时有多个类名，类名之间以空格隔开
4、类名可以重复，一个类选择器可以同时选中多个标签
-------------------------------------------------

--------------------id选择器----------------------------
结构：#id属性值 {css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1、所有标签上都有id属性
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3、一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
-------------------------------------------------------

--------------------通配符选择器----------------------------
结构：* {css属性名： 属性值;}
作用：找到页面中所有的标签，设置样式
注意点：
1、开发中使用极少吗，只会在及特殊情况下才会用到
2、在基础班小页面中可能会用于去除标签默认的margin和padding
* {
    margin: 0;
    padding: 0;
}
-------------------------------------------------------
##########################################################
字体和文本样式
属性：
font-size  字体大小  单位px
font-weight  字体粗细 正常 normal 加粗 bold 纯数组 正常 400 加粗 700
font-style  字体样式  正常 normal 倾斜 italic
font-family  字体系列 
---------------------
字体font 相关属性连写
顺序要求：
style weight size/line-height family
swsf(稍微舒服)  -- 顺序记忆口诀

省略要求：
只能省略前两个，后两个是不要省略（如果省略了取值，相当于设置了默认值）
---------------------
文本缩进：
text-indent  2em--缩进两格
---------------------
文本水平对齐方式：
text-align  left--左对齐  center--居中对齐  right--右对齐
可以让以下元素水平居中：
文本  span标签  a标签  input标签  img标签
给以上元素父元素设置属性即可
---------------------
文本修饰
text-decoration  underline--下划线 line-through--删除线 overline--上划线 none--无装饰线
---------------------
水平居中方法总结margin: 0 auto
可以让div、p、h(大盒子) 水平居中  一般针对有固定宽度的元素
给元素本身设置属性 
---------------------
行高：
line-height  取值  数字+px  倍数(当前标签font-size的倍数)
line-heigth: 1  取消行间距
---------------------
##########################################################
颜色取值
rgb表示法 rgb(0,0,0)  rgb(255,255,255)
rgba表示法  a表示透明度，取值范围是0-1  rgba(255,255,0.5) rgba(255,255,.3)
十六进制表示法  #000000  #ffffff  #e92322 简写  #000  #fff
##########################################################

css三大特性
-------------------------------------
继承性
特性：子元素由默认继承父元素样式的特点
可以继承的常见属性：
1.color
2.font-size、font-weight、font-style、font-family
3.text-indent、text-align
4.line-height
注意点：
可以通过调试工具判断样式是否可以继承
-------------------------------------
层叠性
特性：
1.给同一个标签设置不同的样式-此时样式会层叠叠加-会共同作用在标签上
2.给同一个标签设置相同的样式-此时样式会层叠覆盖-最终写在最后的样式会生效
注意点：
1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠行判断结果
-------------------------------------
优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < ！important
注意点：
1. !important写在属性值的后面，分号的前面！
2. !important不能提升继承的优先级，只要是继承优先级最低
3. 实际开发中不建议使用!important.
-------------------------------------
复合选择器优先级
权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
比较规则：
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3.如果最终所有数字相同，表示优先级相同，则比较层叠性（谁在下面，谁说了算）
注意点：!important如果不是继承，则权重最高

复合选择器中： 行内样式的个数--一级 id选择器的个数--二级 类选择器的个数--三级 标签选择器的个数--四级
-------------------------------------
##########################################################
-- 平面转换
transition: all .5s;      动画过渡
transform: translate()    平面移动
transform: rotate(角度)    平面旋转  角度单位: deg
transform-origin: top bottom left right    平面旋转中心点
transform: scale(缩放倍数)    平面缩放
opacity: 0    透明度 0-1取值范围

-- 渐变色
background-image: linear-gradient(
                transparent, -- 透明
                rgba(0,0,0, .6)
            );
##########################################################
-- 空间转换
transform: translate3d(x,y,z)  取值 像素单位 百分比
perspective: 800px   透视效果 取值800px-1200px  加在父级 产生距离屏幕的视觉效果
transform: rotateZ(角度) 沿着Z轴旋转

-- 立体呈现
transform-style: perserve-3d  呈现立体图形
transform: scale3d(0.5, 1.1, 2)  3d缩放

-- 动画
animation: change 10s;   
/* 一. 定义动画：从200变大到600 */
/* @keyframes change {
    from {
        width: 200px;
    }
    to {
        width: 600px;
    }
} */
/* 二. 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */

/* @keyframes change {
    0% {
        width: 200px;
    }
    10% {
        width: 500px;
        height: 300px;
    }
    100% {
        width: 800px;
        height: 500px;
    }
} */

-- animation 复合属性
/* animation: change 1s linear; */
            /* 分步动画 */
            /* 1s 延迟时间 */
            /* 3: 重复3次播放 */
            /* animation: change 1s steps(3) 1s 3; */
            /* infinite 无限循环 */
            /* alternate 往返效果 */
            /* animation: change 1s infinite alternate; */
            /* 默认值, 动画停留在最初的状态 */
            /* animation: change 1s backwards; */
            /* 动画停留在结束状态 */

-- animation 拆分写法
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态
backwards：第一帧状态
animation-timing-function 速度曲线 steps(数字)：逐帧动画
animation-iteration-count 重复次数 infinite为无限循环
animation-direction 动画执行方向 alternate为反向
animation-play-state 暂停动画 paused为暂停，通常配合:hover使用

##########################################################

ES6才有类的概念

##################################################################
# ES6才有类的概念
--- 对象
-- 创建一个类
class Star{
    // 构造函数
    constructor(uname, age){
        this.uname = uname;
        this.age = age; 
    }
    // 类方法
    sing(){
        console.log('唱歌');
    }
}

-- 类继承
class Father{
    constructor(){

    }
    money(){
        console.log(100);
    } 
}

// 继承 Father类  extends 是继承关键字
class Son extends Father{
    constructor(){
        super(x, y);   // 调用了父类中的构造函数  放在子类this之前
        this.x = x;    
        this.y = y;
    }

}
##################################################################
--- ES6之前对象不是基于类创建的，而是一种称为构建函数的特殊函数来定义对象和他们的特征
注意：构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用，我们可以
把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面
1、构造函数用于创建某一类对象，其首字母大写
2、构造函数要和new一起使用才有意义

构造函数示例：
function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function(){
        console.log('我会唱歌');
    }  // 最好放在原型对象上面
}

ldh = new Star('刘德华', 18);  // 实例化对象ldh
Star.sex = '男';  // 静态成员   只能通过构造函数访问，不能通过对象访问

-- 构造函数和原型对象
原型 是一个对象 prototype  是原型对象
原型的作用是 共享方法 
Star.prototype.sing = function(){
        console.log('我会唱歌');
    }
// 一般公共的方法是放到原型对象上面的  在创建对象时原型对象不会再开辟新的内存空间 所有对象可以共享

-- 原型对象另一种写法
Star.prototype = function(){
        constructor: Star,   // 将原型对象指回 Star
        sing: function(){
            console.log('唱歌')
        },
        movie: function(){
            console.log('电影')
        }
    }

-- call 方法
fn.call(0)  // call可以改变函数this的指向

-- 继承
- 父构造函数
function Father(uname, age){
    // this指向父构造函数的对象实例
    this.uname = uname;
    this.age = age;
}

- 子构造函数
function Son(){
    // this指向子构造函数的对象实例
    Father.call(this, uname, age);  // 将父构造函数的this指向子this，并继承父this的属性
}

Son.prototype = new Father();  // 继承方法
Son.prototype.constructor = Son;  //指回原来的构造函数
##################################################################
--- ES5中新增的方法

-- forEach  迭代(遍历)数组
var arr = [1, 2, 3];
arr.forEach(function(value, index, array){
    console.log(value);
    console.log(index);
    console.log(array);-
})

-- filter  筛选数组
var arr = [12, 66, 4, 88];
var newArr = arr.filter(function(value, index){
    return value > 20;
});
console.log(newArr);

-- some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value){
    return value >= 20;
})

-- every 

-- trim 方法 去除字符串两侧空格 

-- filter  与 some 对比
1、filter 查找满足条件的元素，返回的时一个数组，而且是把所有满足条件的元素返回来
2、some 查找蛮子条件的元素是否存在， 返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环

--- 对象新增方法
-- objects.keys()  // 获取对象自身所有的属性 返回一个数组
-- objects.defineProperty()  // 定义新属性或修改原有的属性
objects.defineProperty(obj, 'num', {
    value: 1000,     // 目标属性值
    writable: false,  // 如果值为flase 不允许修改这个属性值， 默认值也是false
    enumerable: false  // 目标属性是否可以被枚举
    configurable: false  // 目标属性是否可以被删除或是否可以再次修改特性
})
##################################################################
--- 函数进阶
-- 改变函数内this的指向  js提供三种方法 call() apply()  bind()

-- call()

-- apply()

-- bind()
var o = {
    name: 'andy'
}
function fn(a, b){
    console.log(this);
    console.log(a+b); 
}
var f = fn.bind(o, 1, 2)
f();
1、不会调用原来的函数，可以改变原来函数内部的this指向
2、返回的是原函数改变this之后产生的新函数
3、如果有的函数我们不需要立即调用，但是又想改变函数内部的this指向此时用bind

-- call apply bind 总结
- 相同点
都可以改变函数内部的this指向
- 区别点
1、call和apply会调用函数，并且改变函数内部this的指向。
2、call和apply传递的参数不一样，call传递参数aru1,aru2 形式，apply必须数组形式[arg]
3、bind 不会调用函数，可以改变函数内部this指向，

- 主要应用场景
1、call 经常做继承
2、apply经常跟数组有关系，比如借助于数学对象实现数组最大最小值
3、bind 不调用函数，但是还想改变this指向，比如改变定时器内部的this指向
##################################################################
--- ES5 严格模式  IE10之后
'use strict';  // 开启严格模式

-- 严格模式下的变化
1、变量名必须先声明再使用  以前不声明默认是全局变量
2、不能随意删除已经声明好的变量
3、严格模式下全局作用域中的this是undefined，以前指向的是window
4、严格模式下，如果构造函数不加new调用，this会报错
5、定时器this还是指向window
6、时间、对象还是指向调用者
7、函数不能有重名的参数；
8、函数必须声明再顶层，新版本JavaScript会引入‘块级作用域’（es6已经引入），为了与新版本接轨，
不允许在非函数的代码块内声明函数

##################################################################
-- 闭包Closure 指有权限访问另外一个函数作用域中变量的函数。
function fn(){
    var num = 10;
    function fun(){
        console.log(num);
    };
    fun();
}
fn();
- 闭包的主要作用：延申了变量的作用范围。

-- 浅拷贝
Object.assign(o, obj);

-- 深拷贝
封装函数
function deepCopy(newobj, oldobj){
    // 判断我们的属性值属于那种数据类型
    // 1、获取属性值
    var item = oldobj[k];
    // 2、判断这个值是否是数组
    if(item instanceof Array){
        newobj[k] = [];
        deepCopy(newobjp[k], item)
    }else if (item instanceof Object){
        // 判断这个值是否是对象
        newobj[k] = {};
        deepCopy(newobj[k], item)
    }else {
        // 4、属于简单数据类型
        newobj[k] = item;
    }
}
##################################################################
--- ES6的新增语法

-- let 新增声明变量的关键字
let 声明的变量只在所处的块级有效  声明的变量具有块级作用域
1、防止循环变量变成全局变量
2、不存在变量提升
var num = 10;
if(true){
    console.log(num);  // 报错 因为块作用域声明了num 所以num不能升级到全局变量中查找
    let num = 20;
}

-- const 新增声明变量的关键字  声明的常量具有块级作用域

1、声明常量，必须赋初始值
2、常量赋值后不可更改（内存地址不可更改） 基本数据类型不可更改  复杂数据类型 内部值可以改 地址不能更改

-- 数组解构
let [a, b, c] = [1, 2, 3];

-- 对象解构
let person = {name: 'zhangsan', age: 18, sex: '男'};
let {name, age, sex} = person;
console.log(name);
console.log(age);
console.log(sex);

let {name: myname} = person;  // 将匹配到的name 赋值给 myname
console.log(myname);

-- 箭头函数
定义方式： 
() => {}
const fn = () => {};  // 函数赋值给变量 
fn();  // 调用

-- 箭头函数省略情况
- 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略函数体大括号
const sum = (num1, num2) => num1+ num2;
sum(10， 20);
- 如果形参只有一个，可以省略小括号
const fn = v => {alert(1)};  // 只有一个形参情况
fn(10);

-- 箭头函数不绑定this 箭头函数没有自己的this关键字
如果在箭头函数中使用this  this关键字将指向箭头函数定义位置中的this

-- 对象是不可以产生作用域的

-- 剩余参数
const sum = (...args) => {};

- 剩余参数解构配合使用
let arr1 = ['张三', '李四', '王五'];
let [s1, ...s2] = arr1;  // s1 是数组第一个值  s2是去掉第一个值后的数组

-- 扩展运算符
扩展运算符可以应用与合并数组
let ar1 = [1, 2, 3];
let ar2 = [4, 5, 6];
let ar3 = [...ar1, ...ar2];
- 合并数组的第二种方式
ar1.push(...ar2);

-- 利用扩展运算符将伪数组转换为真正的数组

-- Array 的扩展方法
构造函数方法 Array.from()
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike);
console.log(arr2); // 输出 ["a", "b", "c"]
let arr2 = Array.from(arrayLike， item => item*2);  // 第二个参数是一个函数

- find()
用于找出第一个符合条件的数组成员，如果没有找到就返回undefined
let ary = [{
    id:1,
    name: '张山'
}, {
    id: 2,
    name: '李四'
}];
let targ = ary.find(item => item.id=2);  // 传入函数参数

- findIndex
返回索引符合条件的第一个值的索引
let arr3 = [1, 5, 6, 7]
console.log(arr3.findIndex(item => item > 5));

-- includes 方法
是否包含 返回的是一个布尔值

--- 字符串
-- 模板字符串
模板字符串  `这是一个字符串`
模板字符串可以解析变量
let name = '效力';
let zname = `我愿意为你${name}`;
console.log(zname);

-- 字符串开头结尾
let str = 'hello world~!';
str.startsWith('hell0') // ture
str.endsWith('!') // true

-- 字符串重复repeat
console.log('y'.repeat(5))  // 重复5次

--- Set 数据结构
- 它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成Set数据结构
const s1 = new Set();
console.log(s1.size);
const s2 = new Set(['a', 'b', 'b']);
console.log(s2)
console.log(s2.size)

- s1.add(1).add(2).add(3)  // 添加 返回Set
- s1.delete(2) //  删除 返回布尔值
- s1.has(1)   //  判断是否存在  返回布尔值
- s1.clear()  // 清空set 

- 遍历
s1.forEach((v) => {
    console.log(v)
})
##################################################################

es6模块化

-- ############################################################
-- nodejs 默认语法规范是 commonjs
可以通过配置 "type": "module", 设置为 es6 语法规范
-- ############################################################

复合选择器

##########################################################
-----------------------------
后代选择器
语法： 选择器1 选择器2 {css}
注意：
1.后代包括：儿子、孙子、重孙子
2.后代选择器中，选择器与选择器之间通过空格隔开
-----------------------------
子代选择器
语法：选择器1 > 选择器2 {css}
注意：
1.子代只包括：儿子
2.子代选择器中，选择器与选择器之间通过>隔开
-----------------------------
并集选择器
语法：选择器1 , 选择器2 {css}
注意：
1.并集选择器中的每组选择器之间通过，分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
2.并集选择器中的每组选择器通常一行写一个，提高代码可读性
-----------------------------
交集选择器
语法：选择器1选择器2 {css}
注意：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面
-----------------------------
hover伪类选择器
语法：选择器:hover{css}
注意：
1.伪类选择器选中的元素的某种状态
-----------------------------
##########################################################
nth-child  结构伪类选择器