2016.10

2016.10.9

1、在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。

Element.classList

这个classList对象里有很多有用的方法：

{
length: {number}, /* # of class on this element(length 属性，表示元素类名的个数，只读) */

add: function() { [native code] }, /* 表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。 */

contains: function() { [native code] },/*。表示往类名列表中是否包含该类名。如果包含，则返回true, 不包含，则false.  */

item: function() { [native code] }, /* by index ( item() 支持一个参数，为类名的索引，返回对应的类名)*/

remove: function() { [native code] },

toggle: function() { [native code] }/* 若类名列表中有此类名，移除之，并返回false; 如果没有，则添加该类名，并返回true.*/

}

2、HTML5+App

使用 HTML5+开发的移动 App 并非 mobileweb 页面。mobileweb 的文件存放在 web 服务器上，而移动 App 的文件存放在手机本地，编写移动 App 的 html、js、css文件被打包到 ipa 或 apk 等原生安装包，在手机客户端运行。

mobile web，在 HBuilder 里新建项目时，属于 web 项目。不要放置到移动 App 项 目下。mobile web 项目也不能真机联调和打包。

3.可作为参考

ui比较

amazeui，功能和bootstrap重复，官方解释是对中文排版做了优化，个人觉得有点多余，bootstrap就很好。

bootstrap，适合移动端浏览网页适配，移动端浏览效果不错，但是还是网页。

jquery mobile，专门对移动端做定制，看起来就像手机应用一样，js+css（300k），国外的，不推荐，有坑。

mui，这个是推荐的，比较了jqmobile和mui，显然mui效果样式好点，估计也会有坑，但是支持国产吧。

2016.10.10

1、pageX,clientX,screenX,offsetX区别:

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但

始终，它们的最大值不会超过你浏览器可视区域。

特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动。

offsetX/offsetY: 得出的结果跟pageX/pageY一样，既然如此，它有什么存在价值？因为：

特别说明：只有IE支持！相当于IE下的pageX,pageY。

e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop = e.pageY

2、SDK：（software development kit）软件开发工具包。

3、ADB全称Android Debug Bridge, 是andriod sdk里的一个工具，用这个工具可以直接操作管理android模拟器或者真实的andriod设备。

它的主要功能有：
1）运行设备的shell（命令行）
2）管理模拟器或者设备的端口映射
3）计算机和设备之间上传/下载文件
4）将本地apk软件安装至模拟器或android设备。

5、herf=”#”是一个空连接,点击后回到页面的顶部.
href=”###”,是连接到页面的##处,是一个锚连接.

6、aaa或aaa

这样点击不会回到页顶。

2016.10.11

1、em（font size of the element）是指相对于父元素的字体大小的单位。

2、 兼容性问题：

pageXOffset 和 pageYOffset 在 IE 8 及之前版本的IE不支持, 使用”document.body.scrollLeft” and “document.body.scrollTop” 来取代。

3、media查询：width/height 和 device-width/device-height。

device-width/height使用screen.width/height来做为的判定值。该值以设备的pixels来度量
width/height使用documentElement.clientWidth/Height即viewport的值。该值以CSS的pixels来度量

4、像素

物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。

设备像素比(device pixel ratio)

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 ＝ 物理像素 / 设备独立像素

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

2016.10.12

