Js知識點
http://www.jianshu.com/p/bee295965800 chrome開發者工具
第一章
1、發展
netscape--livescript+sun=javascript
2、特徵
客戶端腳本語言，安全性較高，嵌入式語言，鬆散型（弱類型），解釋型。
3、應用
1.業內式
<script type="text/javascript">
...
</script>
2.
<script type="text/javascript" ref="路徑,js文件">
3.頁內式
<p onclick="JS代碼"></p>
4、web標準
1.結構:頁面實體 HTML（超文本標記語言）
2.表現:CSS（樣式表）
3.行爲:DOM（JS文檔對象模型）
****結果表現行爲，三者分離。
第二章 結構性語言-HTML
一.分類
XML:可拓展標記語言
html:
XHTML:可拓展超文本標記語言
2、語法
<標籤名>...</標籤名>或<標籤名/>
前者：通常標籤
或者：空標籤
note：標籤不容許交叉
3、經常使用標籤
1.文檔結構類
<html></html>:聲明文檔類型
<body></body>：聲明文檔內容（可見）
<head></head>：聲明文檔信息（不可見）
2.區段格式標籤
<p></p>：天然段
<br />：斷行
<title>...</title>：頁面標題（惟一，head）
<hi></hi>：（i=1~6）：文字標題（值越小，級別越高。body）
<hr />：水平分割線
<pre></pre>：文字格式化標籤（所見即所得）
3.圖片標籤
<img />
src 路徑
alt 文字替換
width 寬
height 高
4.****列表
1)有序列表 <ol>...</ol>
列表項<li>...</li>
2)無序列表 <ul>...</ul>
列表項<li>...</li>
3)自定義列表 <dl></dl>
自定義列表項 <dd></dd>
標題<dt></dt>
5.表格
<table></table>:表格
<tr></tr>：行
<tb></tb>:單元格
屬性：
border:邊框
width :寬（絕對單位（PX），相對單位（%））
表格高度由單元格高度決定。
6.錨標籤（定位）
<a></a>
屬性：
href:連接目標。
target:連接目標打開方式。（_blank連接目標在新窗口打開。）
7.表單。（控件）
1.表單域
<form></form>
2.輸入類控件
<input type="" />
type 屬性：
type="text":單行文本框。
type="password":掩碼
type="radio" :單選框 (經過ID與NAME屬性，控制單選框惟一性。)
type="checkbox":複選框
type="file" :文件域
type="submit" :提交按鈕 （value屬性：默認值屬性，可用於text,password,textarea,全部按鈕）
type="reset" :重置按鈕，清空表單（針對form內元素）
type="button" :普通按鈕
補充：
disabled：禁用
size ：控制文本框的寬度。
maxlength：最大字符個數.
3.下拉列表框
<select></select>
<option><option> : 列表項
(
selected :下拉列表默認選擇狀態。
size : 控制列表高度。
multiple :複選（多選）
)
4.文字域
<textarea></textarea>
rows:控制文字域行數。=高度。
cols:控制文字域列數。=寬度。
第三章 層疊樣式表
1、CSS概念
1.組成
選擇器、屬性值、值
2.語法格式
選擇器{ 屬性:值; }
note：
全部符號均爲英文半角，選擇器首字母不能用數字。
2、選擇器分類****
1.基本選擇器
1）標籤選擇器：針對同類標籤生效，以標籤名命名。
2）類選擇器 ：針對個別元素，跨元素，1：多。自定義名稱（用.聲明，class調用）。
3）id選擇器 ：針對個別元素，1:1，自定義名稱。（用#聲明，id調用）
優先級：id>類>標籤
2.複合選擇器
1）交集選擇器：同時知足兩個條件。
p.no2{} table.#abc{}
2）並集選擇器：羣組聲明
h1,h2,h4,h3,.no2{}
3）後代選擇器：經過制定祖先查找子元素，用空格區分。
table h3{}
note:特殊選擇器
*:通配選擇器，聲明頁面中全部元素。
3、經常使用CSS屬性。
1.盒子模型。*****
width：內容寬度，不包含邊框。
heidth：內容高度,不包含高度。
padding：內邊距。
margin ：外邊距。
border ：邊框。
note:
margin與padding的簡寫方案
四個值：上，右，下，左。
兩個值：上下，左右。
三個值：上，左右，下。
boder-wigth:邊框寬。
boder-style：邊框樣式.
boder-color：邊框顏色.
補充屬性：
display:block\inline\none；控制元素的顯示方式，塊\行\隱藏。
**：行級元素不具有，寬高特徵。
盒子模型水平距離：由相鄰外邊距之和決定.
垂直距離：塌陷，兩個外邊距最大的外邊距決定。**
實際寬度=width+boder+margin+padding
2.文字屬性。
font-family：字體
font-size :字號 px,pt ,%,em
color :字色。
line-heigth：行間距（% em）
font-weigth：文字加粗。（bold，bolder）
font-style ：傾斜.
text-align ：對齊方式。（left\right\center）
text-indent：首行縮進。
text-decoration:文字修飾.
3.背景屬性。
background-color：背景色（純色）
backgruoud-imag:url(圖片地址) 背景圖片。
background-repeat：背景的重複控制(repeat-x/y,no-repeat)
background-position:背景定位（後跟兩個值）.
4.列表屬性。
list-style-type:none;列表無修飾符。
5.浮動*****
float：left\right\none;
特色：
1.丟失寬度,變爲僅能容納內容的最小寬度。
2.丟失位置，後續元素取代其位置。
3.後續元素的內容，環繞前一個浮動元素顯示。
clear:請出浮動不良效果（left\right\both）
空白DIV法：最後一個浮動元素後方,讓其裝載clear屬性，解決自適應高度問題。
6.層定位模型
position:relative(相對定位)/absolute(絕對定位)
note:要想實現惟一，要結合方位屬性(距離).
1.相對定位
相對原有位置進行位移。
對同級元素無影響。原位置保留。
2.絕對定位
位置丟失，寬度丟失。
定位參照物：距離它最近的，具備定位屬性的，祖先元素。如沒有，則以瀏覽器邊界定位。
可實現層疊效果（可調整位置）。
補充：層疊位置屬性
z-index:Z軸索引（數值）， 前提：層疊元素必須都是絕對定位。數值越大越靠前。
4、效果應用
1.佈局效果。
2.連接效果。（僞類選擇器）
:link 正常狀態
:hover 觸發狀態
:active 激活狀態
:visited瀏覽後狀態
1)控制連接外觀。
2）多種鏈接效果並存。
方法：爲要指定特殊效果的連接指定class名，使用a.名稱聲明。
補充：（L-V-H-A）要按照這個次序指定外觀。
補充：overflow:hidden(溢出後隱藏)/scroll(添加滾動條)
塊級元素居中：
選擇器{ margin:0px auto;}
第三部分-JS語法。
1.語法
1）嚴格區分大小寫。
2）自定義名稱：首字母必須字符，下劃線，$,
2.註釋：//，/* */
3.字面量/直接量/常量
4.保留字與關鍵字
5.變量。JS是弱類型語言，聲明變量時不能聲明數據類型，
用var聲明，局部變量；
不用var聲明。默認爲全局變量；
變量類型由值決定、
2、數據類型
1.typeof:檢測變量類型；
alter() 彈出警告框。
prompt("","") :彈出輸入框。(提示文字，默認值)
onfocus:獲取焦點
onblur:失去焦點。
2.Undefined:變量未初始化類型。
與not defined區別：
Undefined:有變量，無值，正常；
not defined:無變量，報錯;
3.Null:空對象引用。（空指針），null
null
no :CSS中表明不
not ：取反。
none ：CSS中表明無
NaN ：not a number
4.boolean：布爾型。
1）注意事項
該類型與其餘類型都有對應關係。
字符串：非空串==true 空串==false。
數值： 非零==true 0==false NaN==false
隱式轉換 ：自動進行的類型轉換。
2）涉及函數
Boolean():顯性的將其餘類型轉換爲布爾型。
5.number:無整形與浮點型，統稱數值型。
1）進制
二：0 1
八：0~7
十：
十六：前導0x 後導0~9或A~F
2)浮點聲明與運算
聲明方式 ： var a=3.6 ,b=0.8,c=.7
運算特徵：精確到十七位（慎用）
3）NaN ：非數值 not a number
InFinity:正無窮。
-InFinity:負無窮。
4)涉及函數
Number()：將其餘類型轉換爲數值型
parseInt():將字符串或數值，轉換爲數值型；
(1)類型轉換 (2)進制轉換--8||16
(3)配合參數，可作任意進制轉換
parseFloat():將字符串轉換爲浮點數值
6.string：字符串，是JS中，最基本的數據類型；
1）注意事項
""=='',但不能交叉
2）轉義字符 : <左尖括號< 右尖括號
\"表明輸出雙引號
\'表明輸出單引號
\n換行
note:
<左尖括號<
>右尖括號>
 :文字佔位符
