1、标签元素——块元素行元素
块元素:div,dl(定义列表),form,fieldset -form控制组,h1~h6,menu - 菜单列表,ol - 排序表单,p - 段落,table - 表格,ul - 非排序列表
p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
行元素:a - 锚点,br - 换行,em - 强调,i - 斜体,img,input,label,small,span,strong,textarea,u
行元素的特点:(1)设置宽高无效
(2)margin仅左右方向有效,上下无效,padding设置上下左右都有效,
(3)不会自动换行
块元素的特点:(1)能够识别宽高
(2)margin和padding上下左右均有效
(3)可以自动换行
(4)多个块元素标签卸载一起,默认排列方式为从上至下
行内块元素特点:(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
块元素=>行元素:display:inline
块元素=>行内块元素:diaplay:inline-black
行元素=>块元素:display:black,转换后就有后则的特点
css三种脱离文档流的方法:
(1)浮动(float),(2)绝对定位(absolute),(3)固定定位(fixed)
1、在JS中使用到保留字作为标识符时会提示“Identified Expected“意思为预期标识符
2、yield
Generator函数是协程(多个线程相互协作完成异步任务)在ES6中的实现,最大的特点是可以交出函数的执行权(即暂停执行)
而yield命令表示执行到此处,执行权将交给其他协程,也就是说yield命令是异步两个截断的分界线,协程遇到yield命令就暂停,等到执行权返回,再从展厅的地方继续往后执行。
function* gen(x){
var y = yield x + 2;
return y;
}
整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。
Generator执行方法:
var g=gen(1);
g.next()//{value:3,done:false}
g.next()//{value:undefined,done:true}
3、数据类型转换
(建议参考地址https://javascript.ruanyifeng.com/grammar/conversion.html#)
JavaScript是一种动态类型语言,变量没有类型限制,可以随时赋予任意值
1、虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的。如果运算符发现,运算子的类型与预期不符,就会自动转换类型。比如,减法运算符预期左右两侧的运算子应该是数值,如果不是,就会自动将它们转为数值
2、强制类行转换:
Number(321)//321 Number('321')//321 Number('321abc')//NaN 如果不能被解析为数值时返回NaN
Number(true)//1 Number(false)//0 Number(undefined)//NaN Number(null) //0
Number
函数将字符串转为数值,要比parseInt
函数严格很多。基本上,只要有一个字符无法转成数值,整个字符串就会被转为NaN
。
parseInt
逐个解析字符,而Number
函数整体转换字符串的类型。
parseInt
和Number
函数都会自动过滤一个字符串前导和后缀的空格
parseInt('\t\v\r12.34\n') // 12
Number('\t\v\r12.34\n') // 12.34
当Number的参数是对象时:将返回NaNcy,除非是包含单个数值的数组
String()函数可以将任意类型转化为字符串
转化规则:
- 数值:转为相应的字符串。
- 字符串:转换后还是原来的值。
- 布尔值:
true
转为字符串"true"
,false
转为字符串"false"
。 - undefined:转为字符串
"undefined"
。 - null:转为字符串
"null"
。
String
方法的参数如果是对象,返回一个类型字符串;如果是数组,返回该数组的字符串形式。
Boolean()
它的转换规则相对简单:除了以下五个值的转换结果为false
,其他的值全部为true
。
undefined
null
-0
或+0
NaN
''
(空字符串)
所有对象的布尔值都是true
,
自动壮话为字符串
字符串的自动转换,主要繁盛在字符串剑法运算时,当一个值为字符串,另一个为非字符串,则后者转为字符串
除了加法运算符(+
)有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值
Promise的由来:如果依次读取多个文件,就会出现多重嵌套,代码不是钟祥发展,而是横向发展,很快会乱成一团,Promise就是解决这个问题提出的,允许将回调函数横向加载改成纵向加载
Babel 转码器
Babel是广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而再现有的环境执行,
例子:
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
$ npm install --save-dev babel-preset-latest
学习注意事项:
1、在局部作用域中在没有声明符的情况下给变量赋值,则这个变量为全局变量,但是因为局部作用域中定义的全局变量很难维护。给未经声明的变量赋值在严格模式下会导致抛出ReferenceError错误
2、typeof是操作符不是函数,因此例子中的圆括号可以用也可以不用
3、typeof null//返回的结果是object,因为特殊值null被认为是一个空的对象引用;null是空对象指针
4、对为声明和为初始话的变量进行typeof执行的结果都是undefined
5、alert(undefined==null)//true
6、浮点数值需要的内存空间是整数值的两倍
7、任何数值除以非数值返回的结果是NaN
8、NaN与任何数值都不想等,包括NaN本身
DOM模型概述
Document:整个文档树的顶层节点
DocumentType:doctype标签(比如<!DOCTYPE html>)
Element:网页的各种HTML标签(比如<body><a>)
Atrribute:网页元素的属性(比如class=“right”)
Comment:注释
DocumentFragment:文档片段
Node接口的属性
所有的DOM节点都继承了Node接口,拥有一些共同的属性和方法,这是DOM操作的基础
Node.nodeType
nodeType属性返回一个整数值,表示节点的类型
document.nodeType//9
document.nodeType===NodeDOCUMENT_NODE//true
- 文档节点(document):9,对应常量
Node.DOCUMENT_NODE
- 元素节点(element):1,对应常量
Node.ELEMENT_NODE
- 属性节点(attr):2,对应常量
Node.ATTRIBUTE_NODE
- 文本节点(text):3,对应常量
Node.TEXT_NODE
- 文档片断节点(DocumentFragment):11,对应常量
Node.DOCUMENT_FRAGMENT_NODE
- 文档类型节点(DocumentType):10,对应常量
Node.DOCUMENT_TYPE_NODE
- 注释节点(Comment):8,对应常量
Node.COMMENT_NODE
Node.nodeName
nodeName属性返回节点的名称
// HTML 代码如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeName // "DIV"
Node.nodeValue
nodeValue属性返回一个字符串,
只有文本节点(text)和注释节点有文本值,因此这两类节点的nodeValue可以返回结果,其他类型的节点一律返回null。同样的,也只有这两类节点可以设置nodeValue属性的值,其他类型的节点设置无效
Node.textContent
textContent属性返回当前节点和他的所有后代节点的文本内容
Node.ownerDocument属性返回当前节点所在的顶层文档对象,即document对象
Node.nextSibling属性返回紧跟在当前节点后米娜的第一个同级节点。如果当前节点后面没有同级节点则返回null
需要用到的两个属性:previousSbiling和previousElementSibling
previousSibling:获取元素的上一个兄弟节点;(既包含元素节点、文本节点、注释节点)
previousElementSibling:获取上一个兄弟元素节点;(只包含元素节点);
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
insertBefore方法接受两个参数,第一个参数是所要插入的节点newNode,第二个参数是父节点parentNode内部的一个子节点referenceNode