知識點：
注意代碼分離：
-
- CSS表示層
- JS行為層
- HTML內容
標記良好的代碼就是一切！
Html：
- id實現頁內導航： id=here <a href="#here"/>
- XHTML ： <img /><br />為了向后兼容，反斜杠前有一個空格
JS：
- js關聯數組：vocalist[“piano”][name]=“Jhon”;
- js內建對象：Array()\Date()\Math
- 宿主對象：Form\Image\Element
- Var variable=setTimeout("functionName",1000ms);隔一段時間執行一次函數
- clearTimeOut(variable);清除等待隊列中的函數
- parseInt("")的返回值永遠是整數
- element.property 可以為元素創建屬性
- Math.ceil(number);向大於方向舍入最接近的整數
- Math.floor(number);~~小於~~
- Math.round(7.53438);四舍五入：向最接近的整數舍入
- 當前頁面的urlwindow.location.href;
- String.indexOf(subString) ；
- String.splitting(char)：以char將string分成數組，char屬於前一個
- window.onload = functionName;
- /*頁面加載完畢再執行，可重寫使頁面加載時執行若干函數(eg:
- addLoadEvent(preparePlaceholder);
- addLoadEvent(prepareGallery);
- )*/
CSS：
- 選擇器、默認繼承，因此特殊性大的要后定義
- z-index 屬性設置元素的堆疊順序,數值越大，越在前面，PS：僅能在定位元素上奏效
- overflow:visible\hidden\scroll\auto;全看到、隱藏多出的部分、滾動條、又多出才有滾動條
- margin: 1em 10%;缺少4做外邊距從2右外邊距復制，缺少3下外邊距，從1上外邊距復制；百分數是相對於父元素算的
- display:inline-block;行內塊
- margin:auto;居中顯示
- list-style:none;去掉ul\li\id等元素的默認樣式
- text-decoration:none;a沒有下划線
- text-align:center;文字居中顯示
- imv的alt屬性有利於圖片被搜索到；title屬性，鼠標懸停會顯示
- <html lang=“zh-CN”>
- <meta charset="utf-8">
- 定義列表<dl><dt><dd>標題和描述
- search robot對em、strong的內容會關注
- 引用：block quote 自動縮進; cite屬性標志引用來源
- <pre>保留換行、顯示代碼
DOM方法和屬性：
0、
CSS-DOM:
元素節點:
1\與位置相關的屬性：firstChild\lastChild\nextSibling\previousSibling\parentNode\ChildNodes
2\與本身有關屬性：nodeType\nodeName
3\style 屬性，返回對象:elementt.style.property,屬性以駝峰命名方式，不能檢索外部CSS文檔的信息
4\element.className 可讀可寫 ；等價於element.setAttribute("class","className")
1、
-
- element.childNodes 含給定元素節點的子元素數組
- node.firstChild=node.childNodes[0]
- node.lastNode
- node.nodeValue 返回節點的值
- Reference=node.cloneNode(deep：true\false)；返回指向新節點的指針，true子節點一起復制，但屬性節點會一起復制
- Parent=element.removeChild(node);
- Parent=element.replaceChild(new,old);
- insertAfter()自己寫
- attributeValue = element.getAttribute(attributeName);返回屬性值
- booleanValue=element.hasChildNodes;
2、
-
- node.nodeType 代表節點的數字，12種：元素節點1、屬性節點2、文本節點3、
3、
| 1級DOM(DOM Core): | HTML-DOM | 返回類型 |
| document.getElementById(“idValue”) | return 元素節點對象 | |
| document/element.getElementByTagName(“tag name”) | documet.TagName（eg：document.body == document.getElementByTagName("body")[0] | return 整個文檔/元素下所有的對象的數組 |
| element/object.getAttribute(“Attribute”) | element.attributeName | return 屬性值 |
| object.setAttribute(“Attribute”,”Attribute Value”) | element.attributeNAme = Attribute Value | 不會改變文檔本身的源代碼：動態刷新不影響文檔靜態內容 |
4、
用JS寫入HTML：node.nodeValue="value";
舊方法：
-
- document.whrite(“HTML statement”)
- innerHTML();讀寫，無法區分插入、替換，並且會替換源文件
DOM：只改變DOM節點樹，對源文件不做物理性改變/*不要濫用，重要內容不要用這種方式添加*/
-
- createElement("nodeName");返回指向新節點的指針
- document.createTextNode("Text");返回指向新節點的指針
- parent.appendChild(child);
- insertBefore();
Ajax：
-
- 異步：不用每次做出一個改動就重新刷新整個頁面；
- 快速透明：google的及時關鍵詞提示；
- XMLHttpRequest
===============優雅的分割線====================
寫優雅的代碼應該注意什么？
- 程序被執行的順序：從上到下、if分支、while等循環、中斷異常
- 程序化設計：一個入口一個出口；/*實際中為了功能和代碼的優雅可以不遵循*/
黃金准則：
1、循序漸進：從最核心的內容（用HTML給核心內容加上最正確的標簽，使她呈現正確的結構），然后逐步充實內容！
2、預留退路
寫HTML需要注意什么？
1、使用的標記必須與做出的doctype聲明保持一致！
2、寫語義正確的HTML代碼
3、Html 變量名應該用功能性命名，而不是樣式命名
HTML5的意義：
標准 跨瀏覽器 標准的重要性 兼容
/*瀏覽器嗅探，很難做到面面俱到，還使代碼復雜*/
CSS不要過度依賴類選擇器\ID選擇器，要組合使用類型后代id和類\偽類
Js要注意空的判斷，使程序不會異常退出：
1、檢測dom方法、檢測對象，為程序預留退路（沒有js也不影響內容的正常顯示）
2、檢測不到對象，程序也能正常運行
================================================================================
參考：《JavaScript DOM編程藝術》pdf和隨書代碼