一、HTMLhtyper text markup language 即超文本標記語言超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。標記語言: 標記（標簽）構成的語言.網頁==HTML文檔，由瀏覽器解析，用來展示的靜態網頁：靜態的資源，如xxx.html 動態網頁：html代碼... ...
一、HTML
htyper text markup language 即超文本標記語言 超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 標記語言: 標記（標簽）構成的語言. 網頁==HTML文檔，由瀏覽器解析，用來展示的 靜態網頁：靜態的資源，如xxx.html
動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的
標簽:
標簽的屬性:
<!DOCTYPE html>標簽:W3C的解析渲染頁面標準
head標簽:
<meta>
每個主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業界標準。以這些作為IE的特色，其中 一個風險就是舊版本網站無法正確的顯示。 為了將這個風險降到最低，IE6允許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"為預設，這會 使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱為"strict mode")特點是支持業界標準最為完善。 然而要利用這個增強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。 若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏 覽器無法辨識，IE6會將它以IE6 standards mode顯示。因為少數網站已經包含<!DOCTYPE>指令，相容性模式的 切換相當成功。這使網頁開發人員能選擇將他們的網頁轉移為standards mode的最佳時機。 隨著時間經過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說，IE6 不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE做特定的對應。 當 IE7增加了對全域選擇器的支持，那些依賴IE6特點的網站便無法偵測出這個新版本的瀏覽器。因此那些針對IE的 特定對應無法應用於IE7，造成這些網站便無法如他們預期的顯示。由於<!DOCTYPE>只支持兩種相容性模式，受到影 響的網站擁有者被迫更新他們的網站使其能支持IE7。 IE8 比之前的任何版本瀏覽器都更支持業界標準，因此針對舊版本瀏覽器設計的網頁可能無法如預期般呈現。為了幫 助減輕所有問題，IE8引入文件相容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件相容性在IE8增加 了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁無法在 ie8正確的顯示，你可以更新 你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器 編譯你的頁面。 這能讓你選擇將你的網站更新支持IE8新特點的時機。 當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確 定如何顯示該網頁。 如果該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式 （Quirks 模式）顯示該網頁。註意：X-UA-Compatible
<title>sb</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="hello.js"></script>非meta標簽
body標簽:
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題. <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br>:換行. <hr>:水平線 <div><span>基本標簽
塊級標簽：<p><h1><table><ol><ul><form><div>
內聯標簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素：
inline元素：
特殊字元
< >；"；©®
圖形標簽：
超鏈接標簽<a>：
href:要連接的資源路徑 格式如下: href="http://www.baidu.com"
target: _blank : 在新的視窗打開超鏈接. 框架名稱: 在指定框架中打開連接內容.
name: 定義一個頁面的書簽.
用於跳轉 href : #id.（錨）
超鏈接標簽(錨標簽)
列表標簽:
表格標簽
<table>
五 表格標簽: <table>
border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.（最好通過css來設置長寬） <tr>: table row <th>: table head cell <td>: table data cell rowspan: 單元格豎跨多少行 colspan: 單元格橫跨多少列（即合併單元格） <th>: table header <tbody>(不常用): 為表格進行分區.
六 表單標簽<form>
表單用於向伺服器傳輸數據。
表單能夠包含 input 元素，比如文本欄位、覆選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向伺服器傳輸數據，從而實現用戶與Web伺服器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.
action: 表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 預設取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input> 標簽的屬性和對應值
type: text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交文件：form表單需要加上屬性enctype="multipart/form-data"
name: 表單提交項的鍵.註意和id屬性的區別：name屬性是和伺服器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
戶端編程，而在css和javascript中使用的
value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：
?12345type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入欄位的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值
checked: radio 和 checkbox 預設被選中
readonly: 只讀. text 和 password
disabled: 對所用input都好使.
<select> 下拉選標簽屬性
<textarea> 文本域
name: 表單提交項的鍵.
cols: 文本域預設有多少列
rows: 文本域預設有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend>登錄</legend>
<input type="text">
</fieldset>
二、CSS
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
引入方式:
1.行內式
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3 鏈接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
<style type="text/css"> @import"mystyle.css"; 此處要註意.css文件的路徑 </style>
css的選擇器:
＊ ： 通用元素選擇器，匹配任何元素 * { margin:0; padding:0; }
E ： 標簽選擇器，匹配所有使用E標簽的元素 p { color:green; }
.info和E.info: class選擇器，匹配所有class屬性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id選擇器，匹配所有id屬性等於footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
基礎選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 div,p { color:#f00; }
E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 li a { font-weight:bold;
E > F 子元素選擇器，匹配所有E元素的子元素F div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F div + p { color:#f00; }
組合選擇器嵌套規則：
塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內可以包含div
塊級元素與塊級元素併列、內聯元素與內聯元素併列
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
屬性選擇器
偽類(Pseudo-classes)
CSS偽類是用來給選擇器添加一些特殊效果。
a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。
a:hover（滑鼠放在鏈接上的狀態）,用於產生視覺效果。
a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。
a:active（在鏈接上按下滑鼠時的狀態）,用於表現滑鼠按下時的鏈接狀態。
偽類選擇器 : 偽類指的是標簽的不同狀態:
a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 滑鼠移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之後插入內容 p:before 在每個 <p> 元素的內容之前插入內容 p:before{content:"hello";color:red} p:after 在每個 <p> 元素的內容之前插入內容 p:after{ content:"hello"；color:red}
css優先順序和繼承:
CSS優先順序，是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是： 1 內聯樣式表的權值最高 style=""-------------------1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－100 3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10 4 統計選擇符中的HTML標簽名個數。 p
－－－－－－－－－－－－－-1
繼承是CSS的一個主要特征，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代.
有一些屬性不能被繼承，如：border, margin, padding, background等。
常用屬性:
<div style="color:blueviolet">ppppp</div> font-size: 20px/50%/larger font-family:'Lucida Bright' font-weight: lighter/bold/border/ <h1 style="font-style: oblique">sb</h1> background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平鋪滿) background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom) 簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
如果將背景屬性加在body上，要給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片；
外邊距和內邊:
float屬性:
文檔流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
只有絕對定位absolute和浮動float才會脫離文檔流。
浮動的表現
定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之後的塊框表現得就像浮動框不存在一樣。（註意這裡是塊框而不是內聯元素；浮動框只對它後面的元素造成影響）
註意 float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多麼複雜的佈局，其基本出發點均是：“如何在一行顯示多個div元素”。
清除浮動：
在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法： clear : none | left | right | both 取值： none : 預設值。允許兩邊都可以有浮動對象 left : 不允許左邊有浮動對象 right : 不允許右邊有浮動對象 both : 不允許有浮動對象 但是需要註意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
position(定位):
1 static 預設值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
2 position: relative／absolute
relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
註意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麽它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會隨著滾動。
註意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器視窗的一個指定坐標，不論視窗是否滾動，它都會固定在這個位置。
僅使用margin屬性佈局絕對定位元素:
margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
三、JavaScript
JavaScript 實現是由以下 3 個不同部分組成的：
ECMAScript 標準描述了以下內容：
語法、類型 、語句 、關鍵字 、保留字 、運算符 、對象 (封裝 繼承 多態) 基於對象的語言.使用對象。
Undefined 類型 Undefined 類型只有一個值，即 undefined。當聲明的變數未初始化時，該變數的預設值是 undefined。 當函數無明確返回值時，返回的也是值 "undefined"; Null 類型 另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。 儘管這兩個值相等，但它們的含義不同。undefined 是聲明瞭變數但未對其初始化時賦予該變數的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那麼找不到該對象時，返回的通常是 null。 var person=new Person() var person=null
JavaScript屬於鬆散類型的程式語言 變數在聲明的時候並不需要指定數據類型 變數只有在賦值的時候才會確定數據類型 表達式中包含不同類型數據則在計算過程中會強制進行類別轉換 數字 + 字元串：數字轉換為字元串 數字 + 布爾值：true轉換為1，false轉換為0 字元串 + 布爾值：布爾值轉換為字元串true或false
邏輯 AND 運算符(&&)
邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。
如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不一定返回 Boolean 值：
如果某個運算數是 null，返回 null。
如果某個運算數是 NaN，返回 NaN。
如果某個運算數是 undefined，返回undefined。
邏輯 OR 運算符(||)
與邏輯 AND 運算符相似，如果某個運算數不是 Boolean 值，邏輯 OR 運算並不一定返回 Boolean 值異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變數，用來指向Error對象或者其他拋出的對象
}
finally {
//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
註：主動拋出異常 throw Error('xxxx')11種內置對象 包括： Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object 簡介： 在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變數，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程式大多數功能都是通過對象實現的 複製代碼 <script language="javascript"> var aa=Number.MAX_VALUE; //利用數字對象獲取可表示最大數 var bb=new String("hello JavaScript"); //創建字元串對象 var cc=new Date(); //創建日期對象 var dd=new Array("星期一","星期二","星期三","星期四"); //數組對象 </script>
作用域鏈(Scope Chain)：
在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。
BOM對象：
BOM（瀏覽器對象模型），可以對瀏覽器視窗進行訪問和操作。使用 BOM，開發者可以移動視窗、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
window對象
所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器視窗的.
使用上講: window對象不需要創建對象,直接使用即可.alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
open() 打開一個新的瀏覽器視窗或查找一個已命名的視窗。
close() 關閉瀏覽器視窗。
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的坐標。
History 對象屬性
History 對象包含用戶（在瀏覽器視窗中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
length 返回瀏覽器歷史列表中的 URL 數量。 back() 載入 history 列表中的前一個 URL。 forward() 載入 history 列表中的下一個 URL。 go() 載入 history 列表中的某個具體頁面
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。
location.assign(URL) location.reload() location.replace(newURL)//註意與assign的區別
DOM對象(DHTML)
DOM 是 W3C（萬維網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文檔的標準：
W3C DOM 標準被分為 3 個不同的部分：
DOM 節點 ：
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：
節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：
頁面查找：
<script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script>
HTML DOM Event(事件)：
HTML 4.0 有能力使 HTML 事件觸發瀏覽器中的動作（action）
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成載入。 onmousedown 滑鼠按鈕被按下。 onmousemove 滑鼠被移動。 onmouseout 滑鼠從某元素移開。 onmouseover 滑鼠移到某元素之上。 onmouseleave 滑鼠從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
<script> function change() { var img=document.createElement("img");//<img src=""> // img.setAttribute("src","123.png"); img.src="123.png"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("div3")[0]; father.replaceChild(img,ele); } function add() { var ele=document.createElement("p");//<p> ele.innerHTML="hello p"; ele.style.color="red"; ele.style.fontSize="10px"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele); //父節點來調用 } function del() { var father=document.getElementsByClassName("div1")[0]; var sons=father.getElementsByTagName("p")[0]; father.removeChild(sons) ; //父節點來調用 } </script>
改變 HTML 內容 改變元素內容的最簡答的方法是使用 innerHTML ，innerText。 改變 CSS 樣式 <p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px 改變 HTML 屬性 elementNode.setAttribute(name,value) elementNode.getAttribute(name)<-------------->elementNode.value(DHTML) 創建新的 HTML 元素 createElement(name) 刪除已有的 HTML 元素 elementNode.removeChild(node) 關於class的操作 elementNode.className elementNode.classList.add elementNode.classList.remove
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="search" value="請輸入用戶名" onfocus="f1()" onblur="f2()"> <script> var ele=document.getElementById("search"); function f1() { if(ele.value="請輸入用戶名"){ ele.value=""; } } function f2() { if(!ele.value.trim()) ele.value="請輸入用戶名" } </script> </body> </html>搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1800px; background-color: white; } .shade{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.3 ; } .model{ width: 200px; height: 200px; background-color: bisque; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide{ display: none; } </style> </head> <body> <div class="content"> <button onclick="show()">show</button> </div> <div class="shade hide"></div> <div class="model hide"> <button>show</button> </div> <script> function show() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_shade.classList.remove("hide") ele_model.classList.remove("hide") } </script> </body> </html>對話框
<!DOCTYPE html>
