随笔

1，math计算数学方法

　　math.floor(x)　　　　下舍入

　　math.ceil(x)　　　　  上舍入

　　math.abs(x)　　　　  绝对值

　　math.round(x)　　　　四舍五入

　　math.random()　　　　0~1随机数

2，数组方法

　　　concat()　　　　合并数组

　　　filter()　　　　　返回符合条件对的所有元素的数组

　　　find（）　　　　返回符合条件的数组的元素（第一个值）

　　　findindex()　　　返回符合条件的数组的元素的索引值（第一个元素的索引值）、

　　　forEach（）　　调用数组的每个元素并将元素传递给回调函数

　　　includes（）　　判断数组中是否包含一个指定的值（true，false）

　　　indexof（）　　  判断数组中是否含有某个指定的值并返回值所出现的索引位置，没有返回-1

　　    isArray（）　　　判断对象是否为数组（返回：true/false)

　　　join()　　　　　　将数组的所有元素放入一个字符串

　　　map（）　　　　  通过指定函数处理数组的每个元素，并返回处理后的数组

　　　pop（）　　　　　删除数组的最后一个元素并返回删除的元素、

　　　push（）　　　　　向数组的末尾添加一个或更多元素并返回新的长度

　　　shift（）　　　　　删除数组的第一个元素并返回删除后的数组

　　　slice（）　　　　　选取数组的一部分并返回一个新数组

　　　sort()　　　　　　排序

　　　　（a-b升序，b-a降序）

　　　　　var points=[40,100,1,5]

　　　　　points.sort(function(a,b){return a-b});//升序

　　　　　points.sort(function(a,b){return b-a});//降序

　　　splice()　　　　　添加或删除数组中的元素（splice(开始位置x,添加或删除个数y，item1...item4添加元素)/有两个参数时表示删除）

3，字符串方法

　　concat（）　　　　连接两个或多个字符串返回连接后的字符串

　　indexof（）　　　　返回字符串中检索指定字符第一次出现的位置

　　replace（）　　　　在字符串中用一些字符串替换另外一些字符串

　　search（）　　　　查找字符串中指定的字符串，没有则返回-1

　　slice（）　　　　　提取字符串的片段，在新的字符串中返回被提取的部分

　　split（）　　　　　把字符串分割为字符串数组

　　substr（）　　　　从起始索引还提取字符串中指定数目的字符

　　subustring（）　　提取两个指定索引之间的字符

　　toString（）　　　　返回一个字符串

4，行内元素： a  b  span  select  strong img  input

　　块级元素：div  ul  ol  li  dl  dt  dd  h1...h5   p

　　空元素：br  hr  link  img  input

5,   ES6新特性

　　增加块作用域，

　　增加let const，let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。

　　解构赋值，解构的源，解构赋值表达式的右边部分，解构的目标，解构赋值表达式的左边部分。let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3

　　字符模板

　　函数参数扩展（函数参数可以使用默认值，不定参数以及拓展参数），

　　增加class类的支持，

　　增加箭头函数，

　　增加模块和模块加载（支持原生模块化），

　　math  number  string  array  object增加新的API

　6，html5新特性

　　语义化标签 

 

<hrader></header>	定义了文档的头部区域
<footer></footer>	定义了文档的尾部区域
<nav></nav>	定义文档的导航
<section></section>	定义文档中的节（section、区段）
<article></article>	定义页面独立的内容区域
<aside></aside>	定义页面的侧边栏内容
<detailes></detailes>	用于描述文档或文档某个部分的细节
<summary></summary>	标签包含 details 元素的标题
<dialog></dialog>	定义对话框，比如提示框

　　增强型表单

　　　　color　　　　　　选取颜色

　　　　email　　　　　　e-mail地址的输入域

　　　　month　　　　　　选择一个月份

　　　　number　　　　　数值输入域

　　　　tel　　　　　　　定义电话号码

　　　　url　　　　　　　URL地址域的输入字段

　　　　time 　　　　　　选择一个时间

　　　　week　　　　　　选择周和年

　　　　。。。等

　　音频和视频

　　　　音频  <audio> </audio> 支持MP3，WavOgg

　　　　视频<video></video>支持MP4，WebM，Ogg

　　本地离线存储 localStorage长期存储数据，浏览器关闭后数据不消失

　　sessionStorage的数据在浏览器关闭后自动删除

　　Canvas绘图

　　SVG绘图

　　　　（Canvas和SVG区别：svg是一种使用XML描述2D图形的语言，Canvas通过js来绘制2D图形）

 　　地理定位（Geolocation）

　　拖动API

　　　　drastart：拖动开始

　　　　drag：拖动中、

　　　　dragend：拖动结束

　　　　事件：

　　　　dragenter：拖动着进入

　　　　dragover：拖动着悬停

　　　　dragleave：拖动着离开

　　　　drop：释放

　　（新技术）

　　Web Worker

　　Web Storage

　　WebSocket

7，css选择器，继承属性，优先级

　　id选择器（#myid）

　　类选择器（.myclassname）

　　标签选择器 (div,h1,p)

　　相邻选择器(h1+p)

　　子选择器（ul>li)

　　后代选择器（li a）

　　通用选择器（div~p）

　　通配符选择器（*）

　　属性选择器（a[rel="externam\l"]）

　　伪类选择器（a:hover,li:nth-child）

　　可继承：font-size,font-family ,color，ul，li,dl,dd,dt

　　不可继承：border,padding,margin,width,height

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

8，css3新特性

　　CSS3实现圆角（border-radius），阴影（box-shadow），

　　对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）

　　transform：rotate（9deg）scale（0.85,0.90）translate（0px，-30px）skew（-9deg，0deg）//旋转  ，缩放，定位，倾斜

　　增加了更多的css选择器 多背景rgba

　　在css3中唯一引入的伪类元素 :: selestion

　　媒体查询，多栏布局

　　border-image（边框图像）

9,CSS3选择器

　　一  基本选择器

　　　　*　　通用选择器，　　div　　标签选择器，　　.info　　class选择器，　　#footer　　id选择器 

　　二  层次选择器

　　　　E F　　后代选择器，　　E>F　子选择器，　　E+F　　相邻选择器，E~F　　通用选择器　

　　三  动态伪类选择器

　　　　E:link　　　　链接伪类选择器　　　　选择匹配的E元素，而且匹配元素被定义为超链接并未被访问过，常用于锚点链接

　　　　E:visited　　   链接伪类选择器　　　　选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过，常用于锚点链接

　　　　E:active　　　用户行为选择器　　　　选择匹配的E元素，且匹配元素已被激活，常用于锚点链接和按钮上

　　　　E:hover　　　用户行为选择器　　　　选择匹配的E元素，且用户鼠标停留在E元素上 IE6以下只支持a：hover

　　　　E:focus　　　用户行为选择器　　　　选择匹配的E元素，而且匹配元素获取焦点

　　四  目标伪类选择器

　　　　E:target　　选择匹配的E元素且匹配元素被相关URL指向

　　五  UI元素状态伪类选择器语法

　　　　E:checked　　　选中状态伪类选择器　　　　匹配选中的复选按钮或单选按钮表单元素

　　　　E:enabled　　　启用状态伪类选择器　　　　匹配所有启用的表单元素

　　　　E:disabled　　　不可用状态味蕾选择器　　　匹配所有禁用的表单元素

　　六  结构伪类选择器

　　　　

E:first-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n)  中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

 

7，否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

 

8，属性选择器语法

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

注：例<div class="links item"></div>其中a[class="links"]{……} 是找不到匹配元素，只有a[class="links item"]{……}才匹配