人机交互复习

人机交互复习

四种解决边框塌陷的方法：

• 第一种方式：父级元素里最后一个为块元素，使用该块元素的属性，对前面的兄弟元素清除两端浮动，加一个<h1></h1> 对该块元素h1使用清除浮动

• 第二种方式：直观，直接可以给父级加高度

• 第三种：父级元素overflow

//对父级元素
#father{
overflow: hidden;
}

• 第四种：伪类after

#father:after{
    display: block;
    content: "";    /*假设父级里面有内容，然后用clear清除，跟第一种方法类似*/
    clear: both;
}

弹性布局（Flex布局）：

• 容器属性：

  • flex-direction 交换主轴和交叉轴的位置

  • flex-wrap 是否换行

  • flex-flow 按赋值缩放

  • justify-content 主轴对齐方式

  • align-items 交叉轴对齐方式

  • align-content 多根轴对齐方式

有些属性值是有固定的语义：

reverse：表示起点从左到右、从上到下的反转,即改变轴的起点；

column：表示交换主轴和交叉轴的位置，子元素正常按照主轴排列；

initial：设置该属性为它的默认值；

inherit：从父元素继承该属性；

unset：从其父级继承该属性，如果没有继承父级样式，则将该属性重新设置为初始值。

• 项目属性：

flex-shrink 属性：flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小

如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小 负值对该属性无效。

.item { 
flex-shrink: <number>; /* default 1 */ 
}

order：order属性定义项目的排列顺序数值越小，排列越靠前，默认为0

item { 
order: <integer>; //参数为integer也即为整数
}

flex-grow 属性：flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话） 如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

.item { 
flex-grow: <number>; /* default 0 */ 
}

flex-basis 属性：flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小

.item {
flex-basis: <length>; | auto; /* default auto */ 
}

flex 属性:flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto后两个属性可选,该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

.item {
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] 
}

align-self 属性:align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.item { 
align-self: auto | flex-start | flex-end | center | baseline | stretch; 
}

清除浮动：

clear

div {
   clear: left
}
​
div {
   clear: right
}
​
div {
   clear: both
}

动画

动画分类：

过度动画(transition)、帧动画(Animation)

帧动画的创建：

创建关键帧keyframes，创建之后才能使用Animation调用

过渡动画：直接调用transition

元素的变形（transform）：

四种变形函数：

位移：translate()

缩放：scale()

旋转：rotate()

倾斜：skew() 水平和垂直倾斜，水平倾斜高度不会变

JS

变量与常量

变量的定义：var、let

var与let的区别：

let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

全局作用域

var 和 let 声明的变量在全局作用域中被定义时，两者非常相似

let bar = 'hehe';
var baz = 'lala'; 

但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以

console.log(window.bar);  //undefined
console.log(window.baz); // 'able'

函数作用域

var 和 let 在函数作用域中声明一个变量，两个变量的意义是相同的。

function  aFun(){
    let bar = 'hehe'; // 函数作用域中的变量
    var baz = 'lala'; // 函数作用域中的变量
}

块作用域

在块作用域中两者的区别较为明显， let只在for()循环中可用，而 var是对于包围for循环的整个函数可用

function aFun1(){
    //i对于for循环外的范围是不可见的(i is not defined)
    for(let i = 1; i<5; i++){
        //  i只有在这里是可见的
    }
    // i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
    // i 对于for循环外的范围是可见的
    for(var i = 1;i<5; i++){
        // i 在for 在整个函数体内都是可见的
    }
    // i 对于for循环外的范围是可见的
}

let 和var 重新声明

var允许在同一作用域中声明同名的变量，而let不可以

let me  = 'foo';
let me  = 'bar'; //SyntaxError: Identifier 'me' has already been declared
​
var me = 'foo';
var me = 'bar'; //这里me被替代了，是可以重复声明的

es6中还有一个声明变量的命令const，const和let都是在声明的块作用域中有效，但是let声明的变量可变，值和类型都可以改变，没有限制。const声明额变量不能改变，所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值

const hehe; //报错，Missing initializer in const declaration
​
const a = 3;
a = 5; //报错，Uncaught TypeError: Assignment to constant variable.

let用了之后会进行空间释放，用的时候存在，不用的时候释放

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

如何获得变量的数据类型:

typeof()

typeof()的输出：

{ } 、[ ] 输出 object。

console.log( ) 输出 function。

注意一点：NaN 是 Number 中的一种，非Number 。

传入的类型	输出的类型	所蕴含意思
Number	Number	数据类型
Boolean	Boolean	布尔型
Undefined	Undefined	没有初始化、定义的值
Null	Object	不存在的对象
NaN	Number	Number中特殊数值
Object	Function
String	String	字符串

注：NaN与任何值（包括它本身）都不相等

数据类型转换：

一、转为字符串：使用 toString或者String。

1、toString()方法：注意，不可以转null和underfined

//转为字符串-->toString方法
var bool=true;
console.log(bool.toString());
//注意，toString不能转null和underfined.

2、String()方法：都能转

console.log(String(null));