5、获取验证码
$(‘#codeBtn’).html(‘‘+startTime+’秒后重新獲取’);

6、

7、响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。

媒体查询

有好几种方式使用媒体查询，在现有样式表中使用@media规则，或是在一个新样式表里使用@import规则，或是用link标签给html文档引用一个单独的样式表。通常推荐在现有样式表中使用@media规则，以避免多次发送http请求：

HTML

CSS
/* @media Rule */
@media all and (max-width: 1024px) {…}
/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {…}

媒体查询在ie8及其以下的浏览器不能支持。不过，幸好有一些插件对它们进行处理兼容。

Respond.js是一个轻量级的插件，只是查找媒体查询中的min/max-width，在那些只使用媒体查询中完美的适用。CSS3-MediaQueries.js是一个更复杂，功能更强大的插件，支持更复杂的媒体查询。不过，记住一点，就是任何插件都会有性能问题，也就是放缓网站的访问速度。所以在使用插件前要确保这个性能的损失是值得的。

8、为了让嵌入媒体充分响应，嵌入元素需要在父元素中绝对定位。父元素需要宽度100%，这样缩放才能基于视窗宽度。父元素还需要一个为0的高度，是为了在ie下面触发haslayout。

在父元素底部设置留白，这个值也是依赖于视频的宽高比。他容许父元素的高度跟宽度使用相同的比例。如果一个视频的宽高比是16比9，9除以16等于56.25%，所以底部需要一个56.25%的留

白。底部留白而不是头部留白，这是专门用于处理ie5.5的bug，还有父元素是绝对定位的情况。

2016.10.13

1、代码解析：

[].forEach.call($$(““),function(a){ a.style.outline = “1px solid #”+(~~(Math.random()(1<<24))).toString(16)})//给每个元素添加一个标签

2、获取相对于canvas的当前坐标

var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;

2016.10.14

1、z-index属性

z-index属性指定两件事:

1）当前元素的堆叠顺序

2）当前元素是否建立新的堆叠上下文

该属性仅适用于定位元素。即拥有 relative, absolute, fixed属性的 position 元素。

z-index属性有三个可能的值:

值 描述
auto 默认。堆叠顺序与父元素相等。
< integer > 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

如果未指定 z-index 的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，文档中后来声明的元素具有更高的堆叠顺序。

除了指定的 z-index，元素的堆叠顺序是由大量的因素控制的。元素按照下面表格顺序进行堆叠。

位置 描述 CSS

1 (bottom) 元素构成堆叠上下文 z-index: < integer >

2 负堆叠顺序的子元素 z-index: < negative integer > position: relative | absolute | fixed

3 文档流中，非内联，非定位子元素 display: /* not inline */ position: static

4 非定位浮动子元素 float: left | right position: static

5 内联流，非定位子元素 display: /* inline */ position: static

6 堆叠顺序为0的子元素 z-index: auto | 0 position: relative | absolute | fixed

7(top) 堆叠顺序为正的子元素 z-index: < position intege > position: relative | absolute | fixed

CSS中会产生新的层情况还有很多种：

当一个元素位于HTML文档的最外层（元素）

当一个元素被定位了并且拥有一个z-index值（不为auto）

当一个元素被设置了opacity（不为1），transforms（不是none）, filters, css-regions, paged media等属性

flex item，也就是父元素的display设置了flex或者inline-flex值，早期的box值不行

grid item,也就是父元素的display设置了grid或者inline-grid值

isolation:isolate

元素的mix-blend-mode值不为normal

元素的overflow-scrolling值不为touch

元素的filter值不为none

元素的perspective值不为none

元素的motion-path值不为none

will-change:transform;创建上下文

定位元素发生嵌套，应用祖先元素优先原则，但是祖先元素的z-index为auto这个原则就失效。

层叠水平：

从低到高：层叠上下文（background/border）- 负z-index - block块状水平盒子 - float浮动盒子 - inline/inline-block水平盒子 - z-index:auto或看成z-index:0 - 正z-index

定位元素默认z-index:auto可以看成是z-index:0，（z-index为auto则不创建上下文，z-index为0则可以创建上下文，但是在IE7浏览器下z-index:atuo会创建上下文）;
z-index不为auto的定位元素会创建层叠上下文；
z-index层叠顺序的比较止步于父级层叠上下文。

避免z-index混乱：对于非浮层元素避免设置z-index值；z-index值没有任何道理超过2！！

2016.10.16

1、JSONP：

注意JSONP只支持GET请求，不支持POST请求。

2、跨域问题解决方案

1、通过JSONP跨域

jsonp的最基本原理是：动态添加一个