document.write("..."):向HTML輸出，解析後顯示
3）涉及方法
.toString(參數):將數值轉換爲字符串，參數表明進制
平方根Math.sqrt
note:補充方法
Date():當前系統時間對象
.getYear():年份1900-1999
.getFullYear():年份*****
.getMonth():月份，注意比正常少一個月
.getDay:星期數
.grtDate():日期
.getHours():小時
.getMinutes():分鐘
.getSeconds():秒
平方根Math.sqrt()
Math.max():最大值
Math.min()：最小值
Math.random():介於0~1間的隨機小數
三.運算符
1.
=：賦值
==：等於，字面含義判斷
===：全等，數據類型必須一致
2.一元運算符：只有一個操做數
++ --
++a
3.三元（目）運算符：簡化版的if語句
？：
x>y?x:y
4.求餘數：% mod
4.優先級（見課件）
=========================================================================================================
第二部分 流程控制語句
1、語句構成：由一個或多個關鍵字組成，實現指定任務（如循環、判斷...）
2、語句形式：
單行語句：if（） alter（「」）
複合語句：代碼塊。{...}當作一條語句處理。
3、語句分類
1.聲明語句：
var box=100；
label：box；
2.表達式語句
box=100；
box（）；函數表達式；
box.property=100 屬性表達式；
box.method（）；方法表達式
3.分支語句（判斷語句）
1）if（）...單路分支
2）if（）...else...雙路分支。
3）if（）...else if（）...else if（）... else... 多路分支
4）switch（表達式或值）{
case n:...
}精確型判斷的多路分支。
note：常結合break,default來使用；
4.循環語句
1.for(賦值語句；判斷語句；運算語句) {循環體}
2.while(條件表達式) { 循環體，帶運算語句 }
3.do{循環體...} while（條件表達式）;
4.for in :枚舉對象中的全部屬性名
5.控制語句
break: 跳出循環；
countiue:跳出當前循環，進入下次循環；
try catch:
6.其餘語句。
；空語句。
with:將語句功能定義到一個對象當中。（工做範圍）
第三部分 函數
特徵：
1）封裝 2）重複調用
1、函數聲明
1.普通聲明:
function 函數名（）{...}
not：
匿名函數：
function (){...}
觸發：
window.onload=function(){} 當窗體全部內容加載完畢，纔可觸發
document.事件=function{}{} 當前頁面文檔
2.帶參數的函數聲明
function 函數名(形式參數序列){...}
形參：決定運算過程。
實參：實際參與運算。
2、return
1.將運算結果返回到調用函數的位置（傳值）
2.中止函數運行。
3.JS中，return false可中止html元素的默認動做。(表單的提交，超連接的跳轉)
3、arguments參數
*****
JS中，函數不在意實參與形參的個數及對應關係。
4、
.getElementById()經過ID名，或許頁面中惟一元素。
.length :返回字符串長度
.indexOf() :檢測字符在串中出現的位置;
1.檢測首次出現的位置，下標從0開始。
2.如檢測字符串，則返回首字母位置。
3.返回值爲非負整數。如反饋-1，則沒找到。
.focus() :獲取焦點
.substring(數值1，數值2) :截取字符串。[數值1，數值2)。數值2可省略。
.isNaN :判斷是否爲非數值。
.innerHTML :獲取（改寫）指定HTML標籤中的全部內容、
與value的區別，value只獲取元素的值，innerHTML獲取標籤內全部元素。
==========
1、setTimeout("code",time):延遲執行，僅執行一次.
time:單位毫秒。延遲多長時間。
code:
1.若是是代碼或基本語句，則用""聲明。
2.若是是函數。
1）無參數，直接用函數名聲明。 setTimeout(box,1000)
2）若有參數，或以函數表達式方式書寫. setTimeout("box()",1000)
配套：clearTimeout(延遲對象名稱)
2、setInterval("code",time):間隔執行（重複執行。）。
note：警告框會佔用瀏覽器運行線程，中斷（暫停）後臺其餘線程
.style:聲明對象的某個屬性。 （HTML樣式）
.className：爲HTML對象增長一個類名。（CSS樣式）
confirm("string") :確認框。
確認==true
取消==false
遞歸：自身調用自身
迭代：自身的值由自身運算獲得。
.scr:對象元素（圖片）的路徑。
disabled:控制對象元素是否禁用
==============================================================
數組：
1.new方法聲明
var box=new box object
2.字面量（常量）
var box{
name:zhangsan,
age:18
}
3.傳統方式
var box{}
box.name="zhangsan"
4.屬性輸出方法
對象名.屬性名 == 對象名['屬性名']
二、給對象建立方法（自定義方法）
一般使用匿名函數方式建立。
三、刪除對象屬性
delete 對象名.屬性名
2、array類型
js中數組的特色：
1.同一數組中元素，不限定類型。
2.配合各類方法，對數組或元素進行，正，刪，改，查，接
1.聲明方法
1.new運算符
var box=new Array(); //空數組
var box=new Array(10); //指定長度數組
var box=new Array(1,"jhj",5) //指定內容數組
note：
使用alert和write方法輸出時，數組會自動轉換爲字符串。
2.傳統方法
var box=[]
var box=[10] //數組中只有一個元素10，該方法不能預約義長度。
box.length=10 定義數組長度
2.讀取或修改數組內容
讀取：結合下標
修改：經過賦值表達式。
3.使用length屬性獲取數組元素量
1.控制數組長度。
2.將指定內容追加至數組末端。 box[box.length]="123456666"
4.轉換方法
隱式轉換：使用alert或write.
顯式轉換：
.toString()：轉換爲普通字符串，功能偏向於顯示
.toLocaleString()：同上，但針對時間有異
.valueOf():轉換爲原始格式，功能偏向於運算。
5.join()方法：用特殊字符替換間隔符
6.棧方法：先進後出
push():將新元素從末端追加進數組當中，返回新長度
pop():從末端刪除一個元素，返回刪除內容
7.隊列方法：先進先出
shift():從首端刪除一個元素，返回內容
unshift():從首端追加新元素，返回長度
8.重排序方法
reverse():倒序排序
sort():由小到大，按字符串格式排序 23,1,7,45，js ----1,23,45，js
9.其它操做方法
concat():
1)數組鏈接
2）從末端追加元素，產生新數組
silce(start[,end]):截取數組元素對象，對原數組無影響 []可省略
note:結束位不包含在範圍
splice(start,num[,元素]):
1)截取數組元素，按個數獲取，修改原數組
2)插入數組元素
3)替換
==========================================================================================
BOM(瀏覽器對象模型)
note:BOM兼容性有問題。
i:ie , F:firefox C:chrom
1、window對象
屬性：
defaultStatus :默認狀態欄信息 （I）
status : 自定義狀態欄信息 （I）
opener :父級對象
screenLeft :瀏覽器水平座標 （I,C）
screenX :同上 （C，F）
screenTop : 瀏覽器垂直座標。
屬性及方法：
print():調用打印命令。（IFC）
find():查找命令框 （F）
open("url"[,打開方式或窗口名稱][,外觀]):新建window對象
close():關閉window對象
----------------------------------
IE私有對象：
moveTo(x,y):移動到指定座標點。
moveBy(x,y):參照當前位置位移。
resizeTo(): 更改到指定大小。
resizeTo(): 參照當前尺寸縮放
2、location對象
屬性：
hash:#後
location.hash
moudle=welcome.WelcomeModule%7C%7B%7D
host:主機名+端口號
location.hostname
mail.126.com:80
prot:端口號
location.prot
80
href:完整的URL
location.href="http://www.qq.com"
*****search:?後
location.search
pathname:路徑名
protocol:網絡協議
location.protocol
http
https:加密的超文本協議
方法：
assign(url):加在新頁面替換本頁面
reload([False]):從本地緩存刷新頁面(快，舊)
reload([true]):強制從服務器刷新頁面==F5（新，慢）
replace(url):用地址替換當前地址
3、history:歷史記錄
屬性：
length:當前窗體的歷史記錄
方法：
forward():前進一頁
back():後退一頁
go(num):跳轉指定步數
正值：前進
負值：後退
0：刷新本頁
4、navigator對象：返回瀏覽器信息
屬性：
appCodeName:瀏覽器名稱代碼
appVersion:當前瀏覽器版本號
appName:瀏覽器名字
cookieEnabled:電腦中的瀏覽器是否支持本地緩存 文件緩存 信息緩存
platfrom:當前系統平臺 win32
方法：
javaEnabled():是否支持java 谷歌不支持支持簡單的應用，火狐不支持 IE支持
5、screen對象:返回屏幕信息
width：
height ：
availWidth:實際可用分辨率
availHeight：
colorDepth：判斷顏色位數，通常都是24，IE=24+8（強調alpha）
補充：
一：open與close經典問題！
1.colse()沒法關閉頁面
close只能關閉open/腳本打開的頁面
2.open傳值
若是使用getElement系列方法時，要考慮加在順序因素
note:谷歌chrome和蘋果safari都爲webkit內核,本地測試JS不許，除非在服務器狀態下
5、screen對象 ：返回屏幕信息
===========================================================
事件入門
事件：當用戶操做軟件時，所採起的一系列操做。
1、內聯事件（內聯模型） -慎用-
事件處理函數被當作HTML屬性應用。
<input type="button" value="內聯" onclick="javascript:alert('12346')">
優：直觀
缺：違背了web標準，結構與行爲混用
2、腳本事件（腳本模型）*****
優：實現web標準，便於維護，對象操做。
note：
1.對象.事件處理函數（onclick）=函數名;
2.對象.事件處理函數=function(){
...js代碼塊
}
3、事件處理函數
1.鼠標事件：
onclick : 鼠標單擊
ondblclick ：鼠標雙擊 double click
onmousedown：鼠標摁下
onmouseup ：鼠標彈起
onmouseover：鼠標覆蓋
onmouseout ：鼠標移出
onmousemove：鼠標移動
2.鍵盤事件：
onkeydown ：鍵盤任意鍵摁下
onkeypress：按任意字符鍵
onkeyup ：按鍵擡起
3.HTML事件
onload ：加載完畢
onunload：卸載完畢
onfocus ：得到焦點
onblur ：失去焦點
onselect：選中文字時（單行或多行文本框）
onchange：值改變時 （同上）
onsubmit：表單提交時
onrest ：表單重置時
note:僅適用於<form>對象
onscroll：滾動條滾動時
onresize：窗口大小改變時
note：僅適用於window對象.
===================================
DOM（文檔對象模型）---節點樹
1、結點分類
1.元素結點 標籤
2.屬性結點 標籤中的屬性
2.文字結點 連續的字符串
2、獲取結點的方法
1. .getElementById():惟一性
.tagName :標籤名
.id :ID值
.innerHTML :元素節點中的內容
.className :類名
.style :控制外觀
2. .getElementsByTagName('標籤名') ：獲取多個標籤元素，返回數組集合
note：如要精確指向，必須配合數組下標。
.getElementsByTagNmae('標籤名')[0]
.getElementsByTagName('標籤名').Item(0)
3. .getElementsByName('name屬性值') :同ByTagName
4. .getAttrubute():獲取屬性結點
5. .setAttruibute('屬性名','屬性名') :設置屬性節點
note:4.5ie7如下不支持
2、DOM節點關係（指針）
1.獲取子節點 :childNodes 配合下標使用
2. .firstChild : 獲取第一個節點 childNodes[0]
3. .lastChild : 獲取最後一個節點
4. .parentNode : 指向當前節點的父節點
5. .previousSibling: 上級節點
6. .nextsibling : 下級節點
7. .ownerDocument : 指向根節點 ===document
8. .attributes : 指向當前節點的屬性,返回數組對象
補充：
.nodeName
元素--標籤名 屬性---屬性名 文本---#text
.nodeType
元素--1 屬性--2 文本--3
.nodeValue
元素--NULL 屬性--屬性值 文本--字符串
*****note：
空字符串或換行都被chrome和FF認爲是文字節點
3、節點操做 增，應用，刪，複製，替換
1.新建節點
1）document.write("<p>123</p>") :缺點：不穩定，在某些狀況下，該方法輸出會覆蓋原有節點
2) .createElement('標籤名')
2.向某個節點末端追加節點 ：appendChild('節點對象')
3.建立文本節點： .createTextNode("連續字符串")
note：新建完的節點，都駐留在緩存中，所以要用插入方法插入到界面。
4. .insertBefore('節點對象','節點位置')：在節點位置前插入節點
5. .replaceChild('新節點','舊節點') ： 替換子節點
6. .removeChild('節點') ：刪除子節點
note：5and6，要想實現自我操做，必需要將節點指針移到父節點上操做。
7. .cloneNode('bool') :複製節點
true:包含子節點
false:不包含子節點，只有結構
補充：
.hasChildNodes:判斷是否包含子節點，返回布爾值javascript
- 1. js知識點
- 2. js 知識點
- 3. JS知識點
- 4. Koa2.js知識點
- 5. js小知識點
- 6. JS小知識點
- 7. 《JS的知識點》
- 8. js相關知識點
- 9. JS重要知識點
- 10. js基礎知識點
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • XML DOM 節點 - XML DOM 教程
- • 適用於PHP初學者的學習線路和建議
- • Java 8 Stream 教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。