每日总结2020.1.1-2020.1.15

2020/1/2

1、hr标签有一个标签属性color 可以设置水平线颜色，hr可以不可以设置宽度高度默认在盒子里水平居中
2、用户只有选择权力的表单，必须事先准备好value属性
3、label 标签的第二种使用情况：
将文字用label标签包裹起来
给input一个id
给label的for属性里面直接写id
3、h5新增的表单属性：
autofocus自动获取焦点
autocomplete 自动补全(满足提交三要素 表单域 name属性 提交按钮) 前提 必须提交过一次
当需要一个中间带减号的css属性时，DOM要求用驼峰命名法

2020/1/3

1、当一个父元素高度设死之后，即使子元素高度溢出之后，也不会影响后面的布局
2、定位元素，只要整体优先级比你高，子元素优先级就比你高
3、什么是标签语义化：
让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。
4、标签语义化的优势:
HTML结构清晰
代码可读性较好
无障碍阅读
搜索引擎可以根据标签的语言确定上下文和权重问题
移动设备能够更完美的展现网页（对css支持较弱的设备）
便于团队维护和开发
5、流式布局的优缺点：
优点：
可以适应不同尺寸的屏幕
缺点：
如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
6、弹性布局的优缺点：
优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上
7、bootstrap使用框架内容最好写在栅格布局的盒子里面，在其里面再套一层盒子

2020/1/5视口

1、视口：
2、只要进行移动端布局，盒子约定俗成都需要加上自动内减。
3、 流式布局（百分比布局都要设置高度）
特点：
1、盒子的高度一般写死，宽度一般自适应
2、小图片、小图标、文字大小一般写死的
3、大图片一般都是宽度自适应（100%），高度默认等比例缩放
流式布局两种常用方法：
1、两边盒子定位+父盒子padding或者是两边盒子定位加上中间盒子margin
2、两边盒子宽高写死浮动+中间盒子设置高度宽度自适应+overflow:hidden;(注意在html结构中，要先写两边的盒子，再写中间的盒子)
4、触发了bfc的盒子：
1、解决margin的塌陷现象
2、清除浮动
3、触发了bfc的盒子不能在浮动元素下面待着的——》会被浮动元素挤到一边去

2020/1/6

1、基础：js语法、ES6、webpack、npm
2、el:限制了一个vue处理dom的范围，data:定义了数据
3、vue标签指令：v-for:可以帮助我们去循环list(item里面的list)
4、传统前端开发中使用的mvp设计模式
M:model(数据层) P(presenter逻辑层) view(视图层)
文本溢出是内容的话，一定是给父盒子加的，如果是行内元素的话，也是给父盒子加

2020/1/7

1、this和函数的声明没有关系，只和函数的调用有关系
this是函数自带的对象，只能在函数内部使用，指的是触发函数的对象

2、jquery可以帮我们改变css样式： jquery支持css中的选择器
jquery简化了运动：jquery不管是获取元素、更改样式、添加事件等都是批量的，在jquery中一般不会出现for循环
jquery简化dom操作，直接兼容IE678不用再书写能力检测