3、隐式转换：num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

var a=true;
var str= a+"";
console.log('str');

二、转为数值类型

1、Number()：Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

console.log(Number(true));

2、parseInt():

var a="12.3px";
console.log(parseInt(a);
//结果：12.3.  如果第一个字符是数字会解析知道遇到非数字结束.
var a="abc2.3";
console.log(parseInt(a);
//结果：返回NaN，如果第一个字符不是数字或者符号就返回NaN.

3、parseFloat(): parseFloat()把字符串转换成浮点数,parseFloat()和parseInt非常相似，不同之处在与parseFloat会解析第一个. 遇到第二个.或者非数字结束如果解析的内容里只有整数，解析成整数。

4、隐式转换：

var str="123";
var num=str-0;
console.log(num);
//结果为数值型；

三、转换为Boolean()：0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

方法：

1、Boolean():

console.log(Boolean(2));

2、

var message;
if(message){};

3、隐式转换：！！

var str="123";
var bool=!!str;
console.log(str);

==与===的区别：

简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢，

这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.

操作数1 == 操作数2， 操作数1 === 操作数2

比较过程：

　　双等号==：

　　（1）如果两个值类型相同，再进行三个等号(===)的比较

　　（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：

　　　　1）如果一个是null，一个是undefined，那么相等

　　　　2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

　　三等号===:

　　（1）如果类型不同，就一定不相等

　　（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）

　　（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。

　　（4）如果两个值都是true，或是false，那么相等

　　（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等

　　（6）如果两个值都是null，或是undefined，那么相等

数组、函数

数组的创建两种方式：

var a=[];
​
var a = new Array();

函数的创建两种方式：

function 函数名(){
   //函数体
}
​
//函数表达式创建
var fn=function(){
    //函数体
}

new出来的就是对象

两种模型：

BOM：浏览器对象模型，最大的对象是window

• BOM中的几个方法：

  • 弹出一个警告框 alert()

  • 弹出一个确认框 confirm()

  • 弹出一个提示框 prompt()

  • 打开一个新窗口 open()

  • 滚动到指定位置 scrollTo()

  • 用setTimeout() 和 clearTimeout()设置和停止定时器

  • 用setInterval() 和 clearInterval()设置和停止定时器

BOM包含了history对象、location对象、document对象

• document对象的属性：

  • document.title //设置文档的标题（HTML的title标签）

  • document.bgColor //设置背景页面的颜色

  • document.fgColor //设置前景色（文本颜色）

  • documen.URL //设置URL属性在同一个窗口打开其他页面

  • document.linkColor //未点击过的链接颜色

  • document.cookie //设置和读出cookie

  • document.fileSize //设置文件大写，（注：只读属性）

  • document.charset //设置字符集

  • document.alinkColor //激活链接颜色（注：焦点在链接上）

  • document.vlinkColor //已点击过的链接颜色

  • document.fileCreatedData //文件创建日期（注：只读属性）

  • document.ModifiedDate //文件修改日期（注：只读属性）

• 常用的对象的方法

  • document.write() //动态向页面添加内容

  • document.createElement(Tag) //创建一个html标签对象

  • document.getElementById(ID) //获得指定Id的对象

  • document.getElementByClassName(className) //获得指定class值的对象（数组）

  • document.getElementByTagName（TagName） //获得指定的tag对象

  • document.body.appendChild(Tag) //向body中添加创建的新的标签对象

  • document.getElementByName(Name) //获得指定的Name值的对象

DOM可以做增删改查的操作，如：创建标签、删除标签等

JS的组成：

ES(ECMAScript标准)、DOM、BOM

• ECMAScript标准

  • 即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。

• DOM

  • 即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

• BOM

  • 即浏览器对象模型，Browser Object Model，用于操作浏览器，比如：弹出框、控制浏览器跳转、获取分等。

时间对象：

Date

对象的创建

//利用对象字面量创建对象
//属性之间用逗号隔开
const obj = {
name:"张三",
age:20
}
​
//利用 new Object创建对象
const obj = new Object()
obj.uname="张三"

事件

• 鼠标事件：

  • click：单击事件。

  • dblclick：双击事件。

  • mousedown：按下鼠标键时触发。

  • mouseup：释放按下的鼠标键时触发。

  • mousemove：鼠标移动事件。

  • mouseover：移入事件。

  • mouseout：移出事件。

  • mouseenter：移入事件。

  • mouseleave：移出事件。

  • contextmenu：右键事件。

  • onmousewheel：滚轮事件。

• 键盘事件：

  • okeydown:键盘被按下，如果一直按着键盘的按键，则okeydown事件会一直被触发。

  • onkeyup::松开键盘的按键

注：当需要获取判断键盘的哪一个按键被按下的时候，可以通过event的keyCode属性获取按键的编码。

• 表单事件：

  • onsubmit（绑定提交事件）

  • onfocus（聚焦） 与 onblur（失焦）

  • onchange（ 内容改变(在文本框输入数据) + 失焦 才会触发 )

  • oninput（输入事件）

事件的监听：

addEventListener()