一、介紹Javascript
Java與Javascript沒有關(guān)系 只是當(dāng)時取名蹭Java名字的熱度而已
Javascript是解釋型語言，由瀏覽器的JS解釋器(JS引擎)解析成機(jī)器可讀的二進(jìn)制碼交給pc進(jìn)行執(zhí)行操作。
Javascript由上到下的解析Javascript的標(biāo)準(zhǔn)是由Ecma組織進(jìn)行制定的，其中有三大核心構(gòu)成
| :------------: |
| Javascript |
| ECMAscript(核心語法) |
| **DOM(文檔對象模型) ** |
| BOM(瀏覽器對象模型) |
本地js放在body為了防止加載樣式時會導(dǎo)致頁面加載空白，因為在頁面加載時由上到下依次執(zhí)行如果JS文件過大則需等待下載完成空白就是這樣發(fā)生的(這樣用戶的體驗會感到特別差勁)。
<scirpt src="http://www.baidu.com/1.js"></script>
也可引用站外JS文件但是要注意安全哦, 使用外部鏈接文件很方便只用改變原文件就可使所有引用JS的html都生效
<script></script>
在H5規(guī)范中可不指定其類型，除非需使用非原生JS可指定其類型。
二、數(shù)據(jù)類型與變量
數(shù)字型、字符型、布爾型、Undefined、Null、Object
數(shù)字類型 包括整數(shù)與小數(shù)兩種如：12321、3.1415926。
字符串類型 是用引號包括在內(nèi)的(雙引號單引號都可以)如："我是字符型又叫字符串"，其中如果需要轉(zhuǎn)義字符則需加上反斜杠如："\“\”"。
\n 換行
\t 制表符(tab鍵)
\b 退格
\r 回車
\f 進(jìn)紙
\ 斜杠
\‘ 單引號(")，在用單引號表示的字符串中實用。列如："He saidm, 'hey.'"
\ " 雙引號(")，在用雙引號表示的字符串中實用。列如："He saidm, "hey.""
\xnn 以十六進(jìn)制代碼xnn表示的一個字符(其中n為0~F)。列如, \x41表示"A"
\unnnn 以十六進(jìn)制代碼nnnn表示的一個Unicode字符(其中n為0~F)。列如, \u03a3表示希臘字符Σ
布爾型 只有兩種一個true(真)false(假)。
Null 表示一個空對象指針
Undefined 只申明了變量未賦值,還有一種情況,未申明變量在alert()它的值也是undefined,如果申明了未賦值此時alert()變量也是undefined。
變量
變量是用于存儲一些變動或臨時的數(shù)據(jù)，變量存儲在計算機(jī)內(nèi)存中。
變量使用完成后會回收 JS具有自動回收機(jī)制當(dāng)這個變量操作完成后或長時間不操作JS引擎會判斷（待修正）。
變量名不能使用保留字、數(shù)字開頭、%&等符號，推薦使用駝峰命名法(第一個單詞首字母小寫后續(xù)首字母大寫)。
變量名是區(qū)分大小寫的，聲明變量名要含有意義，Javascript是弱類型語言不用指定數(shù)據(jù)類型。
變量未賦值此時的值為undefind。
//申明變量通過關(guān)鍵字var
var sum = 1, //一次申明多個變量
sun1 = 2,
sum3 = 3,
sun4 = 4;
var s1 = 5; //一次申明一個
運算符(待補(bǔ)充)
+、-、/、*、=(賦值運算符)、++(自增)、--(自減)、%(取余數(shù))、這幾種運算符
<、>、<=、>=、!、!=、<<、>>、<<<、>>>、==、===、=
var F1 = 5;
var F2 = 10;
F3 = --F1 + F2; //14
var F4 = F1 + F2; //14
++如果放在值前面會F1先自增加一
var F1 = 5;
var F2 = 10;
F3 = F1++ + F2; //15
var F4 = F1 + F2; //16
--放在后面則F1+F2計算完成賦值給F3后再加上一
運算符有優(yōu)先級如果++放在前面它會優(yōu)先運算,*/大于+- ,包在括號內(nèi)運算符優(yōu)先運算,遇到優(yōu)先級相同會從左到右進(jìn)行運算。
運算符可用作字符串與拼接字符串如："你好" + "啊" 結(jié)果輸出為="你好啊"，還有一種字符串與數(shù)字相連如："你好啊" + 123 輸出為="你好啊123",會自動把數(shù)字轉(zhuǎn)換成字符串進(jìn)行拼接。
數(shù)據(jù)值轉(zhuǎn)換
有三個函數(shù)parseInt()、parseFloat()、Number()
parseInt("轉(zhuǎn)換對象",轉(zhuǎn)換的進(jìn)制數(shù))第一個數(shù)字為0則忽略掉0,轉(zhuǎn)換中碰到字符串會忽略掉,如：“045123.2512你好哇” ,遇到非數(shù)字會停止轉(zhuǎn)換 輸出為=45123 遇到非數(shù)字會停止。
parseFloat("轉(zhuǎn)換對象")只能轉(zhuǎn)換10進(jìn)制,第一個數(shù)字為0則忽略掉0,只轉(zhuǎn)換第一個小數(shù)點遇到第二個則忽略,忽略字符串。
Number("轉(zhuǎn)換對象")可以轉(zhuǎn)換任何類型,轉(zhuǎn)換true=1,false
如果是Boolean值,true和false將被轉(zhuǎn)換為1和0
如果是數(shù)值,會簡單返回。
如果是Null值,返回0
如果是undefined,返回NaN如果是字符串,遵循下列規(guī)則：
- 如果字符串只包含數(shù)字(包括正負(fù)符號),則轉(zhuǎn)換為十進(jìn)制數(shù)值,即"1"
- 會變成1,"123"會變成123,011會變成11（前面的零被忽略了）;
- 如果字符串中包含;有效的浮點格式,如"1.1",則將轉(zhuǎn)換為對應(yīng)的浮點數(shù)（同樣忽略前面的0）
- 如果字符串中包含有效的十六進(jìn)制格式,如"0xf",則將轉(zhuǎn)換為相同大小的十進(jìn)制整數(shù)值。
- 如果字符串空(沒有字符),則轉(zhuǎn)換為0。
- 如果字符串包含其他格式字符,則轉(zhuǎn)換為NaN。
如果是對象,則調(diào)用對象的valueOf()方法,然后再次依照前面的規(guī)則轉(zhuǎn)換返回字符串值。
引用類型
var S1 = 5;
var S2 = S1; //此時修改S2不會影響S1的值
基本數(shù)據(jù)類型中如果把變量S1賦值給變量S2,被賦值的變量S2會自動復(fù)制一個S1的副本不會與其他變量有關(guān)系包括值相同的變量。
var D1 = {name:"程晨呈", age:19};
var D2 = D1;
console.log(D2); //結(jié)果是Object {name: "程晨呈", age: 19}
在對象里會指向同一個內(nèi)存地址,當(dāng)值修改時指向同一變量的值都會改變，因為在對象里它們面向的是同一內(nèi)存地址。
var D1 = {};
console.log(D2); //Object {name: "程晨呈", age: 19}
如果此時的D1新建一個對象,D1則新開拓一塊新的內(nèi)存地址并指向新的內(nèi)存地址,變量D2還是指向原來的內(nèi)存地址,因此D2未發(fā)生改變。
語句
數(shù)組
數(shù)組可以存儲任何數(shù)據(jù),數(shù)組索引從0開始
創(chuàng)建數(shù)組有三種方法，
new Array()//創(chuàng)建一個空數(shù)組
Array()//創(chuàng)建一個空數(shù)組
[]//創(chuàng)建一個空數(shù)組
new Array("nihao",12"可以存變量")
new Array(30)//創(chuàng)建值為30個的數(shù)組、
Array(30)//創(chuàng)建值為30個的數(shù)組、
[30]//（待測試）
二維數(shù)組(待補(bǔ)充)
prompt("通知","默認(rèn)輸入")默認(rèn)輸入IE7和8中，如果不提供此參數(shù)，則字符串“undefined”是默認(rèn)值。
對象
打開門走進(jìn)一個十平方米裝滿工具的小屋子里，里面物件兒井然有序連每一卷壁畫都擺放的整整齊齊，哦對了我進(jìn)來要找工具箱，家里需要安上一塊白板方便寫字，隨著眼睛一撇，喲躲在桌子底下真是讓我好找，看來白板今天是搞的定了。
工具箱打開后里面有很多張指南(說明書=屬性)，里面兒的指南詳細(xì)說明如何操作(操作=方法)，操作后會有什么結(jié)果，這下我就放心啦，有了說明書什么搞不定哈哈哈~~~。
屬性是只讀，方法是動作(如何做)
String操作方法
IndexOf("要查找的字符串") 查找字符串索引位置(如果查到返回0未查到返回-1，區(qū)分大小寫)。
lastIndexOf("要查找的字符串") 查找字符串索引位置(如果查到返回0未查到返回-1，區(qū)分大小寫)。
substr(開始索引,結(jié)束 后一位索引) 提取字符串(復(fù)制),返回值包含開始索引與結(jié)束索引前一位字符,如果不填寫第二位值則選出開始值后面所有字符。
substing(開始索引,要提取字符的長度) 提取字符串(復(fù)制),復(fù)制時索引開始算入在內(nèi)第二個參數(shù)是要提取的字符串的長度,如果不填寫第二位值則選出開始值后面所有字符。
charAt() 按照索引提取單個字符,返回的是一個字符串。
charCodeAt() 提取單個字符,返回Unicode字符集中十進(jìn)制編碼。
fromCharCode() 將Unicode字符集編碼轉(zhuǎn)換為字符串。
tirm() 去除字符兩端的空格。
toLowerCase() 把字符串轉(zhuǎn)換成小寫
以下支持正則表達(dá)式
split("以什么分割", "分割多少") 用于分割字符串返回一個數(shù)組,值為字符串。
如果以逗號分割則從第一個值到第一個逗號之間為一個值,第二個值是從第一個逗號到第二個逗號之間的值以此類推。
replace("要查找的字符串", "要替換的字符串")用于替換字符串,調(diào)用方法本身不會改變原來的字符串,只會返回一個被替換的字符串。
search() 用于查找指定字符串,只有一個值,查詢返回第一個字符索引值。
match() 用于查找指定字符串,返回值是一個數(shù)組。
Array操作方法
length() 統(tǒng)計字符長度。
push() 向里添加值將值放在尾部。
concat() 鏈接數(shù)組,將要鏈接的數(shù)組名稱當(dāng)做參數(shù)傳入括號中,返回一個新數(shù)組。
slice() 復(fù)制數(shù)組一部分,參數(shù)為數(shù)組索引（索引開始,索引結(jié)束）,復(fù)制時開始索引被算入在內(nèi)結(jié)束索引不算在當(dāng)中,
返回值顯示開始索引+結(jié)束索引前一位字符,如果不填寫第二位值則選出開始值后面所有字符。
join() 修改數(shù)組的分隔符(默認(rèn)是逗號),數(shù)組的值會被轉(zhuǎn)換成字符串。
sort() 將數(shù)組按照升序排列,如果數(shù)組包含字符串則按照Unicode編碼值大小來進(jìn)行排序,A-Z與小寫a-z是兩個列。
reverse() 與sort()相反,進(jìn)行降序排列,一樣有字符串按照編碼值進(jìn)行排，用于顛倒數(shù)組中值最后一個在前第一個在后。
indexOf() 查找字符串索引位置(如果查到返回0未查到返回-1，區(qū)分大小寫。
lastIndexOf() 查找字符串索引位置(如果查到返回0未查到返回-1，區(qū)分大小寫。
數(shù)組測試(用函數(shù))
every(element, index, array) 用于測試數(shù)組所有的值是否滿函數(shù)的要求,如果所有值滿足則返回true否則返回false。
some(element, index, array) 用于測試數(shù)組部分值是否滿函數(shù)的要求如果所有值滿足則返回true否則返回false。
filter(element, index, array) 針對對數(shù)組某一個元素進(jìn)行測試如果滿足則返回true否則相反。
forEach(element, index, array) 讓數(shù)組中的每一個元素執(zhí)行一次指定函數(shù),返回值是underfined。
map(element, index, array) 讓數(shù)組中的每一個元素執(zhí)行一次指定函數(shù),返回一個新數(shù)組,值是執(zhí)行函數(shù)后的結(jié)果。
Math操作方法
abs() 返回一個值的絕對值(負(fù)數(shù)絕對值變?yōu)檎麛?shù)，正數(shù)絕對值是他本身)。
min(至少兩個參數(shù)對比) 返回一個最小值(其中有一個無法轉(zhuǎn)換為數(shù)值則返回NAN)。
max(至少兩個參數(shù)對比) 返回一個最大值(其中有一個無法轉(zhuǎn)換為數(shù)值則返回NAN)。
ceil() ceil總是把數(shù)字變大或等于參數(shù),向上取整數(shù)(如：-11.1 向上則是-11的上面是11再往上是10這就是向上)。
floor() 和ceil相反,向下取整數(shù)(如：-11.1 向下則是-12,11的后面是12所以是向下)。
round() 數(shù)值大于等于0.5向上變大,小于等于0.5向下變小。
random() 返回0-1之間的隨機(jī)浮點數(shù),不包括1
pow(基數(shù),次冪) 基數(shù)*次冪
Number
toFixed() 顯示保留小數(shù)位數(shù),小數(shù)點后面數(shù)值會進(jìn)行四舍五入,超出部分用0表示
Date
getFullYear() 獲取年份
getMonth() 獲取月份
getDate() 獲取天數(shù)
getDay() 獲取星期幾,返回值是一個整數(shù)從索引0開始
getHours() 時鐘
getMinutes() 分鐘
getSeconds() 秒鐘
getMilliseconds() 毫秒
RgeExp(正則表達(dá)式干什么用的？需補(bǔ)充下）
正則表達(dá)式用于匹配字符串或拆分查找替換。正則表達(dá)式由//代表開始和結(jié)束，這跟字符串的雙引號是一樣的告訴Javascript這是正則表達(dá)式。】
- ** g ** 全局匹配,而不會匹配到第一個就停下來。
- ** i ** 不區(qū)分大小寫,比如f和F都會匹配。
- ** m ** 執(zhí)行多行匹配。指定字符^與$(開始于結(jié)束),用于匹配每一行的開始和結(jié)束
\b
左邊或右邊有字符挨著(單詞分界)
\B
左邊或右邊沒有字符挨著(非單詞分界)
單詞分界是字符與另一個字符之間的距離
search() 不支持/g
啊 什么貪婪模式 非貪婪模式，我真得好好去看一看了。
BOM
BOM是Javascript中的核心對象，為啥說它是核心嘛，因為document對象history對象都是widow的子對象
window.open()
window.close
moveBy()
moveTo()()
history對象
屬性
current 當(dāng)前窗口的URL
next 歷史列表中的下一個URL
previous 歷史列表中的前一個URL
length 歷史列表的長度，用于判斷列表中的入口數(shù)目
方法
go() 進(jìn)入指定的網(wǎng)頁
back() 返回上一頁
forward() 進(jìn)入下一頁
setTimeout()和clearTimeout()
setTimeout(code, time)是一次性定時器第一個值是要執(zhí)行的函數(shù)(函數(shù)不用帶括號)或要執(zhí)行的代碼，第二個值是隔多少毫秒執(zhí)行一次。
clearTimeout()用于清除定時器,括號中的值是setTimeout的返回值(是整數(shù)隨著每次點擊值都不同)，把setTimeout賦給變量返回值就存在變量里，通過變量名清除定時器
setInterval()和clearInterval(intervalID)
setInterval()和上面的setTimeout差不多不過這位可是一直重復(fù)的只要開始就跟上了發(fā)條的機(jī)器人一樣直到天昏地暗，世界毀滅才會停下來，好啦開個玩笑，setInterval()和上面一樣有兩個值第一個code第二個間隔時間。
setInterval開始想要停止就必須清除，同樣清除的是返回值與clearTimeout一樣。
DOM
在DOM中把HTML表示為樹形結(jié)構(gòu)
我們把HTML稱為根節(jié)點，HTML父節(jié)點下面的head稱為子節(jié)點。
如果head節(jié)點下面的title子節(jié)點有文本，那么這個節(jié)點叫做葉節(jié)點(或文本節(jié)點)是樹形結(jié)構(gòu)的尾部。
在DOM中有三個核心對象
Node 文檔每個節(jié)點都有自己的對象
NodeList Node對象的列表
NamedNodeMap 允許按照名稱訪問所有Node對象
DOM方法
getAttribute(屬性名) //它是一個函數(shù)，只能通過元素節(jié)點調(diào)用。
setAttribute(屬性名,屬性值) //可以對元素節(jié)點的屬性做出修改，不會修改源代碼的屬性值
removeAttribute(屬性名) //刪除屬性名
childNodes //用于獲取元素的兒子子元素，返回值是數(shù)組
innerHTML //可以獲取和設(shè)置元素內(nèi)容，它會解析html標(biāo)簽。
innerText //只輸出普通文本，F(xiàn)irefox不支持
<code>scrollWidth //對象實際內(nèi)容的寬度，不含滾動條，會隨著內(nèi)容的大小而變化寬度，如果不超過可視區(qū)域，
此時scrollWidth=clientWidth它們相等
scrollHeight //對象實際內(nèi)容的高度，不含滾動條，會隨著內(nèi)容的大小而變化寬度，如果不超過可視區(qū)域，
此時scrollWidth=clientWidth它們相等
offsetWidth //是元素的實際寬度包含滾動條（offsetHeight = clientHeight + 滾動條 + 邊框），
如果元素大小發(fā)生變化實際寬度也會發(fā)生變化</code>
在DOM學(xué)習(xí)中，記住最重要的一句話：每一個元素節(jié)點都看成一個“對象”。由于元素節(jié)點也是一個對象，因此他們有自身的屬性和方法。
Node對象
屬性
firstChild //返回第一個元素子節(jié)點，沒有子節(jié)點返回null，Chrome、Firefox像空格回車都算一個節(jié)點。
lastChild //返回最后一個元素字節(jié)點，沒有子節(jié)點返回null，Chrome、Firefox像空格回車都算一個節(jié)點。
parentNode //獲取指定節(jié)點的父節(jié)點
Node.nodeType /*每個節(jié)點都有不同的值，查看節(jié)點的值 方便區(qū)別，
元素 1
屬性 2
文本 3
注釋 8
文檔 9*/
Node.nodeValue /*可以得到或設(shè)置一個元素的值，比如P標(biāo)簽的內(nèi)容，如果沒有值返回顯示null。
1. 元素節(jié)點的 nodeValue 是 undefined 或 null
2. 文本節(jié)點的 nodeValue 是文本自身
3. 屬性節(jié)點的 nodeValue 是屬性的值
注：如果想要返回元素的文本內(nèi)容，需要搞清楚的是，該當(dāng)文本內(nèi)容在文本節(jié)點里面，
因此不得不返回文本節(jié)點的值（element.childNodes[0].nodeValue）。*/
方法
createElement(nodeName) //創(chuàng)建一個節(jié)點 但是節(jié)點并不存在于DOM樹種，此時游蕩在內(nèi)存中。
createTextNode(text) //創(chuàng)建文本節(jié)點createElement只建立一個空元素節(jié)點可加不了內(nèi)容哦，這個方法可以加內(nèi)容，它不解析html標(biāo)簽。
parentnode.appendChild(child) //把新創(chuàng)建的節(jié)點插入到父節(jié)點里。
parentnode.insertBefore(newELement, targetELement) //將第一個元素放在第二個元素前面。
node.removeChild(childNode) //刪除當(dāng)前節(jié)點下的子節(jié)點,node是當(dāng)前節(jié)點childNode是子節(jié)點，前面提到空格與回車都算節(jié)點需要注意！
node.cloneChild(bool) //復(fù)制節(jié)點，其值是布爾值當(dāng)值為true時復(fù)制節(jié)點本身+子節(jié)點，false則復(fù)制節(jié)點本身
node.replaceChild(newChild, oldChild) //替換節(jié)點首先的找到舊節(jié)點的父節(jié)點，不是有句話嗎打狗還得看主人...這例子將就下，新節(jié)點與舊節(jié)點都要準(zhǔn)備好。
Document對象
屬性
Element.clientWidth // document.body.clientWidth----獲取body的width不包含body默認(rèn)與瀏覽器的margin。
Element.clientHeight // document.body.clientHeight----獲取body的height同樣不包含默認(rèn)margin。
document.documentElement.clientWieth //獲取瀏覽器內(nèi)容的寬度，不包含豎向滾動條。
document.documentElement.clientHeight //獲取瀏覽器內(nèi)容的高度，不包含橫向滾動條。
document.URL //返回當(dāng)前URL信息
document.title //可以讀和寫title。
-----為了兼容IE
fgColor 定義文檔的前景色
bgColor 定義文檔的背景色
linkColor 定義“未訪問”的超鏈接顏色
alinkColor 定義“被激活”的超鏈接顏色
vlinkColor 定義“訪問過”的超鏈接顏色
-----只支持IE
方法
document.write() //輸出文本到當(dāng)前文檔，不過會清空原有的。
document.writeln() /*與write是一樣的這個方法會多輸出一個換行符，換句話說就是每次輸出都會帶上換行符，
如果你輸出兩個對比一下document.writeln("<pre>sd2</pre>");document.write("sd3");你會發(fā)現(xiàn)pre標(biāo)簽解析了自帶的\n。*/
getElementById(id Value) //根據(jù)idValue值，返回對該元素的引用(節(jié)點)。
getElementsByName(name) //返回一個節(jié)點列表集合，要通過下標(biāo)索引去獲取哦，name=name屬性。
getElementsByTagName(tag Name) //根據(jù)括號提供的標(biāo)簽名稱，返回一組元素的引用(節(jié)點列表)，返回值是數(shù)組。
getELementsByClassName("class value") //返回值是數(shù)組。
querySelector(css Selector) //返回CSS選擇器匹配第一個元素的引用(節(jié)點)。
quertSelector(css Seleceor) //返回CSS選擇器匹配第一組元素的引用(列表)。
事件
鼠標(biāo)事件
onclick //鼠標(biāo)單擊事件
ondbclick //鼠標(biāo)雙擊事件
onmouseover //鼠標(biāo)移入事件
onmouseout //鼠標(biāo)移出事件
onmousemove //鼠標(biāo)移動事件
onmousedown //鼠標(biāo)按下事件
onmouseup //鼠標(biāo)松開事件
表單事件(隸屬鼠標(biāo)事件)
onfocus //獲取焦點事件
onblur //失去焦點事件
onchange //狀態(tài)改變事件
onselect //選中文本事件
鍵盤事件
onkeydown //按下鍵事件（包括數(shù)字鍵、功能鍵）
onkeypress //按下鍵事件（只包含數(shù)字鍵）
onkeyup //放開鍵事件（包括數(shù)字鍵、功能鍵）
三個事件的執(zhí)行順序如下：onkeydown -> onkeypress ->onkeyup。
編輯事件
oncopy //復(fù)制事件
oncut //剪切事件
onpaste //粘貼事件
頁面相關(guān)事件
onload //頁面加載事件
onresize //頁面大小事件
onerror //頁面或圖片加載出錯事件
jQuery
綠葉網(wǎng)3.3 子元素偽類選擇器
:only-child和:only-of-child就像招聘我這邊人招滿了，只能要一個多了沒有這就是only-child。only-of-child就像是新公司需要大量有志青年加入創(chuàng)業(yè)的隊伍，來多少要多少但是限制崗位(崗位就是元素類型)都只能去掃廁所(滑稽)