3、jquery就是一个js库，全局只向外暴露了一个$()函数，书写都是从$()开始
$函数接收的是一个选择器(css)返回jquery对象。可以继续打点调用该对象具有的属性和方法jquery得到的是jquery对象，js得到的是js对象，谁的方法谁调用jquery对象和js对象相互转换jquery对象转换为js对象：直接再jquery对象后面加相应的索引值($(“p”)[索引值].innerHTML = “我是一个js对象”
js对象转换为jquery对象：在用$()将js对象包裹起来，注意不要加""，因为()里面是一个对象，不是一个标签选择器
4、选择器：jquery非常灵活的一个地方就是选择器的使用，css怎么书写，jquery就怎么书写
$()函数的参数书写时必须加""，因为接收的是字符串选中任意一个:eq(索引值)注意：从js开始没有特殊说明，序号都是从0开始注意：双引号是字符串的标志，如果要将变量放到字符串中，就要使用拼串5、jQuery函数：jquery最开始向外暴露的是jQuery(),但是为了方便，改成了$();
注意Q大写
6、jQuery常用方法：看手册–》关注参数，关注返回值
1、size();
jquery对象也有length属性，表示jquery对象有多少元素。
size();等价于length属性 注意：size() 没有参数，返回值就是jquery对象有多少元素
2、css();
1、读取：css(“属性名”); 返回值是 计算后 的属性值。得到的是一个带有单位的字符串。如果参与运算需要转换为number类型
字符串如何转换为number类型：parseInt(string)或者parseFloat(string)
注意：以前js获取属性值，但是属性值必须写在style标签当中(行内式)
除了行内式，其他比如内嵌式或者外链式都是计算后的
2、设置：只设置一个属性，属性名既可以是短横，又可以驼峰
css(“属性名”,“属性值”);
属性值可以写单位，也可以不写单位，也可以不写单位，但是写了单位就必须书写""
同时设置多个属性，需要json。
注意：json里面是用：，单一属性里面使用，
绑定事件
第一种写法
$().click(function() {});
第二种方法
用on产生一个绑定，on不是事件，是一种产生绑定的方法，第一个参数写事件名，第二个参数写匿名函数，要做的事情直接放在匿名函数里面
$().on(“click”, function() {});
css()的一种特殊用法

$("#btn").click(function () { 
          		$("#para2").css("width","+=10px");
      	});

3、show()和hide()和toggle() 不写参数表示干蹦效果，书写参数不用书写单位，表示毫秒，以动画形式出现或者消失
1、show()出现。元素的开始状态 display:none, 终点：display:block;
2、hide()消失。元素的开始状态 display:block, 终点：display:none;
3、toggle()元素的出现和消失切换（类似开关）

4、slideDown()和slideUp()
slideDown()：表示徐徐展开，不一定是向下展开，高度是由0–》所设定的height
开始状态：display:none;终点状态：display:block slidedown不一定是向下
slideUp()：表示慢慢合起
slideToggle():切换

5、fadeIn()和fadeOut()
fadeIn()：淡入 开始状态：display:none;终点状态：display:block
fadeOut():淡出
fadeToggle():切换
fadeTo(时间,透明度)：透明度的改变 fadeTo(1000,.3)；

6、html()
可以读取元素的内部文本
设置：在()内书写参数

7、addClass()和removeClass() 添加类名和移除 类名（不加点）
addClass()
removeClass()
注意不要加点不要加空格

8、attr() 设置元素原有属性的属性值

7、呼吸轮播图：关键就是摞一起
两个函数同时控制一个变量，信号量：控制不同函数之间通信的量，是一个全局的量(就是全局变量的 意思)

8、节点：
1、我$(this) this指的是 触发事件 的对象 --》比如很多p都绑定了click事件，谁点击了this就指谁
$(this)变为jquery对象。有3种特殊情况$()里面不需要加""的，着重记一下：this触发事件的对象、$(window)、$(document)
2、父亲 parent()，只能选中元素的亲父亲，不能选中其他的祖先元素
3、儿子children() 只能选中亲生儿子 children()可以添加参数，指的是指定的亲儿子
4、亲兄弟siblings() 只能选中亲兄弟 siblings()可以添加参数，指的是指定的亲兄弟
5、对象可以连续打点调用对象，节点也可以连续打点调用节点(注意：在dom树上进入了哪一个节点，就从该节点出发)
6、所有的祖先元素(包括html):parents()
所有的后代元素：find()：必须写参数，指定后代元素是谁
后面第一个亲兄弟: next()
后面所有的亲兄弟：nextAll()
前面第一个亲兄弟：prev()
前面所有的亲兄弟：prevAll()
9、jquery中的序号问题：因为**$(“div p”)选中的是页面上所有的div 的后代p元素，会将所有的p大排队**
eq()表示大队列的排序。和亲兄弟的排名没有任何关系，无视父亲。eq所在大队列的不同，序号也可能不同

2020/1/8

jQuery:
1、index()表示亲兄弟的排名。无视什么类型，只要是同一个父亲节点就行，eq()表示大队列的排名
2、对应思想：this指的是触发事件的对象，编程常用的一种思想就是对应思想
3、先排他，后对应
4、each()表示每一个，参数是一个匿名函数，小括号中书写遍历到的元素要做的事情
5、$(this)表示each()遍历到的该对象(看到每一个就想到each())
6、each方法中的匿名函数还可以接受一个参数i,表示遍历到的对象的序号，i表示的是选中队列的序号，和亲兄弟的排名无关
7、animate()有两个参数，第一个参数必须用json表示，即使只有一个属性也要用json,表示元素运动的终点状态
第二个参数表示运动完成需要的时间，不写单位，表示ms
8、能参与annimate()的属性：数值型的都行(不能参与animate()的属性：background-color和background-color和css3的复杂属性，border-radius可以)
9、animate()的执行顺序：同一元素的不同animate()，顺序执行。不同元素的animate()，一起执行
annimate()和css的关系：css的改变是瞬间完成的，annimate()是异步语句，多条语句同时执行，异步语句一般会有一个回调函数，表示异步语句完成之后要做的事情，写在函数中（做饭 微波炉肉解冻 ），
annimate({},运动时间,回调函数);
slideDown()、slideUp()、fadeIn()、fadeOut()、show()、hide()都是异步语句，都可以书写回调函数
10、delay() 动画延迟，只能用于动画之前，必须书写时间参数，不写单位，表示毫秒
11、stop()表示运动的元素立即停止运动。参数接收两个布尔值(默认是false)
stop(第一个参数，第二个参数)第一个参数表示是否清空动画的队列，第二个参数表示是否立即完成当前动画
stop() 等价于 stop(false,false) 表示立即进入下一个动画，立即停止当前动画
stop(true) 等价于stop(true,false):表示清空动画队列，立即停止当前动画，接受新任务，不完成之前任务
stop(true,true) 表示清空动画队列，立即停止并完成当前动画
stop(false,true):表示立即进入下一个动画，立即停止并完成当前动画
12、防止动画的积累(防流氓)
stop(true)（立即响应新任务）
is()表示"是不是"返回布尔值，要么是true要么是false，表示元素是否具有某种状态
只有当元素不运动时接收新任务，is(":animated"),如果is(":animated")为true，不接受新任务，如果is(":animated")为false,接收新任务

js快捷键
使用vscode快捷输出console.log，clg+tab或者col+tab

2020/1/9

1、呼吸轮播图：前一张图片并没有完全消失，后面的就出现，因为异步语句
2、交叉淡入淡出轮播图：呼吸轮播图的变种，布局关键，所有图片在一起
3、虽然jquery选择元素的能力很强，但是提前将需要的元素保存在变量中也是有必要的，一般习惯在变量名前书写$
4、mouseover,mouseenter都是鼠标进入的意思，不同点：mouseenter:只有进入选中的元素才会触发事件，mouseover其进入其子元素也会触发事件
5、border-collapse是给表格table设置的
6、事件/函数触发的途径，加小括号会触发，绑在事件身上也会触发(不需要加小括号)
7、克隆猫腻图：clone(),
8、追加：apendTo(),追加猫腻图到unit的节点上

2020/1/10

一、传统轮播图：
1、猫腻图clone().appendTo(父节点)
2、右按钮：信号量改变，先拉动 后验证信号量
3、小圆点有两种可能性，需要定义变量判断一下
4、左按钮：信号量改变，先验证信号量，再拉动
二、轮播图技巧：
1、淡入淡出轮播图：
布局思路：所有图片摞一起
编程思路：老图淡出，信号量改变，新图淡入
2、淡入淡出轮播图变种：
编程思路：信号量的改变和新图淡入都是写在回调函数中
3、传统轮播图：
1、火车法：
布局关键所有图片并排排列
克隆猫腻图
右按钮编程思路：先拉动后验证
左按钮编程思路：先验证再拉动
2、三位置法：老图淡出，信号量改变，新图淡入
4、间歇模型
编程思路：使用定时器，我们要想使图片每2000ms更换一次，然后完成动画的时间是600ms，那么定时器的时间应该是它们的加和，所以应该是2600ms。

2020/1/12

1、函数直接自己执行this指的是window,
2、setInterval里面的this也是调用对象window
3、call()在js和jquery中，可以改变函数内部this的指向。参数是要指向的对象，函数调用call()
4、$each()一般用于遍历数组或者json对象
第一个参数：数组或者json对象
第二个参数：遍历到的对象要做的事情。function(i,j){}i表示遍历到的对象的序号，j表示遍历到对象的值

2020/1/13

1、node是一个基于Chrome B8引擎的js运行环境，是除了浏览器之外的、可以让js运行的环境
2、node.js是一个让js运行在服务端的开发平台，是使用事件驱动，异步非阻塞I/o,单线程，跨平台的js运行环境
3、智能提示：npm install --save-dev @types/node

2020/1/14

1、ajax：局部 异步 刷新
2、ajax的作用：获取服务器的数据
3、ajax的效果：在不刷新整个页面的情况下，通过一个url地址获取服务器的数据，然后进行页面的局部刷新
4、ajax的全称:Asynchronous javascript and xml ,就是使用js代码获取服务器的数据
5、JSON：javascript的对象表示法，是一种轻量级的数据交换格式，和语言无关

2020/1/15

1、node模块：每个模块就是具有处理不同功能的方法的集合
2、fs处理文件 querystring 把字符串解析成对象 url模块 把url字符串转换成对象 引入http模块 处理http请求
3、浏览器会解析res.write()传的字符串，也会识别html标签，将其解析