1、引入CSS代碼的三種方式
行內樣式表：<h1 style="color:red;">標題</h1>
內部樣式表：<h2 id="a">標題</h2>
在head內<style type="text/css">
#a{ color:green;}
</style>
外部樣式表：<h3 id="b" >標題</h3>
在head內<link href="url" type="text/css" rel=stylesheet/>
2、CSS語法：選擇器
id選擇器：#ID名{............}
標籤選擇器：標籤名{...........}
類選擇器：.類名{................}
全局選擇器：*{...............}
組合選擇器：選擇器，選擇器{...............}
繼承選擇器：指定標籤#d P{.............}
僞類選擇器：<a href="http://www.baidu.com" id="a1"> 鏈接百度 </a>
#a1:link{color:blue;} 點擊之前
#a1:visited{color:gray;} 點擊之後
#a1.haver{color:red;} 鼠標放上之後
#a1.active{color:green;} 鼠標點擊之後
3、顏色與背景：
color、background-color、background-image、background-repeat、background-attachment、background-position、background
4、字體屬性：
font-family 字體系列
font-style 風格
font-variant 以小型大寫字體或正常字體顯示文本
font-weight 字體粗細
font-size 字體尺寸
5、文本屬性：
text-indent 縮緊文本首行
text-align 對齊
text-decoration 向文本添加修飾
text-spacing 字符間距
text-transform 元素中的字母進行改變
6、邊框屬性：
border-width、border-color、border-style
7、div：
position:absolute;絕對定位，對body top:....;left:.....;bottom:.....;right:.....;
position:relative;相對定位，相對以定位的父定位 top:....;left:.....;bottom:.....;right:.....;
#a1{
background-color:red;
width:200px;
height:200px;
float:left/right; 浮動
margin:0 0 15px 20px; 元素間距離上、右、下、左
border:2px solid black; 加黑色邊框
padding:15px; 內邊框，外邊會擴大最好不用
boder-style:dashed; 邊框虛線
overflow:
scroll: 下拉框文本
hidden: 隱藏文本
}
8、event：對象：
type：事件的名稱
altKey：事件發生時Alt鍵是否被按下，true代表按下onkeydown
ctrkey：ctrl是否被按下
shiftkey：shift是否被按下
clientX、clientY：返回x、y座標
returnValue：設置或返回事件的返回值，便於瀏覽器是否繼續對當前事件按默認方式處理，false時，取消
srcElement：設置或返回事件源對象
keyCode：鍵盤按下時或彈起時的那個鍵的unicode碼
button：檢索鼠標移動，按下、嘆氣時用的是哪個鼠標按鍵，1左、2右、3同時
9、鼠標事件：on
click：點擊左鍵發生
dblclick：雙擊左鍵時發生
mousedown：任意按鈕按下時發生
mouseup：鬆開按鈕時發生
mouseover：進入某元素髮生
mouseout：移除發生
mousemove：移出時發生
屬性：clientX、clientY、type、srcEleMent、button
10、鍵盤事件：on
keydown：按下某個鍵時發生，一直按不會觸發
keyup：放開某一按鍵時發生
keypress：按的瞬間發生，一直按一直髮生
屬性：keycode、srcElement、event對象
11、HTML事件：on
load：加載完成後發生，在<body>上觸發
unload：HTML卸載完成後發生，<body>上觸發
abort：用戶停止下載過程時發生，還未完成加載在其上觸發
error：JavaScript甲苯出錯時發生，在window和圖像上都有
select：選擇文本框的一個或多個字節時觸發
change：文本框失去焦點或內容改變時，改變下拉選項時
submit：提交表單時在<form/>上觸發
reset：重置表單時在<form/>上觸發
resize：窗口改變大小時觸發，在window上觸發
focus：獲得焦點時觸發
blur：失去焦點時觸發
scroll：滾動條滾動時觸發
12、外部引入JS文件：<script type="text/javascript" src="....."></script>
13、常規函數：
alert：顯示一個警告對話框，包括一個OK按鈕
confirm：確認對話框，OK、Cancel按鈕
prompt：輸入對話框，提示等待用戶輸入
eval：計算表達式的結果
typeof：返回參數類型
isNaN：測試是否是一個數字，不是數字返回true
14、數組函數
創建數組：var arr=new Array();
賦值： arr[0]="張三";
var arr=new Array("張三","李四");
遍歷數組：for(var i=o;i<arr.length;i++){
alert(arr[i]);
}
join將數組中的元素使用指定鏈接符連起來
var arr=new Array();
arr[0]="張三";
arr.join("+");
reverse：將數倒過來，arr.reverse()
sort爲數組排序，根據首字母排序，字典順序，arr.sort()
15、日期函數：
創建日期對象 var date=new Date();
setDate:0-31 date.getDate:獲取日
setHours:0-23 date.getMonth:月數0-11
setMinutes:0-59 date.getYear:當前年-1900
setMonth:月0-11 date.getDay:星期0-6 0-日
setSeconds:秒0-59 date.getHours:小時0-23
setTime:時間1970毫秒數 date.getMinutes:分鐘0-59
toGMTString:轉化爲字符串 date.getSeconds秒0-59
setlocaleString:轉數字，當地時間
Date.parse():1970/1/1到現在的毫秒
UTC:毫秒數以GMT格林威治時間計算
16、數學函數：Math
abs：絕對值 ceil：返回最小整數值（>或=當前數）
floor：返回<或=當前數的最大整數值 max：最大值
min：最小值 pow：乘方值（2,3），2的3次方
random：0-1的隨機值 round：四捨五入
sqrt：平方根值
17、字符串函數：
indexOf()：("c",0)字符串中第一個c出現位置的下標
charAt()：指定位置的字符 concat：拼接字符串
toLowerCase：轉化爲小寫 subString()：截取字符串
toUpperCase：轉化爲大寫 substr()：截取字符串
big：加粗字體 link(url)：把字符串顯示爲超鏈接
blink：字體閃爍 length：長度（字符串）
fixed：打印機字體 italics：斜體
fontcolor：顏色 split：("str",3)：返回幾個元素
fontsize：字體大小
18、寫到頁面：var str="Hello World"; document.write(str);
19、瀏覽器對象模型：Bom體系結構
window對象：BOM的核心
docment：唯一一個即屬於BOM又屬於DOM的對象
frames屬性：頁面框架的數組
history對象：是window/document的屬性，解析URL，載入窗口的URL
mavigator：包含大量web瀏覽器相關信息
screen：獲取用戶屏幕相關的信息
20、window對象常用屬性
status：設置和返回窗口狀態欄中當前正顯示的文本內容
screen：有關客戶端的屏幕和顯示性能的信息
history：有關客戶訪問過的URL信息
event：當前事件的信息
location：有關當前URL信息
document：表示瀏覽器窗口的HTML文檔
21、window常用方法
alert：帶有提示信息和確認按鈕的對話框
navigatr("URL")：跳轉到指定的URL window.οnlοad=nacigate("URL");
open("URL","名稱","窗口特徵")：打開一個窗口
returnData=prompt("提示信息","默認值")：顯示一個用戶可輸入信息的對話框，並返回輸入的內容
close()：關閉窗口
showModalDialog("URL")：彈出"屬性"模態窗口
showModelessDialog("URL")：非模態窗口
setTimeout("方法")，3000）：睡多少毫秒之後出現JS代碼
setlnterval("代碼方法","毫秒數")：每隔指定時間重複一下
window.open("打開窗口的URL","窗口名","窗口特徵")；
窗口特徵：height/width/top/left/toolbara是否顯示工具欄/menubar是否菜單欄和滾動欄/resizable是否允許改變窗 口大小/status是否狀態欄內信息/scrollbars窗口容不下時是否允許滾動
22、Document對象的常用屬性
bgcolor：背景色
fgcolor：默認錢景色
charset：設置和返回當前內容所使用的編碼字符集
cookie：設置或湖區cookie的字符串值
filesize：返回當前網頁文檔的大小
23、Document對象的常用方法
write()：向HTML文檔中寫入內容
writeln：.......並在末尾追加換行符
open：打開一個新文檔
close：關閉
getElementById("")：獲取指ID的元素內容
getElementByTagValue("")：根據標籤名稱獲取元素
getElementByName("like")：把name值獲取value值
creatElement("標籤名")：創建一個元素
24、全選、全部選、反選
全選：var hobbys=document.getElementsByName("like")；
function checkAll{
for(var i=0;i<hobbys.length;i++){
hobbys[i].checked=true;
}
}
全不選：function uncheckAll(){
for(var i=0;i<hobbys.length;i++){
hobbys[i].checked=false;
}
}
反選：function uncheck(){
for(var i=0;=i<hobbys.length;i++){
if(hobbys[i].checked==true){
hobbys[i].checked=false;
}else{
hobbys[i].checked=true;
}
}
}
25、Dom查詢：document
getElementById("節點ID");
getElementsByTagName("標籤名");
getElementsByName("name屬性名");
parentNode()獲取當前節點的父節點，nodeName節點名稱
childNodes當前節點下的所有子節點，返回數組
firstchild獲取當前節點的第一個子節點
lastchild當前節點的最後一個節點
InnerHTML文本值
getAttribute(屬性名稱)獲取元素指定屬性的值，var width=img0.getAttribute("width");
setAttribute(屬性名稱，值)設置元素指定的屬性值,var img0=document.getElementsByTagName("img")[0]; img0.setAttribut("width","300px");
haschildNodes()返回布爾值，指示元素是否有子元素
26、Dom增加元素
1）document.createElement(tagName) 創建tagName指定的元素
var img=document.createElement("img");
img.setAttribute("src","q.jpg");
img.setAttribute("width","300px");
img.setAttribute("height","300px");
var bo=document.getElementsByTagName("body")[0];
bo.appendchild(img);
2）appendchild(childNode)將指定節點，增加到當前元素的子節點列表作爲一個新的子節點
3）document.createTwxtNode(text)創建一個包含靜態文本的節點
var tex=document.createTextNode("女")；
或td.innerHTML="女";
27、移除元素
1）removeAttribut(屬性名)刪除屬性
2）removeChild("標籤")刪除子節點