2016.10.9

1、在HTML5 API里，頁面DOM里的每個節點上都有一個classList對象，可以使用里面的方法新增、刪除、修改節點上的CSS類。使用classList，程序員還可以用它來判斷某個節點是否被賦予了某個CSS類。

Element.classList

這個classList對象里有很多有用的方法：

{ length: {number}, /* # of class on this element(length 屬性，表示元素類名的個數，只讀) */

}

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?。?/p>

2016.10.16

1、JSONP：

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

2、跨域問題解決方案

jsonp的最基本原理是：動態添加一個