一粘勒、初識jQuery.js

jQuery.js是一款優(yōu)秀的JS類庫，其本質(zhì)就是在一個立即執(zhí)行的匿名函數(shù)中的閉包，jQuery=js+Query（查詢）马僻，從命名可以看出jQuery.js最主要的用途是用來做查詢录语，在jQuery.js官方Logo下方還有一個副標(biāo)題（write less, do more）倍啥，體現(xiàn)了jQuery.js除了查詢以外，還可以實(shí)現(xiàn)強(qiáng)大選擇器（即方便快速查找DOM元素澎埠，jQuery.js允許開發(fā)者使用CSS1-CSS3幾乎所有的選擇器虽缕，以及jQuery.js獨(dú)創(chuàng)的選擇器），鏈?zhǔn)秸{(diào)用（即可以通過“.”不斷的調(diào)用jQuery.js中的各種方法）蒲稳，隱式遍歷/迭代（即一次操作多個DOM元素）氮趋，讀寫合一（即讀數(shù)據(jù)和寫數(shù)據(jù)使用同一個jQuery方法），事件處理江耀，DOM操作（即C增U改D刪）剩胁，樣式操作，動畫祥国，豐富的插件支持昵观，Ajax變得更加簡單，瀏覽器兼容（即解決前端開發(fā)者痛點(diǎn)）舌稀，1.x版本兼容ie678啊犬，但相對其它版本文件較大，官方只做BUG維護(hù)壁查，功能不再新增觉至，最終版本是1.12.4（2016年5月20日），2.x版本不兼容ie678睡腿，相對1.x文件較小语御，官方只做BUG維護(hù)，功能不再新增席怪，最終版本是2.2.4（2016年5月20日）应闯，3.x版本不兼容ie678，只支持最新的web瀏覽器何恶，不支持很多老的jQuery.js插件孽锥，相對1.x文件較小，而且3.x提供不包含Ajax/動畫API的版本，我們通過查看百度惜辑、騰訊唬涧、和京東的網(wǎng)頁源代碼，發(fā)現(xiàn)使用的都是1.x版本盛撑，所以我們學(xué)習(xí)1.x版本就可以了碎节，開發(fā)版的意思是所有的源代碼沒有經(jīng)過壓縮，所以體積更大（200-300KB）抵卫，生產(chǎn)版的意思是所有的源代碼經(jīng)過了壓縮狮荔，所以體積更小（30-40KB）介粘，為了初學(xué)者更好的理解jQuery.js殖氏，當(dāng)開發(fā)時，我們使用開發(fā)版姻采，當(dāng)項(xiàng)目上線時雅采，為了提升訪問速度，我們再換成生產(chǎn)版即可慨亲，首先上官網(wǎng)“jquery.com”下載jQuery.js類庫婚瓜，然后在我們自己的.html文件引入所下載的jQuery.js類庫，最后編寫jQuery代碼即可刑棵，原生JS入口函數(shù)的固定寫法是“window.onload = function () {可執(zhí)行的代碼;};”巴刻，當(dāng)寫了多個原生JS的入口函數(shù)時，先編寫的會被后編寫的所覆蓋蛉签，由于原生JS的入口函數(shù)會等到此頁面上的img加載完畢再執(zhí)行胡陪，所以當(dāng)此頁面上的一個<img>沒有設(shè)置寬高時，利用原生JS的入口函數(shù)可以獲取到此<img>的寬高碍舍，jQuery.js入口函數(shù)的固定寫法是“$ (document).ready (function () {可執(zhí)行的代碼;} );”/“jQuery (document).ready (function () {可執(zhí)行的代碼;} );”/“$ (function () {可執(zhí)行的代碼;} );(//推薦)”/“jQuery (function () {可執(zhí)行的代碼;} );”督弓，當(dāng)寫了多個jQuery.js的入口函數(shù)時，先編寫的不會被后編寫的所覆蓋乒验，由于jQuery.js的入口函數(shù)不會等到此頁面上的img加載完畢再執(zhí)行，所以當(dāng)此頁面上的一個<img>沒有設(shè)置寬高時蒂阱，利用jQuery.js的入口函數(shù)無法獲取到此<img>的寬高锻全，當(dāng)引入了多個類庫/框架，并且其它類庫/框架也有$符號時录煤，$符號的使用勢必就會有沖突鳄厌，所以我們可以釋放jQuery代碼中$符號的使用權(quán)，在編寫其它jQuery代碼之前寫上一句“jQuery.noConflict ();”即可妈踊，釋放之后就不能再使用$符號了了嚎，可以改為使用jQuery，還可以自定義一個符號來代替jQuery，例如“var nj = jQuery.noConflict ();(//從此nj就代替了jQuery的功能)”

二歪泳、jQuery.js中的核心函數(shù)和工具方法

$就代表jQuery這個類庫名萝勤，只不過簡寫為$，“$ ();”就等同于“jQuery ();”呐伞，代表調(diào)用jQuery.js的核心函數(shù)敌卓，在調(diào)用的時候可以向里邊傳參，可以傳入一個回調(diào)函數(shù)伶氢，即入口函數(shù)趟径，格式為“$ (function () {可執(zhí)行的代碼;});”，可以傳入一個空字符串/null/undefined/NaN/0/false癣防，返回值是一個空的jQuery集合灯帮，可以傳入一個基本數(shù)據(jù)/對象/DOM元素，返回值是一個保存了所傳入的基本數(shù)據(jù)/對象/DOM元素的jQuery集合胡野，例如“$ (oSpan);”太惠，可以傳入一個選擇器字符串，例如“$ (“.box1”);(//返回值是一個保存了在此頁面上所找到的傳入選擇器字符串所指代的所有DOM元素的jQuery集合)”刑枝，可以傳入一個HTML代碼片段字符串香嗓，例如“$ (“<p>我是段落</p>”);(//返回值是一個保存了傳入HTML代碼片段字符串所指代的新createElement的DOM元素的jQuery集合，當(dāng)所傳入的HTML代碼片段存在嵌套關(guān)系時装畅，只有一級DOM元素會保存在jQuery集合中)”靠娱，可以傳入一個真/偽數(shù)組，返回值是一個保存了所傳入的真/偽數(shù)組中所有元素的jQuery集合掠兄，含有0像云、1、2蚂夕、...一直到(length-1)的屬性以及l(fā)ength屬性的對象就叫做偽數(shù)組（或者叫偽數(shù)組對象）迅诬，jQuery集合其實(shí)就是一個偽數(shù)組，原生JS中的forEach和map等方法是無法遍歷偽數(shù)組的婿牍，jQuery集合調(diào)用它的get方法可以返回此集合中第傳入索引個元素（當(dāng)不傳參時侈贷，就相當(dāng)于調(diào)用toArray方法，當(dāng)傳入一個負(fù)數(shù)時等脂，就相當(dāng)于用此數(shù)值與此集合的總長度值相加）俏蛮，jQuery的DOM元素集合調(diào)用它的index方法可以返回此集合中的首個DOM元素在其同級別標(biāo)簽中的索引值，jQuery集合調(diào)用它的each方法可以遍歷此集合上遥，返回值是調(diào)用者搏屑，在所傳入回調(diào)函數(shù)的作用域中，this指針指代的是所遍歷到的元素粉楚，“return true;”就相當(dāng)于“continue;”辣恋，“return false;”就相當(dāng)于“break;”亮垫，jQuery類對象調(diào)用它的each方法可以遍歷參數(shù)1真/偽數(shù)組/對象，返回值是參數(shù)1伟骨，在參數(shù)2回調(diào)函數(shù)的作用域中饮潦，this指針指代的是所遍歷到的元素，“return true;”就相當(dāng)于“continue;”底靠，“return false;”就相當(dāng)于“break;”害晦，例如“var arr = [1, 3, 5, 7, 9]; ?var obj = {0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}; ?$.each (obj, function (index, value) {console.log(index, value);} );(//第一個形參index接收到的實(shí)參是所遍歷到的索引值，第二個形參value接收到的實(shí)參是所遍歷到的元素暑中，只能接收到這倆參數(shù))”壹瘟，jQuery類對象調(diào)用它的map方法可以遍歷參數(shù)1真/偽數(shù)組，返回值是參數(shù)2回調(diào)函數(shù)的返回值所組成的數(shù)組鳄逾，例如“$.map (obj, function (value, index) {return value + index;});(//返回值是[1, 4, 7, 10, 13])”稻轨，jQuery類對象調(diào)用它的trim方法可以返回傳入字符串被去除兩端空格之后的新字符串，例如“var str = “l(fā)nj ??”; ?$.trim (str);(//返回值是“l(fā)nj”)”雕凹，jQuery類對象調(diào)用它的isWindow方法可以判斷所傳入的數(shù)據(jù)是否是window對象殴俱，返回值是true/false，jQuery類對象調(diào)用它的isArray方法可以判斷所傳入的數(shù)據(jù)是否是真數(shù)組枚抵，返回值是true/false线欲，jQuery類對象調(diào)用它的isFunction方法可以判斷所傳入的數(shù)據(jù)是否是一個函數(shù)，返回值是true/false汽摹，jQuery類對象調(diào)用它的holdReady方法可以暫停/恢復(fù)ready事件李丰，傳入true代表暫停，傳入false代表恢復(fù)逼泣，例如“$.holdReady (true); ?$ (document).ready (function () {alert (“ready”);} );(//不會有彈窗)”趴泌，jQuery集合調(diào)用它的toArray方法可以返回此集合被轉(zhuǎn)成的真數(shù)組

三、jQuery.js中的選擇器以及操作html網(wǎng)頁的各種相關(guān)方法

jQuery.js中的內(nèi)容選擇器有“:empty”拉庶、“:parent”嗜憔、“:contains()”、和“:has()”氏仗，“:empty”的作用是選中沒有任何內(nèi)容（文本/子標(biāo)簽）的冒號前的標(biāo)簽吉捶，例如“var $div = $ (“div:empty”);”，“:parent”的作用是選中含有內(nèi)容（文本/子標(biāo)簽）的冒號前的標(biāo)簽皆尔，例如“var $div = $ (“div:parent”);”帚稠，“:contains()”的作用是選中包含小括號內(nèi)文本內(nèi)容的冒號前的標(biāo)簽，例如“var $div = $ (“div:contains(‘我是div’)”);”床佳，“:has()”的作用是選中包含小括號內(nèi)子標(biāo)簽的冒號前的標(biāo)簽，例如“var $div = $ (“div:has(‘span’)”);”榄审，一個對象身上所保存的變量就叫做屬性砌们，在JS中，HTML標(biāo)簽的HTML屬性就叫做屬性節(jié)點(diǎn)，任何對象都有屬性浪感，但是只有DOM元素才有屬性節(jié)點(diǎn)昔头，在瀏覽器的開發(fā)者工具（F12）中，點(diǎn)擊Sources->右側(cè)的Watch->上面的加號影兽，然后輸入例如“document.querySelector (“.one”);”揭斧，找到相應(yīng)DOM元素后，展開之后所看到的都是屬性峻堰，在attributes偽數(shù)組中所保存的所有元素都是屬性節(jié)點(diǎn)讹开，我們可以調(diào)用原生JS中的setAttribute和getAttribute方法來操作屬性節(jié)點(diǎn)，jQuery的DOM元素集合調(diào)用它的attr方法可以返回/修改/批量修改此集合中首個/所有DOM元素的傳入系統(tǒng)自帶/自定義屬性節(jié)點(diǎn)字符串的取值（在傳入跟取值相同的屬性節(jié)點(diǎn)字符串時捐名，如checked/selected/disabled屬性節(jié)點(diǎn)旦万，當(dāng)調(diào)用者添加了所傳入的屬性節(jié)點(diǎn)時，返回值是此屬性節(jié)點(diǎn)字符串镶蹋，當(dāng)沒添加時成艘，返回值是undefined，不推薦贺归，碰到此種情況建議改用prop方法淆两，其余情況用attr方法即可），返回值是調(diào)用者拂酣，例如“console.log ($ (“span”).attr (“class”) );(//首個span元素)”秋冰，“$ (“span”).attr (“class”, “box”);(//所有span元素，沒有就新增)”踱葛，“$ (“span”).attr ({class: “a123”, name: “888”});(//所有span元素丹莲，沒有就批量新增)”，jQuery的DOM元素集合調(diào)用它的prop方法可以返回/修改/批量修改此集合中首個/所有DOM元素的傳入屬性/系統(tǒng)自帶屬性節(jié)點(diǎn)字符串的取值（在傳入了跟取值相同的屬性節(jié)點(diǎn)字符串時尸诽，如checked/selected/disabled屬性節(jié)點(diǎn)甥材，當(dāng)調(diào)用者添加了所傳入的屬性節(jié)點(diǎn)時，返回值是true性含，當(dāng)沒添加時洲赵，返回值是false，官方推薦）商蕴，返回值是調(diào)用者叠萍，例如“console.log ($ (“p”).prop (“title”) );(//首個p元素，當(dāng)傳入一個自定義的屬性節(jié)點(diǎn)字符串時绪商，返回值是undefined)”苛谷，“$ (“p”).prop (“demo”, “l(fā)nj”);(//所有p元素，沒有就新增)”格郁，“$ (“p”).prop ({class: “a123”, name: “888”});(//所有p元素腹殿，沒有就批量新增)”独悴，jQuery的DOM元素集合調(diào)用它的removeProp/removeAttr方法可以刪除此集合中所有DOM元素所傳入的屬性/屬性節(jié)點(diǎn)字符串，例如“$ (“span”).removeAttr (“class name”);(//有多個就用空格隔開)”锣尉，jQuery的DOM元素集合調(diào)用它的addClass/removeClass/toggleClass方法可以給此集合中所有DOM元素添加/刪除一/多個所傳入的類名字符串/切換addClass和removeClass的狀態(tài)刻炒，返回值是調(diào)用者，當(dāng)調(diào)用者擁有所傳入的類名時自沧，addClass方法不會重復(fù)去添加坟奥，當(dāng)不傳參時，removeClass和toggleClass方法會刪除調(diào)用者所有的類名拇厢，例如“$ (“div”).addClass (“class1 class2”);”爱谁，jQuery的DOM元素集合調(diào)用它的html/text方法既可以返回此集合中首個/所有DOM元素內(nèi)部包含/不包含兩端空格和HTML標(biāo)簽的內(nèi)容字符串，也可以將此集合中所有DOM元素中的內(nèi)容設(shè)置為所傳入的包含HTML標(biāo)簽/普通（即出現(xiàn)HTML標(biāo)簽時會當(dāng)成普通的字符串）的字符串（html方法也可以傳入一個jQuery的DOM元素集合/DOM元素）旺嬉，例如“$ (“div”).html ($ (“p”) );(//會將此頁面上的p元素剪切管行，并設(shè)置為div元素中的內(nèi)容)”，jQuery的input輸入框元素集合調(diào)用它的val方法可以返回/設(shè)置此集合中首個/所有單行文本輸入框中所輸入的內(nèi)容字符串邪媳，返回值是調(diào)用者捐顷，jQuery的DOM元素集合調(diào)用它的prepend/append方法可以在此集合中所有DOM元素內(nèi)部的最前/后面添加所傳入的HTML代碼片段字符串/jQuery的DOM元素集合/DOM元素/文本內(nèi)容，返回值是調(diào)用者雨效，jQuery的DOM元素集合調(diào)用它的prependTo/appendTo方法可以將此集合中所有DOM元素添加到傳入選擇器字符串/jQuery的DOM元素集合/DOM元素內(nèi)部的最前/后面迅涮，返回值是調(diào)用者，例如“$ (“<li>新增的li</li>”).appendTo (“ul”);”徽龟，jQuery的DOM元素集合調(diào)用它的before/after方法可以在此集合中所有DOM元素的前/后面都添加所傳入的HTML代碼片段字符串/jQuery的DOM元素集合/DOM元素/文本內(nèi)容叮姑，jQuery的DOM元素集合調(diào)用它的insertBefore/insertAfter方法可以將此集合中所有DOM元素添加到傳入選擇器字符串/jQuery的DOM元素集合的前/后面，返回值是調(diào)用者据悔，例如“$ (“<div>你好</div>”).insertAfter (“ul”);”传透，jQuery的DOM元素集合調(diào)用它的remove/detach方法可以刪除此集合中傳入選擇器字符串所指代的DOM元素，當(dāng)不傳參時极颓，會刪除此集合中的所有DOM元素朱盐，返回值是調(diào)用者（remove跟detach的不同是，remove還會將被刪除DOM元素所綁定的事件以及所附加的數(shù)據(jù)也一并移除）菠隆，jQuery的DOM元素集合調(diào)用它的empty方法可以刪除此集合中所有DOM元素中的所有內(nèi)容兵琳，返回值是調(diào)用者，jQuery的DOM元素集合調(diào)用它的replaceWith方法可以將此集合中所有DOM元素替換為所傳入的HTML代碼片段字符串/jQuery的DOM元素集合/DOM元素骇径，例如“$ (“div”).replaceWith ($ (“p”) );(//將此頁面上的p元素剪切躯肌，并將div元素替換掉)”，jQuery的DOM元素集合調(diào)用它的replaceAll方法可以將所傳入的選擇器字符串所指代的DOM元素替換為此集合中所有的DOM元素破衔，例如“$ (“<h6>我是標(biāo)題6</h6>”).replaceAll (“h1”);”晰筛，jQuery的DOM元素集合調(diào)用它的clone方法可以返回深/淺復(fù)制的此調(diào)用者，傳入true/false是深/淺復(fù)制羊瘩，淺復(fù)制只會復(fù)制此調(diào)用者浇坐，而深復(fù)制除了會復(fù)制此調(diào)用者，還會復(fù)制其所綁定的事件介劫，jQuery的DOM元素集合調(diào)用它的css方法可以返回/設(shè)置此集合中首個/所有DOM元素傳入的行內(nèi)樣式/CSS屬性字符串的取值，返回值是調(diào)用者誉碴，例如“console.log ($ (“div”).css (“backgroundColor”) );(//首個div元素)”，“$ (“div”).css (“width”, “100px”);(//所有div元素，當(dāng)設(shè)置時，設(shè)置成的一定是行內(nèi)樣式)”，“$ (“div”).css (“width”, “100px”).css (“height”, “100px”).css (“backgroundColor”, “blue”);(//所有div元素铡买，鏈?zhǔn)皆O(shè)置漂坏，當(dāng)鏈?zhǔn)讲僮鞔笥?步時谷徙，建議分開寫，否則閱讀性較差)”完慧，“$ (“div”).css ({width: “100px”, height: “100px”, backgroundColor: “red”});(//所有div元素剩失，批量設(shè)置屈尼，當(dāng)CSS屬性名稱帶有中劃線時赴叹，要改成駝峰命名)”鸿染，jQuery的DOM元素集合調(diào)用它的width/height方法可以返回/設(shè)置此集合中所有DOM元素width/height屬性的取值乞巧，例如“$ (“.father”).width ();(//返回值不帶單位px)”是辕，“$ (“.father”).width (“500px”);”，jQuery的DOM元素集合調(diào)用它的offset方法可以返回/設(shè)置此集合中首個DOM元素的左和上邊緣與網(wǎng)頁可視區(qū)域的左和上邊緣的距離值對象（包含left和top兩個屬性）疙教，例如“$ (“.son”).offset ().left;(//返回值不帶單位px)”棺聊，“$ (“.son”).offset ({left: 10});(//傳入對象中屬性的取值不能帶單位px)”，jQuery絕對/固定定位標(biāo)簽偽數(shù)組對象調(diào)用它的position方法可以返回（但無法設(shè)置）此集合中首個DOM元素的左和上邊緣與其最近的定位流上級元素的左和上邊緣的距離值對象（包含left和top兩個屬性）贞谓，例如“$ (“.son”).position ().left;(//返回值不帶單位px)”限佩，jQuery的DOM元素/html/body元素集合調(diào)用它的scrollLeft/scrollTop方法可以返回/設(shè)置此集合中所有DOM元素/此網(wǎng)頁橫/豎向滾動條滾出的距離值，例如“$ (“.scroll”).scrollTop (300);”，“console.log ($ (“body”).scrollTop () + $ (“html”).scrollTop () );(//為了做兼容性處理祟同，因?yàn)镮E瀏覽器支持$ (“body”)作喘，非IE瀏覽器支持$ (“html”))”，“$ (“html, body”).scrollTop (300);(//為了做兼容性處理)”晕城，jQuery集合調(diào)用它的eq方法可以返回一個只有此集合中第傳入索引個元素的jQuery集合（當(dāng)不傳參時泞坦，返回值是一個空的jQuery集合，當(dāng)傳入負(fù)數(shù)時砖顷，就相當(dāng)于用此數(shù)值與總長度值相加）暇矫，例如“$ (“span”).eq (0);”，jQuery的DOM元素集合調(diào)用它的first方法可以返回一個只有此集合中首個DOM元素的jQuery集合择吊，jQuery的DOM元素集合調(diào)用它的last方法可以返回一個只有此集合中最后一個DOM元素的jQuery集合，jQuery的DOM元素集合調(diào)用它的siblings方法可以返回一個跟此集合中所有DOM元素同級別的其它DOM元素所組成的jQuery集合（一般用來做排它）槽奕，jQuery的DOM元素集合調(diào)用它的children方法可以返回一個此集合中所有DOM元素的傳入選擇器字符串所指代的子代DOM元素所組成的jQuery集合（當(dāng)不傳參時几睛，返回值是一個所有子代DOM元素所組成的jQuery集合），例如“$ (“.nav>li”).children (“.sub”);”粤攒，jQuery的DOM元素集合調(diào)用它的parents/find方法可以返回一個此集合中所有DOM元素的傳入選擇器字符串所指代的上/下級DOM元素所組成的jQuery集合所森，例如“$ (“.infoDel”).parents (“.info”);”，jQuery的DOM元素集合調(diào)用它的hasClass方法可以檢測此集合中所有DOM元素是否含有所傳入的類名字符串夯接，返回值是true/false焕济，當(dāng)未傳參時，返回值是false盔几，jQuery的DOM元素集合調(diào)用它的prev/next方法可以返回一個此集合中所有DOM元素緊鄰的上/下一個同級別DOM元素所組成的jQuery集合

四晴弃、jQuery.js中事件的綁定

jQuery.js中有兩種綁定事件方式，第一種方式是利用jQuery的DOM元素集合調(diào)用它的去掉on的事件名稱來綁定逊拍，然后傳入一個回調(diào)函數(shù)即可上鞠，例如“$ (“button”).click (function () {alert (“hello lnj”);} );”，優(yōu)點(diǎn)是在調(diào)用去掉on的事件名稱的時候編輯器會給予提示芯丧，所以編碼效率略高芍阎，還不容易寫錯，缺點(diǎn)是部分JS事件在jQuery.js中沒有實(shí)現(xiàn)缨恒，所以不能綁定谴咸，第二種方式是利用jQuery的DOM元素集合調(diào)用它的on方法來綁定，然后傳入?yún)?shù)1去掉on的事件名稱字符串和參數(shù)2回調(diào)函數(shù)即可骗露，例如“$ (“button”).on (“click”, function () {alert (“hello click1”);} );”岭佳，優(yōu)點(diǎn)是所有的JS事件都可以綁定，缺點(diǎn)是事件名稱是以字符串的形式傳入椒袍，編輯器不會給予提示驼唱，所以編碼效率略低，還容易寫錯驹暑，以上這兩種綁定方式都會給此jQuery的DOM元素集合所包含的所有DOM元素都綁定上相應(yīng)事件玫恳，返回值是調(diào)用者辨赐，所傳入回調(diào)函數(shù)的作用域中的this指針指代的是觸發(fā)此事件的DOM元素，當(dāng)使用這兩種綁定方式給某個jQuery的DOM元素集合綁定多個同名事件時京办，不會發(fā)生覆蓋掀序，并且觸發(fā)的順序是正向的，由于mouseover/mouseout事件無法阻止事件冒泡惭婿，所以在一個同時綁定了mouseover和mouseout事件的jQuery的DOM元素集合中不恭，當(dāng)鼠標(biāo)從此集合所包含的DOM元素mouseover到其子代DOM元素時，會先觸發(fā)其mouseout事件财饥，后觸發(fā)其mouseover事件（冒泡所導(dǎo)致）换吧，當(dāng)再從其子代DOM元素mouseover到此DOM元素時，會先觸發(fā)其mouseout事件（冒泡所導(dǎo)致）钥星，后觸發(fā)其mouseover事件沾瓦，而mouseenter/mouseleave事件則可以阻止事件冒泡（推薦），給jQuery的DOM元素集合所綁定的hover事件的觸發(fā)條件是鼠標(biāo)移入/出此集合所包含的DOM元素（可傳入一/兩個回調(diào)函數(shù)）谦炒，例如“$ (“.father”).hover (function () {console.log (“father被移入了”);}, function () {console.log (“father被移出了”);} );”贯莺，“$ (“.father”).hover (function () {console.log (“father被移入移出了”);} );”，給jQuery的window對象集合所綁定的scroll事件的觸發(fā)條件是此瀏覽器窗口的滾動條發(fā)生滾動宁改，給jQuery的input輸入框/textarea/select元素集合所綁定的change事件的觸發(fā)條件是此集合所包含的單/多行文本輸入框中的內(nèi)容發(fā)生改變并失去焦點(diǎn)（只有手動輸入的才有效）/在此集合所包含的下拉菜單中選擇了某個選項(xiàng)缕探，由于change事件失去焦點(diǎn)才能觸發(fā)，所以當(dāng)想要實(shí)時監(jiān)聽單/多行文本輸入框中的內(nèi)容是否發(fā)生改變時还蹲，就不能使用change事件了爹耗，而且必須用使用事件委托，固定寫法是例如“$ (“body”).delegate (“.comment”, “propertychange input”, function () {});(//為了做兼容性處理谜喊，所以綁定了propertychange和input兩個事件)”鲸沮，jQuery的DOM元素集合調(diào)用它的off方法可以移除給此集合中所有DOM元素所綁定的所傳入的事件名稱字符串，例如“$ (“button”).off ();(//不傳參會移除所綁定的所有事件)”锅论，“$ (“button”).off (“click”);”讼溺，“$ (“button”).off (“click”, function () {alert (“button”);} );(//參數(shù)2為參數(shù)1事件的回調(diào)函數(shù)，當(dāng)給調(diào)用者綁定了多個同名的參數(shù)1事件時最易，可以定向移除某一個參數(shù)1事件)”怒坯，在jQuery中，阻止事件冒泡的方式是在傳入的回調(diào)函數(shù)作用域的結(jié)尾處添加一句“return false;”/“event.stopPropagation ();(//需用形參event接收一下事件對象)”藻懒，讓手動綁定的事件覆蓋掉跟系統(tǒng)同名的事件（即阻止默認(rèn)行為/移除默認(rèn)事件）的方式是在傳入的回調(diào)函數(shù)作用域的結(jié)尾處添加一句“return false;”/“event.preventDefault ();(//需用形參event接收一下事件對象)”剔猿，jQuery的DOM元素集合調(diào)用它的trigger/triggerHandler方法可以自動觸發(fā)此集合中所有DOM元素所綁定的所傳入的事件名稱字符串，trigger方法會觸發(fā)事件冒泡和默認(rèn)事件嬉荆，而triggerHandler方法則不會归敬，例如“$ (“.son”).trigger (“click”);”，但是a元素比較特殊，即使調(diào)用了trigger方法也無法觸發(fā)其默認(rèn)事件汪茧，解決方式是在a元素內(nèi)部再嵌套一個span元素椅亚，將a元素中的內(nèi)容包起來，然后利用jQuery的span元素集合調(diào)用它的trigger方法并傳入相應(yīng)事件名稱字符串即可舱污，例如“$ (“span”).trigger (“click”);”呀舔，當(dāng)想要自定義事件名稱時，必須滿足兩個條件扩灯，一是此事件必須是調(diào)用on方法來綁定的媚赖，二是此事件必須調(diào)用trigger/triggerHandler方法來自動觸發(fā)，例如“$ (“.son”).on (“myClick”, function () {alert (“son”);} ); ?$ (“.son”).trigger (“myClick”);”珠插，jQuery的DOM元素集合調(diào)用它的on方法來給其綁定多個同名事件時惧磺，是存在事件命名空間的（即可以分別給此同名事件添加不同的備注名稱）捻撑，并且也可以調(diào)用trigger/triggerHandler方法來自動觸發(fā)其中一個豺妓，例如“$ (“.son”).on (“click.zs”, function () {alert (“click1”);} ); ?$ (“.son”).on (“click.ls”, function () {alert (“click2”);} ); ?$ (“.son”).trigger (“click.ls”);”，當(dāng)調(diào)用trigger方法自動觸發(fā)某個DOM元素帶有命名空間的事件時布讹，其父DOM元素帶有相同命名空間的同名事件也會被自動觸發(fā)（冒泡），而其父DOM元素不帶有相同命名空間的同名事件則不會被自動觸發(fā)训堆，當(dāng)調(diào)用trigger方法自動觸發(fā)某個DOM元素不帶有命名空間的事件時描验，此DOM元素和其父DOM元素所有的同名事件都會被自動觸發(fā)，在jQuery中坑鱼，DOM元素可以將某個事件委托給其父DOM元素來監(jiān)聽膘流，jQuery上級DOM元素集合調(diào)用它的delegate方法可以使參數(shù)1選擇器字符串所指代的下級DOM元素委托此上級DOM元素來監(jiān)聽參數(shù)2事件字符串，觸發(fā)后執(zhí)行參數(shù)3回調(diào)函數(shù)（但無法監(jiān)聽hover事件鲁沥，只能使用mouseenter和mouseleave事件來代替）呼股，適用于監(jiān)聽后期使用JS代碼所動態(tài)添加的DOM元素，因?yàn)樵谌肟诤瘮?shù)執(zhí)行的時候画恰，此頁面上的某些DOM元素就已經(jīng)存在了彭谁，例如“$ (“ul”).delegate (“l(fā)i”, “click”, function () {console.log ($ (this).html () );} );(//由于delegate方法的底層原理是event.target，所以click事件其實(shí)是綁定給了ul元素允扇，這里的this指針指的是觸發(fā)click事件的那個li元素缠局，也就是將click事件冒泡給ul元素的那個li元素)”，jQuery的DOM元素集合調(diào)用它的one方法可以給此集合中所有DOM元素綁定只能觸發(fā)一次的事件考润，例如“$ (“.wolfImage”).one (“click”, function () {});”

五狭园、jQuery.js中的transition和animation

jQuery的DOM元素集合調(diào)用它的show/hide/toggle方法可以給此集合中所有DOM元素的display屬性設(shè)置transition并設(shè)置display值為auto/none/切換show和hide的狀態(tài)，例如“$ (“div”).show (1000, “l(fā)inear”, function () {alert (“顯示的transition執(zhí)行完畢”);} );(//參數(shù)1毫秒值代表transition執(zhí)行的時長糊治，也可以換成“slow”/“normal”/“fast”唱矛，參數(shù)2為可選參數(shù)，代表transition執(zhí)行的節(jié)奏，默認(rèn)為“swing”绎谦，慢快慢管闷，參數(shù)3回調(diào)函數(shù)在transition執(zhí)行完畢后執(zhí)行)”，jQuery的DOM元素集合調(diào)用它的slideDown/slideUp/slideToggle方法可以給此集合中所有DOM元素的display和height屬性設(shè)置transition并設(shè)置它倆的值為auto和其本來的值/none和0/切換slideDown和slideUp的狀態(tài)燥滑，用法同上渐北，jQuery的DOM元素集合調(diào)用它的stop方法可以立即停止此集合中所有DOM元素當(dāng)前的transition，并繼續(xù)執(zhí)行后續(xù)的transition（不傳參/傳入一/兩個false）铭拧，也可以立即停止當(dāng)前和后續(xù)的transition（傳入一個true/一個true一個false）赃蛛，也可以立即完成當(dāng)前的transition，并繼續(xù)執(zhí)行后續(xù)的transition（傳入一個false一個true）搀菩，還可以立即完成當(dāng)前的transition呕臂，并停止后續(xù)的transition（傳入兩個true），由于jQuery的transition中存在隊(duì)列肪跋，即只有前一個transition執(zhí)行完畢歧蒋，后一個transition才會執(zhí)行，所以當(dāng)想要停掉上一個未完成的transition時州既，在執(zhí)行當(dāng)前這個transition之前調(diào)用一下stop方法即可（推薦）谜洽，例如“$ (.sub).stop ();”，jQuery的DOM元素集合調(diào)用它的fadeIn/fadeTo/fadeOut/fadeToggle方法可以給此集合中所有DOM元素的display和opacity屬性設(shè)置transition并設(shè)置它倆的值為auto和其本來的值/auto和所傳入的值/none和0/切換fadeIn和fadeOut的狀態(tài)吴叶，例如“$ (“div”).fadeTo (1000, 0.2, “l(fā)inear”, function () {alert (“淡入到0.2完畢”);} )(//0.2代表opacity值)”阐虚，“$ (“.ad”).stop ().slideDown (1000).fadeOut (1000).fadeIn (1000);(//由于存在transition隊(duì)列，所以我們可以通過鏈?zhǔn)秸{(diào)用來設(shè)置多個transition蚌卤，事先stop一下只是為了規(guī)避一些隱含的bug实束，不影響效果)”，jQuery的DOM元素集合調(diào)用它的animate方法可以給此集合中所有DOM元素的一/多個行內(nèi)樣式屬性設(shè)置animation（當(dāng)設(shè)置多個時逊彭，多個行內(nèi)樣式屬性的animation會同時執(zhí)行）咸灿，例如“$ (“.two”).animate ({width: 500}, 1000, “l(fā)inear”, function () {alert (“自定義animation執(zhí)行完畢”);} );(//參數(shù)1也可傳入比如“{width: “+=100”}(//意思是在原基礎(chǔ)上加100)”/“{width: “hide”/“show”/“toggle”}”)”，jQuery的DOM元素集合調(diào)用它的delay方法可以讓此集合中所有DOM元素延遲傳入的毫秒值再執(zhí)行之后的animation侮叮，例如“$ (“.one”).animate ({width: 500}, 1000).delay (2000).animate ({height: 500}, 1000);”避矢，jQuery.fx對象修改它的off屬性值可以關(guān)閉此頁面上所有的animation，格式為“jQuery.fx.off = true;(//默認(rèn)值是false)”囊榜，jQuery.fx對象修改它的interval屬性值可以設(shè)置此頁面上animation的顯示幀速漱病，例如“jQuery.fx.interval = 100;(//默認(rèn)值是13鱼炒，值越大越卡，越小越流暢，也越消耗瀏覽器的性能)”

六征唬、mCustomScrollbar.js插件

此插件是一個基于jQuery.js的插件礁扮，可以美化滾動條的樣式忿偷，先上官網(wǎng)manos.malihu.gr/jquery-custom-content-scroller蛉威，找到download材蛛，下載到本地并解壓縮，引入文件的順序?yàn)閖query.mCustomScrollbar.css怎抛、自己的index.css（因?yàn)樵谖覀冏约旱膇ndex.css中有可能去操作jquery.mCustomScrollbar.css）卑吭、jQuery.js、jquery.mCustomScrollbar.concat.min.js马绝、自己的index.js豆赏，然后找到頁面上的“Initialization”標(biāo)題，直接調(diào)用它封裝好的函數(shù)就可以了富稻，例如“$ (“.content”).mCustomScrollbar ();(//“.content”代表某個DOM元素)”掷邦，然后找到“Initialize via HTML”標(biāo)題，就可以看到在HTML結(jié)構(gòu)代碼上如何使用了椭赋，找到想美化的那個HTML標(biāo)簽抚岗，給它添加一個自定義的HTML屬性，叫做data-mcs-theme屬性哪怔，取值有很多可以選擇宣蔚，找到頁面上的“view demo”標(biāo)題，點(diǎn)擊“Scrollbar themes”按鈕认境，就可以看到不同的取值分別代表不同的樣式胚委，當(dāng)想要修改滾動條的寬度時，可以閱讀主頁上的“Scrollbar markup”標(biāo)題下的內(nèi)容叉信，當(dāng)想要把滾動條的寬度改為8px時亩冬，需要在我們自己的index.css上添加上一句“._mCS_1 .mCSB_dragger .mCSB_dragger_bar {width: 8px;}”即可，由于在國內(nèi)用此插件的人比較多茉盏，所以網(wǎng)上也有很多中文的文檔，可以自己百度一下中文的文檔

七枢冤、jQuery.js的原理

jQuery的本質(zhì)是一個閉包鸠姨，即定義在一個立即執(zhí)行的匿名函數(shù)內(nèi)部的子函數(shù)，好處是當(dāng)引入多個類庫/框架時淹真，可以避免這些類庫/框架中所定義變量的命名沖突讶迁，在此立即執(zhí)行的匿名函數(shù)的作用域中，必須通過“window.jQuery?= jQuery;”的方式將此局部jQuery函數(shù)轉(zhuǎn)成全局函數(shù)核蘸，jQuery函數(shù)所在的立即執(zhí)行的匿名函數(shù)之所以給自己傳入一個window對象一是為了方便后期壓縮代碼巍糯，因?yàn)樾螀⒕涂梢杂靡粋€字母例如“w”來代替了，二是為了提升查找的效率客扎，因?yàn)楫?dāng)自己的作用域中有window對象時祟峦，使用自己作用域中的就可以了，就不用沿著作用域鏈去查找了徙鱼，jQuery函數(shù)所在的立即執(zhí)行的匿名函數(shù)之所以要用形參給自己接收一個undefined宅楞，一是為了方便后期壓縮代碼针姿，二是為了保證內(nèi)部使用的undefined不被修改，因?yàn)樵贗E9以下的低級瀏覽器中厌衙，undefined是可以被修改的距淫，例如“undefined = 998;(//在IE9以下的低級瀏覽器中，undefined就變成了998)”婶希，所以需要接收一個正確的undefined榕暇，jQuery的精髓是免用new，直接“jQuery ();”就可以return一個init函數(shù)（類）的實(shí)例對象喻杈，但是為了使此實(shí)例對象可以調(diào)用jQuery.prototype中所定義的各種方法彤枢，必須在最后加上一句“jQuery.prototype.init.prototype = jQuery.prototype;(//將init類的prototype對象指向了jQuery類的prototype對象)”，這樣一來奕塑，我們所獲取到的實(shí)例對象就可以調(diào)用jQuery.prototype中所定義的各種方法了

八堂污、AJAX

“器”這個詞在硬件領(lǐng)域指的是一個看得見、摸得著的實(shí)物龄砰，在軟件領(lǐng)域指的是“程序”盟猖，同理，服務(wù)器在硬件領(lǐng)域指的是一臺24小時不斷電换棚、不關(guān)機(jī)式镐，并且提供了某種服務(wù)功能的超級電腦，而在軟件領(lǐng)域指的是提供了某種服務(wù)功能的程序固蚤，根據(jù)所提供服務(wù)的不同又分為文件服務(wù)器娘汞、郵件服務(wù)器、和web服務(wù)器（例如Apache夕玩、IIS你弦、Tomcat、Nginx燎孟、和NodeJS）等禽作，所以，提供管理網(wǎng)站服務(wù)的軟件/安裝了此軟件的電腦都可以叫做web服務(wù)器揩页，WAMPServer指的就是W（Windows操作系統(tǒng)）+A（Apache旷偿，世界排名第一的web服務(wù)器，特點(diǎn)是簡單爆侣、速度快萍程、性能穩(wěn)定）+M（MySQL數(shù)據(jù)庫，一款開源免費(fèi)的數(shù)據(jù)庫軟件兔仰，特點(diǎn)是體積小茫负、速度快、使用成本低）+P（php解釋器乎赴，php即Personal home page Hypertext Preprocessor朽褪，就是個人主頁超文本預(yù)處理程序置吓，可以直接將代碼嵌入HTML文檔中執(zhí)行，特點(diǎn)是簡單易學(xué)缔赠，容易上手）衍锚，安裝Apache的方法是，先雙擊WAMPServer安裝包嗤堰，然后選擇語言戴质，只有English，沒有Chinese踢匣，點(diǎn)擊OK->Next->Next告匠，選擇安裝路徑（路徑中一定不要出現(xiàn)中文，否則以后會有一些未知的bug离唬，比如系統(tǒng)托盤區(qū)的圖標(biāo)不變綠）后专，然后點(diǎn)擊Next->Next，點(diǎn)擊install開始安裝输莺，然后點(diǎn)擊“是”選擇瀏覽器戚哎，任意一個瀏覽器都可以，比如找到桌面嫂用，選擇谷歌瀏覽器型凳，點(diǎn)擊“打開”，再點(diǎn)“是”嘱函，再找到桌面甘畅，再選擇谷歌瀏覽器，再點(diǎn)擊“打開”往弓，然后點(diǎn)擊Next->Finish安裝完畢疏唾，然后雙擊打開WAMPServer，在系統(tǒng)托盤區(qū)會出現(xiàn)一個圖標(biāo)函似，此圖標(biāo)一開始是紅色的槐脏，然后變?yōu)辄S色的，最后會變?yōu)榫G色的缴淋，只有它變?yōu)榫G色的才代表著此軟件正常的運(yùn)行了准给，此電腦就可以提供web相關(guān)的服務(wù)了（即變成了一臺本地web服務(wù)器）泄朴，可以測試訪問一下重抖，打開web瀏覽器，訪問web服務(wù)器默認(rèn)的ip地址“127.0.0.1”祖灰，就看到顯示的內(nèi)容了钟沛，由于php是服務(wù)端編程語言，所以php代碼只能使用php解釋器配合web服務(wù)器（例如Apache）來解釋執(zhí)行局扶，當(dāng)我們經(jīng)由webstorm使用web瀏覽器來打開.php文件時恨统，雖然webstorm默認(rèn)就是服務(wù)端的環(huán)境叁扫，但是也是無法解釋執(zhí)行php代碼的，頁面會報“502 bad gateway”的錯誤畜埋，所以我們必須先雙擊運(yùn)行WAMPServer軟件莫绣，然后將.php文件放在WAMPServer軟件安裝目錄中名叫“www”的文件夾中，然后再使用web瀏覽器訪問web服務(wù)器的ip地址（即向web服務(wù)器發(fā)送請求報文）悠鞍，但是默認(rèn)打開的是“www”文件夾中的“index.php”文件对室，當(dāng)將此文件更改一下名稱時，再次使用web瀏覽器訪問web服務(wù)器的ip地址咖祭，就默認(rèn)進(jìn)入“www”文件夾了掩宜，然后從此文件夾的目錄中就可以找到我們放進(jìn)去的那個.php文件了，找到之后一點(diǎn)擊就打開了么翰，就可以將此.php文件中php代碼的執(zhí)行結(jié)果（即所輸出的數(shù)據(jù)）渲染出來了牺汤，.php文件的名稱不能有中文，php的代碼都需要寫在“<?php”和“?>”之間浩嫌，“?>”可寫可不寫檐迟，php的大部分基礎(chǔ)語法跟JS的差不多，php中的注釋跟JS中的注釋長得一模一樣固该，功能也一模一樣锅减，php中定義變量的格式為“$變量名 = 取值;”，輸出（返回）變量的格式為“echo $變量名;”伐坏，php中也可以定義集合怔匣，即數(shù)組/字典（對象），定義數(shù)組的格式為“$arr = array (1, 3, 5);”桦沉，輸出（返回）數(shù)組的格式為“print_r ($arr);”每瞒，輸出（返回）數(shù)組中某個元素的格式為“echo $arr[1];”，定義字典（對象）的格式為“$dict = array (“name”=> “l(fā)nj”, “age”=> “33”);”纯露，輸出（返回）字典（對象）的格式為“print_r ($dict);”剿骨，輸出（返回）字典（對象）中某個元素的格式為“echo $dict[“name”];”，php中的分支循環(huán)語句跟JS中的也類似埠褪，例如“if ($age >= 18) {echo “成年人”;} else {echo “未成年人”;}”浓利，“$res = ($age >= 18) ? “成年人”: “未成年人”;”，“switch ($age) {case -1: echo “非人類”; ?break; ?case 18: echo “成年人”; ?break; ?default: echo “未成年人”; ?break;}”钞速，“$arr = array (1, 3, 5); ?for ($i = 0; $i < count ($arr); $i++) {echo $arr[$i]; ?echo “<br>”;}”贷掖，“$index = 0; ?while ($index < count ($arr) ) {echo $arr[$index]; ?echo “<br>”; ?$index++;}”，php中有超全局變量$_GET渴语、$_POST苹威、和$_FILES，前兩個分別用來接收web瀏覽器通過get和post請求所提交過來的數(shù)據(jù)（文件除外）驾凶，第三個是用來接收web瀏覽器所提交過來的文件（例如.jpg/.mp4文件）牙甫，一定注意文件/文件夾的名稱不能出現(xiàn)中文掷酗，否則會亂碼/報錯，因?yàn)閣eb服務(wù)器不支持中文窟哺，然后web服務(wù)器會默認(rèn)將所接收到的文件保存到安裝目錄的tmp文件夾（臨時文件夾）泻轰，當(dāng)保存了一會之后仍然未使用時，就會自動刪除且轨，以節(jié)約web服務(wù)器的存儲空間糕殉，超全局變量中所保存的數(shù)據(jù)都是字典（對象），$_FILES字典訪問它的upFile屬性可以返回上傳文件所對應(yīng)的字典殖告，upFile字典訪問它的name屬性可以返回上傳文件的名稱字符串阿蝶，upFile字典訪問它的tmp_name屬性可以返回上傳文件被保存的臨時路徑字符串，調(diào)用move_uploaded_file函數(shù)可以將參數(shù)1所上傳的文件名稱字符串移動到參數(shù)2新路徑字符串黄绩，例如“move_uploaded_file ($filePath, “./source/”.$fileName);(//在php中用“.”來拼接字符串)”羡洁，調(diào)用sleep函數(shù)可以停留傳入的秒數(shù)值再執(zhí)行后面的代碼，例如“sleep (5);”爽丹，調(diào)用file_get_contents函數(shù)可以返回傳入的文件URL字符串中此文件中的數(shù)據(jù)字符串筑煮，例如“file_get_contents (“info.xml”);(//當(dāng)所返回的數(shù)據(jù)中有中文時，可能會出現(xiàn)亂碼問題粤蝎，只需要在php文件頂部添加上一句“header (“content-type:text/html; charset=utf-8”);(//html也可以換成xml)”即可真仲，當(dāng)所返回的是JSON時，就不用添加了)”初澎，調(diào)用json_encode函數(shù)可以返回傳入字典被轉(zhuǎn)成的JSON秸应，當(dāng)此函數(shù)執(zhí)行失敗時，返回值是false碑宴，使用web瀏覽器訪問html網(wǎng)頁的過程是首先根據(jù)在web瀏覽器地址欄所輸入的URL向web服務(wù)器發(fā)送請求報文软啼，web服務(wù)器（例如Apache）接收到之后會先對請求報文進(jìn)行處理，然后再將html文件通過響應(yīng)報文返回給web瀏覽器延柠，最后web瀏覽器再將所返回的html文件渲染出來即可祸挪，向web服務(wù)器發(fā)送請求與提交數(shù)據(jù)（即與web服務(wù)器交互）的過程也是首先根據(jù)web瀏覽器地址欄的URL/請求頭中所保存的內(nèi)容，向web服務(wù)器發(fā)送請求報文贞间，web服務(wù)器（例如Apache）接收到之后會先對請求報文進(jìn)行處理贿条，然后再在此web服務(wù)器上執(zhí)行經(jīng)過解釋器所解釋后的服務(wù)端代碼（例如php代碼），然后再將此代碼的執(zhí)行結(jié)果（即所輸出的數(shù)據(jù)）通過響應(yīng)報文返回給web瀏覽器增热，最后web瀏覽器再將所輸出的數(shù)據(jù)渲染出來即可整以，默認(rèn)情況下web服務(wù)器對需要上傳的文件是有限制的，當(dāng)想要修改此限制時钓葫，可以修改“php.ini”文件悄蕾，路徑是WAMPServer安裝目錄->bin->apache->apache2.4.23->bin->php.ini票顾，找到之后最好用編輯器打開础浮，不要用記事本帆调，容易產(chǎn)生編碼問題，可以搜索以下幾項(xiàng)做一下更改豆同，file_uploads = On番刊，是否允許web瀏覽器上傳文件，取值是On/Off影锈，默認(rèn)值是On芹务，upload_max_filesize = 2M，web瀏覽器上傳文件的最大限制鸭廷，可以改成2048M枣抱，post_max_size = 8M，允許web瀏覽器通過post請求所提交的最大數(shù)據(jù)辆床，可以改成2048M佳晶，max_execution_time = 120，web服務(wù)器上腳本最長的執(zhí)行時間讼载，單位為秒轿秧，可以改成3000，max_input_time = 60咨堤，web服務(wù)器接收所提交數(shù)據(jù)的時間限制菇篡，單位為秒，可以改成3000一喘，memory_limit = 128M驱还，允許web服務(wù)器最大的內(nèi)存消耗，可以改成2048M凸克，全都修改完之后保存一下铝侵，然后重啟一下WAMPServer，只需要單擊系統(tǒng)托盤區(qū)的此軟件圖標(biāo)触徐，然后單擊“Restart All Services”就可以了咪鲜，AJAX（Asynchronous JavaScript and XML）即異步的JS和XML，并不是一門新的編程語言撞鹉，而是在不重新加載整個html頁面的情況下與web服務(wù)器交換數(shù)據(jù)并更新部分html頁面的技術(shù)疟丙，使用AJAX總共分為五步，第一步new一個AJAX異步對象（XMLHttpRequest對象/ActiveXObject對象）鸟雏，XMLHttpRequest對象兼容除了IE5和IE6之外的所有瀏覽器享郊，IE5和IE6使用ActiveXObject對象，例如“var xmlhttp; ?if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest ();} else {xmlhttp = new ActiveXObject (“Microsoft.XMLHTTP”);}”孝鹊，第二步設(shè)置向web服務(wù)器提交數(shù)據(jù)的請求方式和URL炊琉，例如“xmlhttp.open (“get”, “04-ajax-get.php?userName=zs&userPwd=321”, true);(//參數(shù)1傳入請求的類型字符串，大小寫均可，參數(shù)2傳入請求的url字符串苔咪，即文件在web服務(wù)器的路徑字符串锰悼，參數(shù)3傳入true/false，表示異步/同步团赏，由于AJAX存在的意義就是發(fā)送異步請求箕般，所以參數(shù)3永遠(yuǎn)傳true)”，當(dāng)需要發(fā)送的是post請求時舔清，需要再寫一句“xmlhttp.setRequestHeader (“Content-type”, “application/x-www-form-urlencoded”);(//設(shè)置請求頭)”丝里，第三步是發(fā)送請求，例如“xmlhttp.send ();(//get請求体谒，不用傳參杯聚，因?yàn)樵诘诙綍r會將需要提交的數(shù)據(jù)附加到URL后面的“?”后面)”，“xmlhttp.send (“userName=zs&userPwd=321”);(//post請求)”抒痒，異步對象調(diào)用它的abort方法可以中斷請求械媒，例如“xmlhttp.abort ();”，第四步是監(jiān)聽異步對象請求狀態(tài)碼的變化评汰，給異步對象所綁定的onreadystatechange事件的觸發(fā)條件是此異步對象的readyState值發(fā)生了改變纷捞，異步對象訪問它的readyState屬性可以返回此異步對象的請求狀態(tài)碼（數(shù)值），0代表請求未初始化被去，1代表跟web服務(wù)器的連接已建立主儡，2代表web服務(wù)器已接收到請求，3代表web服務(wù)器正在處理請求惨缆，4代表web服務(wù)器已將請求處理完畢糜值，且響應(yīng)已就緒，異步對象訪問它的status屬性可以返回web服務(wù)器的響應(yīng)狀態(tài)碼（數(shù)值）坯墨，只要此響應(yīng)狀態(tài)碼是大于等于200且小于300或者是304（304代表返回本地的緩存數(shù)據(jù)）就代表響應(yīng)成功寂汇，除此之外的響應(yīng)狀態(tài)碼就代表響應(yīng)失敗，當(dāng)所請求的url不存在時捣染，就會響應(yīng)失敗骄瓣，例如“xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState === 4) {if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {console.log (“獲取到web服務(wù)器所輸出的數(shù)據(jù)”);} else {console.log (“沒有獲取到web服務(wù)器所輸出的數(shù)據(jù)”);} } }”，第五步是處理web服務(wù)器所輸出的數(shù)據(jù)耍攘，就是執(zhí)行觸發(fā)onreadystatechange事件之后的回調(diào)函數(shù)榕栏，異步對象訪問它的responseText屬性可以返回web服務(wù)器所輸出的數(shù)據(jù)字符串（非XML時使用），所返回的數(shù)據(jù)會隨著web服務(wù)器所輸出數(shù)據(jù)的變化而變化蕾各，但在IE瀏覽器中扒磁，由于IE瀏覽器會緩存通過get請求從web服務(wù)器所獲取到的內(nèi)容，所以在通過AJAX發(fā)送get請求時式曲，當(dāng)所請求的URL沒有發(fā)生變化時妨托，IE瀏覽器就不會再次向web服務(wù)器發(fā)送get請求，而是直接從IE瀏覽器的緩存中返回上次通過該URL從web服務(wù)器所獲取到的數(shù)據(jù)，這樣一來兰伤，無論怎么修改web服務(wù)器所輸出的數(shù)據(jù)内颗，IE瀏覽器都會將首次所獲取到的結(jié)果直接返回，不會返回web服務(wù)器所輸出的最新數(shù)據(jù)医清，從而導(dǎo)致數(shù)據(jù)的不同步，當(dāng)想要返回web服務(wù)器所輸出的實(shí)時變化的數(shù)據(jù)時卖氨，必須保證每一次發(fā)送get請求時URL都有變化会烙，我們可以在URL后面附加上比如“?t=一個隨機(jī)數(shù)（隨機(jī)因子）”，這樣一來筒捺，web服務(wù)器不會做任何處理柏腻，并且可以返回web服務(wù)器所輸出的最新數(shù)據(jù)，隨機(jī)數(shù)可以使用“Math.random ();”/“new Date ().getTime ();”系吭，例如“xmlhttp.open (“GET”, “05-ajax-get.txt?t=”+ (new Date ().getTime () ), true);”五嫂，異步對象訪問它的responseXML屬性可以返回web服務(wù)器所輸出的XML文檔對象（即document對象，所返回的此document對象可以訪問/調(diào)用JS中相應(yīng)的屬性/方法來返回相應(yīng)的數(shù)據(jù)）肯尺，例如“xmlhttp.responseXML.querySelector (“age”).innerHTML;”沃缘，XML（Extensible Markup Language）是可擴(kuò)展標(biāo)記語言，XML文件是有固定格式的则吟，第一行必須寫上“<?xml version=“1.0”encoding=“UTF-8”?>”槐臀，version值是XML的版本號，encoding值是XML的字符集氓仲，一般情況下字符集都是UTF-8水慨，第一行寫完之后，還必須有一對根標(biāo)簽敬扛，只不過XML的根標(biāo)簽可以隨意命名晰洒，例如“<abc></abc>”，所有數(shù)據(jù)都必須嵌套在這對根標(biāo)簽中才有效啥箭，而這對根標(biāo)簽中的每一條數(shù)據(jù)也都是需要嵌套在一對隨意命名的雙標(biāo)簽中的谍珊，jQuery類對象調(diào)用它的ajax方法可以通過HTTP請求來獲取web服務(wù)器所輸出的數(shù)據(jù)，格式為“$.ajax ({配置對象});”急侥，在配置對象中可以添加url屬性抬驴，取值是需要發(fā)送請求的URL字符串，可以添加timeout屬性缆巧，取值是毫秒值布持，當(dāng)請求時長超過此毫秒值時，就中斷請求陕悬，可以添加type屬性题暖，取值是“get”（默認(rèn)值）/“post”，可以添加data屬性，取值是一個對象/字符串（例如“userName=lnj&userPwd=123456”）胧卤，當(dāng)取值是一個對象時唯绍，會自動轉(zhuǎn)成字符串，當(dāng)取值是一個對象并且value是一個數(shù)組時枝誊，例如“{foo: [“bar1”, “bar2”]}”况芒，會轉(zhuǎn)成“&foo=bar1&foo=bar2”，當(dāng)需要發(fā)送的是get請求時叶撒，會自動將此data值附加在此url值之后绝骚，可以添加dataType屬性，取值是“xml”/“html”/“script”/“json”/“jsonp”/“text”祠够，可以添加jsonp屬性压汪，取值是在一個jsonp請求中，用來取代URL后面所附加的“callback=隨機(jī)函數(shù)名”中的callback部分的自定義名稱字符串古瓤，可以添加jsonpCallback屬性止剖，取值是在一個jsonp請求中，用來取代URL后面所附加的“callback=隨機(jī)函數(shù)名”中的隨機(jī)函數(shù)名部分的自定義名稱字符串落君，可以添加complete方法穿香，取值是在請求完成后無論響應(yīng)成功/失敗都會執(zhí)行的回調(diào)函數(shù)“function (XMLHttpRequest, textStatus) {}”，形參textStatus接收到的是描述成功請求類型的字符串绎速，可以添加success方法扔水，取值是在請求完成并響應(yīng)成功后所執(zhí)行的回調(diào)函數(shù)“function (data, textStatus) {}”，形參data接收到的是web服務(wù)器所輸出的根據(jù)配置對象中的dataType值進(jìn)行處理后的數(shù)據(jù)朝氓，可以添加error方法魔市，取值是在請求完成但響應(yīng)失敗后所執(zhí)行的回調(diào)函數(shù)“function (XMLHttpRequest) {}”，會話跟蹤技術(shù)分為web瀏覽器的和web服務(wù)器的赵哲，web瀏覽器的是cookie待德，web服務(wù)器的是session，由于web前端屬于web瀏覽器端枫夺，所以我們只需要了解cookie就可以了将宪，cookie是此html網(wǎng)頁保存到此web瀏覽器中的數(shù)據(jù)（key-value格式的文本信息），web瀏覽器默認(rèn)不會保存任何的cookie橡庞，也不能一次性保存多條cookie较坛，當(dāng)想要保存多條cookie時，只能一條一條的設(shè)置扒最，cookie有大小和條數(shù)的限制丑勤，根據(jù)web瀏覽器的不同，條數(shù)通常限制在20條到50條左右吧趣，為了兼容所有web瀏覽器色迂，一般情況下我們不會設(shè)置超過20條，總大小限制在4KB左右勾哩，并且每次都會攜帶在HTTP頭中發(fā)送到web服務(wù)器，所以當(dāng)使用cookie保存過多的數(shù)據(jù)時薛躬，就會帶來性能問題，cookie經(jīng)常用于存儲用戶的登錄狀態(tài)呆细，由于會把用戶的登錄狀態(tài)發(fā)送到web服務(wù)器型宝，所以在本地驗(yàn)證完，在web服務(wù)器可以進(jìn)一步的驗(yàn)證絮爷，這樣就達(dá)到了雙重驗(yàn)證的效果趴酣，谷歌瀏覽器不支持JS在本地操作cookie（火狐支持），只有在web服務(wù)器的環(huán)境下才可以操作cookie略水，document對象訪問它的cookie屬性可以返回/設(shè)置此web瀏覽器中所保存的cookie价卤，例如“document.cookie = “age=33;”;”劝萤，設(shè)置完之后渊涝，我們可以通過F12（開發(fā)者工具）->Application->Cookies，點(diǎn)擊展開床嫌，然后再點(diǎn)擊此網(wǎng)址來查看跨释，web瀏覽器中所保存cookie的生命周期默認(rèn)情況下就是一次會話，關(guān)閉此web瀏覽器（注意是此web瀏覽器厌处，不是此標(biāo)簽頁）即被清除鳖谈，還可以通過拼接“expires=過期時間”字符串來手動設(shè)置過期時間，例如“var date = new Date (); ?date.setDate (date.getDate () + 1); ?document.cookie = “age=33;expires=”+ date.toGMTString () + “;”;”阔涉，當(dāng)沒有到達(dá)所設(shè)置的過期時間時缆娃，即使關(guān)閉了此web瀏覽器，再打開此web瀏覽器此cookie還是存在瑰排，當(dāng)?shù)竭_(dá)了所設(shè)置的過期時間時贯要，即使沒有關(guān)閉此web瀏覽器，此cookie也會被立即清除椭住，某一個html文件給此web瀏覽器所設(shè)置的cookie可以被在此二級域名文件夾下跟此html文件同級/其下級目錄的其它html文件所訪問崇渗，當(dāng)也想被在此二級域名文件夾下其上級目錄的其它html文件所訪問時，就需要在設(shè)置cookie的時候在結(jié)尾處添加一個path屬性京郑，取值是此二級域名文件夾的根目錄宅广，例如“document.cookie = “name=zs;path=/;”;”，由于在一個網(wǎng)站文件夾中包括若干個二級域名文件夾些举，例如“www.it666.com”和“edu.it666.com”就是在同一個網(wǎng)站文件夾中的兩個不同的二級域名文件夾跟狱，所以，當(dāng)想要讓某一個二級域名文件夾內(nèi)的html文件給此web瀏覽器所設(shè)置的cookie能夠被其它二級域名文件夾內(nèi)的html文件所訪問時户魏，就需要在結(jié)尾處再添加一個domain屬性兽肤，取值是此網(wǎng)站文件夾的根目錄（即根域名）套腹，以后當(dāng)我們想要保存一個cookie時，使用這種形式即可资铡，例如“document.cookie = “name=zs;path=/;domain=it666.com;”;”电禀，document對象訪問它的domain屬性可以返回此html網(wǎng)頁的web服務(wù)器域名（主機(jī)名）字符串，當(dāng)想要封裝一個基于jQuery.js的插件時笤休，則插件名稱的固定格式為“jQuery.插件的作用.js”尖飞，例如“jQuery.cookie.js”，插件里邊固定的寫法為“;() ();”店雅，在兩個小括號中寫一個立即執(zhí)行的匿名函數(shù)（即閉包）政基，并傳入jQuery和window，例如“;(function ($, window) {}) (jQuery, window);”闹啦，H5新增的存儲方案是sessionStorage和localStorage沮明，跟cookie一樣，sessionStorage和localStorage也是此html網(wǎng)頁保存到此web瀏覽器中的數(shù)據(jù)（key-value格式的文本信息）窍奋，但它倆僅僅是保存到了此web瀏覽器中荐健，不參與跟web服務(wù)器的通信，而且它倆的大小均限制在5M左右琳袄，詳情可參考網(wǎng)址“dev-test.nemikor.com/web-storage/support-test/”江场，sessionStorage的生命周期是僅在此標(biāo)簽頁下有效，關(guān)閉此標(biāo)簽頁/web瀏覽器后就會被清除窖逗，而且不能設(shè)置過期時間址否，經(jīng)常用于存儲表單數(shù)據(jù)，因?yàn)楫?dāng)用戶注冊某個東西的時候碎紊，就會填表單佑附，填表單時有可能填完了第一頁還有第二頁，數(shù)據(jù)就會比較大仗考，所以就需要大容量音同，并且在沒有關(guān)閉此標(biāo)簽頁的情況下，當(dāng)返回上一頁時痴鳄，上一頁的數(shù)據(jù)會仍然存在瘟斜，當(dāng)關(guān)掉了此標(biāo)簽頁時，表單中的數(shù)據(jù)就清空了痪寻，localStorage除非被清除螺句，否則會永久保存，經(jīng)常用于存儲購物車的一些數(shù)據(jù)橡类，因?yàn)楫?dāng)用戶在web瀏覽器上向購物車?yán)锾砑恿撕芏嗌唐窌r蛇尚，在沒有買單的情況下，當(dāng)關(guān)閉了此web瀏覽器時顾画，下一次用戶再通過此web瀏覽器打開購物車頁面取劫，他上一次向購物車中所添加的商品仍然會存在匆笤，容量大并且永久存儲，通過cookie屬性谱邪、sessionStorage對象炮捧、和localStorage對象三種方式，切記都不能將敏感數(shù)據(jù)直接存儲到web瀏覽器惦银，否則別人就有可能通過此web瀏覽器的F12->Application咆课，然后點(diǎn)擊cookie/sessionStorage/localStorage來修改我們的數(shù)據(jù)，sessionStorage/localStorage對象調(diào)用它的setItem方法可以給此web瀏覽器新增/修改一條sessionStorage/localStorage扯俱，例如“sessionStorage.setItem (“name”, “l(fā)nj”);(//以JSON的形式)”书蚪，sessionStorage/localStorage對象調(diào)用它的getItem方法可以返回此web瀏覽器sessionStorage/localStorage中傳入key所對應(yīng)的value，例如“sessionStorage.getItem (“name”);”迅栅，sessionStorage/localStorage對象調(diào)用它的removeItem方法可以刪除此web瀏覽器sessionStorage/localStorage中傳入key所指代的鍵值對殊校，例如“sessionStorage.removeItem (“name”);”，sessionStorage/localStorage對象調(diào)用它的clear方法可以清空此web瀏覽器sessionStorage/localStorage中保存的所有數(shù)據(jù)读存，例如“sessionStorage.clear ();”为流，同源策略（Same origin policy）是一種約定，它是web瀏覽器最核心最基本的安全功能宪萄，超文本傳輸協(xié)議艺谆、一級域名榨惰、二級域名拜英、和端口號都相同的URL就叫做同源的URL，否則就叫做跨域的URL琅催，例如在URL“http://www.it666.com:80/index.html”中居凶，“http://”就叫做超文本傳輸協(xié)議，“it666.com”就叫做一級域名藤抡，“www.”就叫做二級域名侠碧，“:80”就叫做端口號，“/index.html”就叫做資源路徑缠黍，為了提升html網(wǎng)頁的性能弄兜，html網(wǎng)頁和數(shù)據(jù)一般都是單獨(dú)存儲在不同的web服務(wù)器上，但web瀏覽器只允許AJAX請求同源URL的數(shù)據(jù)瓷式，不允許請求跨域URL的數(shù)據(jù)替饿，跨域請求的解決方案是“JSONP（JSON with Padding，即填充式JSON）”贸典、“document.domain+iframe”视卢、“l(fā)ocation.hash+iframe”、“window.name+iframe”廊驼、“window.postMessage”据过、和“flash等第三方插件”惋砂，但只有“JSONP”是目前常用的，由于通過<script>的src屬性既可以引入本地的數(shù)據(jù)绳锅，還可以引入網(wǎng)絡(luò)的數(shù)據(jù)西饵，沒有同源與否的限制，所以我們可以通過<script>的src屬性來請求跨域的數(shù)據(jù)鳞芙，讓html網(wǎng)頁從跨域的URL來獲取數(shù)據(jù)的過程就叫做JSONP罗标，通過JSONP從web服務(wù)器所獲取到的一般都不會是一個“變量”字符串，而是一句帶有參數(shù)的“函數(shù)的調(diào)用”字符串积蜻，這樣一來闯割，通過所獲取到的數(shù)據(jù)就可以調(diào)用我們在本地所定義的函數(shù)，而傳入的參數(shù)就是我們所需要的數(shù)據(jù)竿拆，但是問題是宙拉，我們在本地所定義的函數(shù)名稱卻有可能是變化的、不確定的丙笋，解決方案是在URL后面添加點(diǎn)參數(shù)谢澈，來動態(tài)的告訴web服務(wù)器我們在本地所定義的函數(shù)名稱是什么，例如“<script src=“http://127.0.0.1:80/jQuery/Ajax/20-jsonp.php?cb=test”></script>”御板，然后后端代碼可以“$cb = $_GET[“cb”]; ?echo $cb.“(666);”;(//在php中用“.”來拼接字符串)”锥忿，由于默認(rèn)情況下多個<script>的執(zhí)行是同步的，即只有前面的<script>執(zhí)行完畢怠肋，后面的<script>才會執(zhí)行敬鬓，所以為了安全起見，請求跨域數(shù)據(jù)的<script>必須寫到后面笙各，但是當(dāng)我們使用JS來動態(tài)的createElement script元素時钉答，就不存在這個問題了，因?yàn)槭褂肑S所動態(tài)createElement的script元素默認(rèn)就是異步的杈抢，會在最后執(zhí)行数尿，例如“l(fā)et oScript = document.createElement (“script”); ?oScript.src = “http://127.0.0.1:80/jQuery/Ajax/20-jsonp.php?cb=test”; ?document.body.appendChild (oScript); ?function test (data) {console.log (data);}”，存儲在硬盤（rom）中的一些永久性的數(shù)據(jù)就叫做靜態(tài)數(shù)據(jù)惶楼，當(dāng)計算機(jī)關(guān)閉之后再開啟右蹦，靜態(tài)數(shù)據(jù)依舊還在，只要你不主動刪掉或者硬盤沒壞歼捐，靜態(tài)數(shù)據(jù)永遠(yuǎn)都在何陆，在程序運(yùn)行過程中，動態(tài)產(chǎn)生存儲在內(nèi)存（ram）中的臨時性數(shù)據(jù)就叫做動態(tài)數(shù)據(jù)窥岩，當(dāng)計算機(jī)關(guān)閉之后甲献，這些臨時性數(shù)據(jù)就會被清除，之所以不把所有的應(yīng)用程序加載到硬盤中去執(zhí)行颂翼，主要原因就是內(nèi)存的訪問速度比硬盤快N倍晃洒，靜態(tài)數(shù)據(jù)是可以轉(zhuǎn)成動態(tài)數(shù)據(jù)的慨灭，例如硬盤上存儲的視頻加載到播放軟件上播放，動態(tài)數(shù)據(jù)也是可以轉(zhuǎn)成靜態(tài)數(shù)據(jù)的球及，例如拍照軟件拍的一張照片寫入到本地硬盤氧骤，將編譯型語言編寫好的代碼通過編譯工具編譯之后存儲在硬盤上的一個二進(jìn)制文件就叫做應(yīng)用程序，應(yīng)用程序在操作系統(tǒng)中的一次執(zhí)行過程就叫做進(jìn)程吃引，進(jìn)程是系統(tǒng)進(jìn)行資源分配和調(diào)度的基本單位筹陵，同一個應(yīng)用程序在操作系統(tǒng)中每執(zhí)行一次都會開啟一個進(jìn)程，并且所開啟的多個進(jìn)程的空間是相互獨(dú)立的镊尺，互不影響的朦佩，所以應(yīng)用程序和進(jìn)程之間是一對多的關(guān)系，進(jìn)程中的一個執(zhí)行實(shí)例就叫做線程庐氮，線程是應(yīng)用程序執(zhí)行的最小單元语稠，它是比進(jìn)程更小的能獨(dú)立運(yùn)行的基本單位，在一個進(jìn)程中有一個默認(rèn)的線程弄砍，叫做主線程仙畦，主線程的作用是執(zhí)行應(yīng)用程序中的業(yè)務(wù)邏輯代碼，除此之外音婶，開發(fā)人員在編寫應(yīng)用程序的時候還可以手動創(chuàng)建一些其它的線程慨畸，所以進(jìn)程和線程之間也是一對多的關(guān)系，例如啟動迅雷這個應(yīng)用程序衣式，系統(tǒng)會創(chuàng)建一個迅雷進(jìn)程寸士，并且此迅雷進(jìn)程會有一個默認(rèn)的主線程，用于執(zhí)行迅雷默認(rèn)的業(yè)務(wù)邏輯瞳收，當(dāng)我們利用迅雷同時執(zhí)行多個下載任務(wù)的時候碉京，迅雷就會創(chuàng)建多個線程厢汹，將不同的下載任務(wù)放到不同的線程中執(zhí)行螟深，當(dāng)一個進(jìn)程中只有一個線程并且有多個任務(wù)需要執(zhí)行時，只有前一個任務(wù)執(zhí)行完畢烫葬，后一個任務(wù)才能執(zhí)行界弧，這就叫做串行，當(dāng)一個進(jìn)程中有多個線程并且有多個任務(wù)需要執(zhí)行時搭综，就可以一個線程執(zhí)行一個任務(wù)垢箕，多個線程都可以同時執(zhí)行任務(wù)，這就叫做并行兑巾，JS是單線程的編程語言条获，之所以被設(shè)計成單線程的，是因?yàn)樗鳛閣eb瀏覽器的腳本語言蒋歌，主要的用途是與用戶的互動帅掘，以及操作DOM元素委煤，假如JS被設(shè)計成多線程的，當(dāng)有一個線程要修改DOM元素中的內(nèi)容修档，而另一個線程卻要刪除該DOM元素時碧绞，web瀏覽器就會有很復(fù)雜的同步問題，不知道該以哪個線程為準(zhǔn)吱窝，正是由于JS是單線程的編程語言讥邻，所以JS代碼都是串行的，當(dāng)前面的代碼沒有執(zhí)行完畢時院峡，后面的代碼就不能執(zhí)行兴使，并且JS代碼分為同步代碼和異步代碼，只有“滿足一定條件才可執(zhí)行的回調(diào)函數(shù)”（比如事件所綁定的回調(diào)函數(shù)）是異步代碼照激，除此以外的都是同步代碼鲫惶，在程序運(yùn)行時，會先從上至下依次執(zhí)行所有的同步代碼实抡，當(dāng)遇到異步代碼時欠母，會將異步代碼放到所有代碼最后的事件循環(huán)中，當(dāng)所有同步代碼都執(zhí)行完畢時吆寨，系統(tǒng)會不斷檢測事件循環(huán)中的異步代碼是否滿足條件赏淌，當(dāng)滿足條件時，就執(zhí)行相應(yīng)的回調(diào)函數(shù)啄清，但是當(dāng)在同一個回調(diào)函數(shù)中需要按照一定順序執(zhí)行很多回調(diào)函數(shù)時（即異步操作）六水，勢必就會出現(xiàn)回調(diào)函數(shù)的層層嵌套，當(dāng)所嵌套的層數(shù)太多時辣卒，就會導(dǎo)致代碼的閱讀性和可維護(hù)性大大降低（即回調(diào)地獄）掷贾，所以在ES6中就新增了一種異步編程的解決方案，即Promise類荣茫，new Promise所創(chuàng)建的實(shí)例對象就叫做Promise對象（ES6新增）想帅，創(chuàng)建Promise對象的格式為“new Promise (function (resolve, reject) {});”，所傳入的回調(diào)函數(shù)不是異步的啡莉，是會立即執(zhí)行的港准，形參resolve和reject接收到的是回調(diào)函數(shù)，在不調(diào)用resolve/reject回調(diào)函數(shù)時咧欣，自身的[[PromiseStatus]]/[[PromiseState]]值默認(rèn)就是“pending”（代表默認(rèn)狀態(tài)）浅缸，[[PromiseValue]]/[[PromiseResult]]值默認(rèn)就是undefined，在調(diào)用resolve回調(diào)函數(shù)時（等價于Promise.resolve (參數(shù));）魄咕，當(dāng)不傳參/所傳入的實(shí)參不是一個額外的Promise對象時衩椒，自身的[[PromiseStatus]]值是“resolved”/“fulfilled”（代表成功狀態(tài)），自身的[[PromiseValue]]值是undefined/所傳入的實(shí)參，當(dāng)所傳入的實(shí)參是一個額外的Promise對象時毛萌，自身的狀態(tài)和[[PromiseValue]]值也會繼承于所傳入的實(shí)參梢什，在調(diào)用reject回調(diào)函數(shù)時（等價于Promise.reject (參數(shù));），自身的[[PromiseStatus]]值是“rejected”（代表失敗狀態(tài)）朝聋，自身的[[PromiseValue]]值是undefined/所傳入的實(shí)參嗡午，當(dāng)一個Promise對象的狀態(tài)一旦變?yōu)槌晒?失敗時，就是永久性的冀痕，不會再發(fā)生變化了荔睹，Promise對象調(diào)用它的then方法可以監(jiān)聽調(diào)用者的成功/失敗狀態(tài)，在成功/失敗狀態(tài)下執(zhí)行參數(shù)1/2回調(diào)函數(shù)言蛇，并且調(diào)用者的[[PromiseValue]]值也會傳入?yún)?shù)1/2回調(diào)函數(shù)中僻他，在沒有傳入?yún)?shù)2回調(diào)函數(shù)，并且參數(shù)1回調(diào)函數(shù)的返回值不是一個額外的Promise對象時腊尚，當(dāng)調(diào)用者是成功狀態(tài)時吨拗，then方法的返回值是一個繼承了調(diào)用者狀態(tài)并且[[PromiseValue]]值是參數(shù)1回調(diào)函數(shù)返回值的新Promise對象，當(dāng)調(diào)用者是失敗狀態(tài)時婿斥，then方法的返回值是一個繼承了調(diào)用者狀態(tài)和[[PromiseValue]]值的新Promise對象劝篷，在傳入了參數(shù)2回調(diào)函數(shù)，并且所執(zhí)行的參數(shù)1/2回調(diào)函數(shù)的返回值不是一個額外的Promise對象時民宿，then方法的返回值是一個成功狀態(tài)并且[[PromiseValue]]值是參數(shù)1/2回調(diào)函數(shù)返回值的新Promise對象，在無論有沒有傳入?yún)?shù)2回調(diào)函數(shù)志群，只要所執(zhí)行的參數(shù)1/2回調(diào)函數(shù)的返回值是一個額外的Promise對象時，then方法的返回值是一個繼承了此額外Promise對象狀態(tài)和[[PromiseValue]]值的新Promise對象，當(dāng)調(diào)用then方法時紧显，還可以捕獲上一個調(diào)用者在調(diào)用then/catch方法時所出現(xiàn)的錯誤招驴，并將所捕獲到的錯誤傳入?yún)?shù)2回調(diào)函數(shù)中触趴，并執(zhí)行此參數(shù)2回調(diào)函數(shù)仇祭，Promise對象調(diào)用它的catch方法可以監(jiān)聽調(diào)用者的失敗狀態(tài)礁苗，在失敗狀態(tài)下執(zhí)行所傳入的回調(diào)函數(shù)，并且調(diào)用者的[[PromiseValue]]值也會傳入此回調(diào)函數(shù)中，當(dāng)傳入回調(diào)函數(shù)的返回值是一個額外的Promise對象時，catch方法的返回值是一個繼承了此額外Promise對象狀態(tài)和[[PromiseValue]]值的新Promise對象，當(dāng)傳入回調(diào)函數(shù)的返回值不是一個額外的Promise對象時袱讹，catch方法的返回值是一個成功狀態(tài)并且[[PromiseValue]]值是傳入回調(diào)函數(shù)的返回值的新Promise對象，catch方法其實(shí)是then方法的語法糖，相當(dāng)于“then (undefined, () => {})”淆衷，對于一個失敗狀態(tài)的Promise對象佳头，必須予以監(jiān)聽敷钾，否則就會報錯阻荒，而成功狀態(tài)的Promise對象則無所謂，所以，當(dāng)我們想要分別調(diào)用then和catch方法來監(jiān)聽調(diào)用者成功/失敗的狀態(tài)時粱侣，建議使用鏈?zhǔn)骄幊毯喜⒊梢痪浯a來寫嚣州，一旦分成了兩句代碼來寫秦效，當(dāng)調(diào)用者是失敗狀態(tài)時，then方法的返回值是一個繼承了調(diào)用者狀態(tài)的新Promise對象法梯，這樣一來苔货，此失敗狀態(tài)的新Promise對象就沒有得到監(jiān)聽，進(jìn)而就報錯了立哑，當(dāng)調(diào)用catch方法時夜惭，還可以捕獲上一個調(diào)用者在調(diào)用then/catch方法時所發(fā)生的錯誤，并將所捕獲到的錯誤傳入回調(diào)函數(shù)中铛绰，并執(zhí)行此回調(diào)函數(shù)诈茧，例如“l(fā)et p1 = new Promise (function (resolve, reject) {resolve ();} ); ?p1.then (function () {console.log (“成功”); ?xxx} ).catch (function (e) {console.log (“失敗”, e);} );(//控制臺會打印“失敗 ReferenceError: xxx is not defined”)”，綜上所述捂掰，可以根據(jù)Promise對象的成功/失敗狀態(tài)并調(diào)用then/catch方法來實(shí)現(xiàn)用同步流程表示異步操作敢会，以此避免回調(diào)函數(shù)層層嵌套的問題，由于JS是單線程的这嚣，所編寫的代碼都是串行的鸥昏，所以一旦前面的代碼出現(xiàn)錯誤，程序就會被中斷疤苹，后續(xù)的代碼就不會執(zhí)行了互广，當(dāng)是自身編寫代碼的問題時，就手動修復(fù)bug卧土，當(dāng)是外界的一些可預(yù)見的錯誤時惫皱，就可以使用try catch來捕獲錯誤，既可以保證程序不被中斷尤莺，增強(qiáng)程序的容錯性和健壯性旅敷，還可以記錄錯誤原因，以便于后續(xù)優(yōu)化颤霎、迭代媳谁、更新涂滴，try catch是一個整體，不能分開晴音，必須同時出現(xiàn)柔纵，格式為“try {可能遇到錯誤的代碼;} catch (e) {捕獲錯誤的代碼塊;}”，當(dāng)try中的代碼沒有出現(xiàn)錯誤時锤躁，就會正常執(zhí)行搁料，而catch中的代碼就不執(zhí)行了，當(dāng)try中的代碼出現(xiàn)了錯誤時系羞，catch中的代碼就會執(zhí)行郭计，并把錯誤的原因傳遞給catch中的形參e，Promise類對象調(diào)用它的all方法可以在傳入一個由Promise對象所組成的數(shù)組時椒振，當(dāng)所有的元素都是成功狀態(tài)時昭伸，返回值是一個成功狀態(tài)并且[[PromiseValue]]值是所有元素的[[PromiseValue]]值所組成數(shù)組的新Promise對象，當(dāng)所有的元素不都是成功狀態(tài)時澎迎，返回值是一個失敗狀態(tài)并且[[PromiseValue]]值是首個失敗狀態(tài)元素的[[PromiseValue]]值的新Promise對象庐杨，all方法的應(yīng)用場景是當(dāng)進(jìn)行批量加載時，要么一起成功嗡善，要么一起失敗辑莫，其實(shí)調(diào)用all方法時也可以傳入一個普通數(shù)組（即非Promise對象所組成的數(shù)組），此時all方法的返回值是一個成功狀態(tài)并且[[PromiseValue]]值是所傳入數(shù)組的Promise對象罩引，Promise類對象調(diào)用它的race方法可以在傳入一個由Promise對象所組成的數(shù)組時各吨，返回值是一個繼承了狀態(tài)變化最快元素狀態(tài)和[[PromiseValue]]值的新Promise對象，race方法的應(yīng)用場景是接口調(diào)試袁铐，超時處理揭蜒，全局對象調(diào)用它的fetch方法可以實(shí)現(xiàn)基于Promise的AJAX（ES6新增），可以傳入一個URL字符串和一個對象剔桨，例如“fetch (“http://127.0.0.1/jQuery/Ajax/41.php?teacher=lnj&age=34”, {method: “get”});”屉更，“fetch (“http://127.0.0.1/jQuery/Ajax/41.php”, {method: “post”, body: JSON.stringify ({teacher: “l(fā)nj”, age: 34}) });”，返回值是一個成功狀態(tài)并且[[PromiseValue]]值是Response對象的Promise對象洒缀，Response對象調(diào)用它的text方法可以返回一個成功狀態(tài)并且[[PromiseValue]]值是web服務(wù)器所輸出數(shù)據(jù)的新Promise對象瑰谜，Response對象調(diào)用它的json方法可以返回一個web服務(wù)器響應(yīng)狀態(tài)并且[[PromiseValue]]值是web服務(wù)器所輸出JSON被轉(zhuǎn)成的JS對象的新Promise對象，axios.js是一個基于Promise的HTTP類庫树绩，即網(wǎng)絡(luò)請求插件萨脑，可以在web瀏覽器和NodeJS中使用，axios.js插件跟fetch方法的功能是一樣的饺饭，但axios.js插件更完善也更安全渤早，建議使用axios.js插件就可以了，可以在GitHub上下載此插件瘫俊，解壓之后鹊杖，在里面的dist文件夾中悴灵，就會看到axios.js和axios.min.js文件，將它倆復(fù)制到我們自己的項(xiàng)目中就可以了骂蓖，可以在“www.kancloud.cn/yunye/axios/234845”網(wǎng)址查看一下它的中文文檔积瞒，axios類對象調(diào)用它的get/post方法可以返回一個web服務(wù)器響應(yīng)狀態(tài)并且[[PromiseValue]]值是Response對象的Promise對象，例如“axios.get (“http://127.0.0.1/jQuery/Ajax/41.php?teacher=lnj&age=34”);(//可以改寫為“axios.get (“http://127.0.0.1/jQuery/Ajax/41.php”, {params: {teacher: “l(fā)nj”, age: 34} });”)”涯竟，“axios.post (“http://127.0.0.1/jQuery/Ajax/41.php”, {teacher: “l(fā)nj”, age: 34});”赡鲜，Response對象訪問它的data屬性可以返回web服務(wù)器所輸出的數(shù)據(jù)即result對象（當(dāng)數(shù)據(jù)是JSON時會自動轉(zhuǎn)成JS對象）空厌，axios類對象調(diào)用它的all方法可以同時執(zhí)行多個“axios.get ();”/“axios.post ();”（即同時執(zhí)行多個并發(fā)請求）庐船，格式為“axios.all ([axios.get (‘/user/12345’), axios.get (‘/user/12345/permissions’)] ).then (axios.spread (function (result1, result2) {console.log (result1, result2);} ) );(//result1和result2接收到的分別是第一個和第二個get請求所獲取到的Response對象)”，在企業(yè)開發(fā)中嘲更，項(xiàng)目分為開發(fā)和部署兩個階段筐钟，在這兩個階段中，項(xiàng)目所存儲的位置是不同的赋朦，項(xiàng)目上線前存儲在企業(yè)內(nèi)部的測試服務(wù)器上篓冲，項(xiàng)目上線后存儲在企業(yè)的正式服務(wù)器上（例如上線前URL是“http://127.0.0.1/jQuery/Ajax/41.php”，上線后URL是“http://192.199.13.14/jQuery/Ajax/41.php”）宠哄，當(dāng)每次向web服務(wù)器發(fā)送請求時壹将，假如都將所請求的完整URL寫在請求中，那么當(dāng)項(xiàng)目上線時毛嫉，就需要大量修改所請求的URL诽俯，所以為了解決這個問題，我們可以設(shè)置一個全局的URL根地址承粤，等到項(xiàng)目上線時只需要修改根地址即可暴区，例如“axios.defaults.timeout = 2000;(//設(shè)置請求的超時時間，當(dāng)兩秒鐘之內(nèi)服務(wù)器沒有返回數(shù)據(jù)時辛臊，就會報錯) ?axios.defaults.baseURL = “http://127.0.0.1”;(//設(shè)置全局的URL根地址) ?axios.post (“/jQuery/Ajax/41.php”, {teacher: “l(fā)nj”, age: 34}).then (function (res) {console.log (res.data);} ).catch (function (e) {console.log (e);} );”仙粱，Symbol()是ES6中新增的基本數(shù)據(jù)類型，由于Symbol不是函數(shù)彻舰，所以前面不能加new伐割，Symbol()就代表一個獨(dú)一無二的值，數(shù)據(jù)類型是symbol刃唤，由于Symbol()和Symbol()分別是兩個獨(dú)一無二的值隔心，所以Symbol()和Symbol()不全等，symbol類型的數(shù)據(jù)可以轉(zhuǎn)成字符串和布爾類型的數(shù)據(jù)透揣，但不能轉(zhuǎn)成數(shù)值類型的數(shù)據(jù)济炎，symbol類型的數(shù)據(jù)也不能做任何運(yùn)算，當(dāng)給第三方的插件/框架動態(tài)的添加了重名的屬性/方法時辐真，勢必就會將此插件/框架中原有的屬性/方法覆蓋掉须尚，所以為了避免這種情況的發(fā)生崖堤，插件/框架的作者/使用者就可以使用Symbol()來動態(tài)的添加屬性/方法，也可以同時在Symbol()的小括號中添加一個字符串來設(shè)置一個標(biāo)記耐床，這個標(biāo)記僅僅是為了便于區(qū)分密幔，沒有任何其它含義，當(dāng)想要在一個對象的內(nèi)部手動添加symbol類型的屬性/方法時撩轰，必須首先在此對象的外部將Symbol()保存到一個變量中胯甩，然后在此對象的內(nèi)部再給此變量加一個中括號來充當(dāng)屬性/方法的名稱，并且當(dāng)想要訪問/調(diào)用它們時堪嫂，不能使用“.”的方式偎箫，只能使用中括號包裹相應(yīng)變量的方式，例如“l(fā)et name = Symbol(“name”); ?let say = Symbol(“say”); ?let obj = {[name]: “l(fā)nj”, [say]: function () {console.log (“say”);} }; ?console.log (obj[name]);(//“l(fā)nj”) ?obj[Symbol(“name”)] = “it666”;(//不會將原有的覆蓋掉)”皆串，使用for in循環(huán)是無法遍歷一個對象symbol類型的屬性/方法的淹办，Object類對象調(diào)用它的getOwnPropertySymbols方法可以返回傳入對象中symbol類型屬性/方法名稱所組成的數(shù)組，標(biāo)準(zhǔn)和規(guī)范就叫做接口恶复，這里的接口和現(xiàn)實(shí)中的接口是一樣的怜森，例如USB接口就有它的標(biāo)準(zhǔn)和規(guī)范，所以A廠商生產(chǎn)的USB線可以插到B廠商電腦的USB接口上谤牡，Iterator叫做迭代器副硅，即迭代程序，也是一種接口（即標(biāo)準(zhǔn)和規(guī)范）翅萤，Iterator接口規(guī)定了不同數(shù)據(jù)類型的統(tǒng)一訪問機(jī)制恐疲，此統(tǒng)一訪問機(jī)制主要是指能被for of循環(huán)所遍歷，默認(rèn)情況下断序，Array流纹、Map、Set违诗、String漱凝、和TypedArray類的實(shí)例對象，以及函數(shù)的arguments對象和NodeList對象（DOM節(jié)點(diǎn)的集合）都實(shí)現(xiàn)了Iterator接口诸迟，也就是都能被for of循環(huán)所遍歷茸炒，當(dāng)一個數(shù)據(jù)（對象）能被for of循環(huán)所遍歷時，此數(shù)據(jù)（對象）就一定有一個叫做[Symbol.iterator]的方法阵苇，此數(shù)據(jù)（對象）調(diào)用它的[Symbol.iterator]方法可以返回一個可迭代對象壁公，例如“l(fā)et arr = [1, 3, 5]; ?let it = arr[Symbol.iterator] ();(//變量it的值是一個可迭代對象)”，此可迭代對象調(diào)用它的next方法可以每次調(diào)用都返回一個擁有兩個屬性的對象绅项，例如“{value: 1, done: false}”紊册，value值是當(dāng)前所遍歷到的元素，done值是true/false快耿，true代表遍歷完畢囊陡，false代表還沒有遍歷完畢芳绩，所以，for of循環(huán)的內(nèi)部實(shí)現(xiàn)原理就是不斷地調(diào)用next方法撞反，并把value值賦值給變量value妥色，并判斷是否遍歷完畢，當(dāng)遍歷完畢時遏片，就不再調(diào)用next方法了嘹害，只有實(shí)現(xiàn)了Iterator接口的數(shù)據(jù)（對象），才能夠?qū)ζ溥M(jìn)行解構(gòu)賦值和使用擴(kuò)展運(yùn)算符吮便，Generator函數(shù)是ES6提供的一種異步編程解決方案笔呀，只需要在普通函數(shù)的function函數(shù)聲明符后面加上*即可，在Generator函數(shù)作用域內(nèi)可以使用yield操作符（只能在Generator函數(shù)中使用）封裝多個狀態(tài)线衫，并且可以將代碼塊劃分成多個部分凿可，因此Generator函數(shù)又可以理解為是一個狀態(tài)機(jī)，例如“function* gen () {console.log (“123”); ?yield “aaa”; ?console.log (“567”); ?yield 1 + 1;}”授账，調(diào)用Generator函數(shù)后，此函數(shù)中所封裝的代碼不會立即執(zhí)行恼除，無論此函數(shù)有沒有返回值砸狞，都會返回一個可迭代對象佑稠，此可迭代對象調(diào)用它的next方法可以每次調(diào)用都會執(zhí)行此Generator函數(shù)作用域內(nèi)yield操作符所劃分的一部分代碼，返回值是一個擁有兩個屬性的對象屋确，value值是yield操作符所作用的值，done值是true/false（true代表已經(jīng)結(jié)束了续扔，不能再迭代了攻臀，false代表還未結(jié)束，還可以再迭代）纱昧，在調(diào)用next方法的時候可以傳入一個實(shí)參刨啸，此實(shí)參會作為上一個yield操作符的返回值，Generator函數(shù)的應(yīng)用場景是可以讓函數(shù)返回多個值识脆，例如“function* calculate (a, b) {yield a + b; ?yield a - b;} ?let it = calculate (10, 5); ?console.log (it.next ().value); ?console.log (it.next ().value);”设联，可以在任意對象上快速部署Iterator接口，例如“l(fā)et obj = {name: “l(fā)nj”, age: 34, gender: “man”}; ?function* gen () {let keys = Object.keys (obj); ?for (let i = 0; i < keys.length; i++) {yield obj[keys[i] ];} } ?obj[Symbol.iterator] = gen; ?let it = obj[Symbol.iterator] (); ?console.log (it.next () );”灼捂，可以實(shí)現(xiàn)用同步流程來表示異步操作离例，例如“function request () {return new Promise (function (resolve, reject) {setTimeout (function () {resolve (“獲取到的數(shù)據(jù)”);}, 1000);} );} ?function* gen () {yield request (); ?yield request (); ?yield request ();} ?let it = gen (); ?it.next ().value.then (function (data) {console.log (data, 1); ?return it.next ().value;}).then (function (data) {console.log (data, 2); ?return it.next ().value;}).then (function (data) {console.log (data, 3);} );”，async函數(shù)聲明符是ES8中新增的一個聲明符悉稠，用于定義一個異步函數(shù)（即解決異步問題的函數(shù)宫蛆，可以使代碼按順序同步執(zhí)行），跟普通函數(shù)的用法一樣的猛，當(dāng)調(diào)用async函數(shù)時耀盗，其作用域中的代碼會自動從上至下的執(zhí)行辑甜，使用await操作符（只能在async函數(shù)中使用）可以暫停當(dāng)前async函數(shù)的執(zhí)行，當(dāng)其所作用的Promise對象（即操作數(shù)）變?yōu)槌晒顟B(tài)時袍冷，它的[[PromiseValue]]值會作為此await操作符的返回值磷醋，然后繼續(xù)執(zhí)行此async函數(shù)，當(dāng)其所作用的Promise對象（即操作數(shù)）變?yōu)槭顟B(tài)時胡诗，此web瀏覽器的控制臺會throw一個錯誤和它的[[PromiseValue]]值邓线，就不再繼續(xù)執(zhí)行此async函數(shù)了，當(dāng)其所作用的操作數(shù)不是一個Promise對象煌恢，而僅僅是一個常量時（比如123）骇陈，系統(tǒng)會把這個常量包裝成Promise.resolve (xx)，同理瑰抵，當(dāng)其沒有操作數(shù)時你雌，系統(tǒng)會把它的操作數(shù)包裝成Promise.resolve (undefined)，一個async函數(shù)無論最后return啥二汛，當(dāng)調(diào)用它的時候婿崭，返回的都是一個繼承了此await操作符的操作數(shù)狀態(tài)的Promise對象（不存在await操作符就返回成功狀態(tài)的Promise對象），其[[PromiseValue]]值是此async函數(shù)return的值肴颊，在一個調(diào)用了async函數(shù)的函數(shù)作用域中氓栈，當(dāng)想要讓代碼按順序同步執(zhí)行時，必須將此函數(shù)也變成async函數(shù)婿着，并且在調(diào)用了async函數(shù)的位置await一下才好使（即雙async await）授瘦，例如“async function gen () {let res1 = await request (); ?console.log (res1, 1); ?let res2 = await request (); ?console.log (res2, 2); ?let res3 = await request (); ?console.log (res3, 3);} ?gen ();(//上面的Generator函數(shù)用同步流程來表示異步操作是這種寫法的內(nèi)部實(shí)現(xiàn)原理，這種寫法可以看作是它的縮寫)”

九竟宋、zepto.js類庫

zepto.js是一個輕量級的針對現(xiàn)代高級瀏覽器的JS類庫提完，是專門用于移動端的輕量級的jQuery.js，它與jQuery.js有著類似的api丘侠，當(dāng)你會使用jQuery.js時徒欣，你就會使用zepto.js，由于jQuery.js更多的是用在PC端婉陷，所以jQuery.js考慮了很多低級瀏覽器的兼容性問題帚称，代碼更多，體積更大秽澳，并且做動畫的內(nèi)部實(shí)現(xiàn)原理是利用JS操作DOM元素闯睹，由于zepto.js更多的是用在移動端，所以zepto.js則是直接拋棄了低級瀏覽器的適配問題担神，代碼更少楼吃，體積更小，并且做動畫的內(nèi)部實(shí)現(xiàn)原理是利用CSS3中相關(guān)的屬性，zepto.js英文官方文檔的網(wǎng)址是“zeptojs.com”孩锡，中文官方文檔的網(wǎng)址是“www.css88.com/doc/zeptojs_api”酷宵，zepto.js采用了模塊化的開發(fā)，將不同的功能放到了不同的模塊（js文件）中躬窜，在使用的過程中可以按需引入浇垦，也就是需要什么功能就引入什么模塊，從官方網(wǎng)站下載的zepto.js已經(jīng)包含了一些默認(rèn)的模塊荣挨，從GitHub下載的zepto.js需要我們自己手動引入每一個模塊男韧，后續(xù)學(xué)習(xí)了NodeJS后，我們也可以自己定制默垄，將不同的模塊打包成一個模塊此虑，由于移動端的事件很多，例如單擊口锭、雙擊朦前、輕掃、捏合鹃操、和拖拽等等韭寸，所以當(dāng)我們在移動端使用click來監(jiān)聽點(diǎn)擊事件時，系統(tǒng)需要花費(fèi)100~300毫秒判斷到底是什么事件组民，而移動端對事件響應(yīng)速度的要求很高棒仍，事件響應(yīng)越快用戶體驗(yàn)就越好，所以當(dāng)我們需要在移動端監(jiān)聽點(diǎn)擊事件時臭胜，請使用tap事件，tap事件是zepto.js自己封裝的一個事件癞尚，解決了原生click事件100~300毫秒的延遲問題耸三，例如“$ (“div”).tap (function () {console.log (“被點(diǎn)擊了”);} );”，給zepto的DOM元素集合所綁定的swipe/swipeLeft/swipeRight/swipeUp/swipeDown事件的觸發(fā)條件是手指在此集合所包含的DOM元素上輕掃/向左/向右/向上/向下輕掃