Javascript學(xué)習(xí)筆記內(nèi)容

精通HTML語(yǔ)言，擅長(zhǎng)css+div布局，css3+html5,響應(yīng)式布局，能快速手寫兼容各類常用瀏覽器的前端代碼。精通Photoshop、Dreamweaver、Flash等美工制作軟件。對(duì)各類常用Javascript效果,query框架有一定的研究，熟悉java和JSP編程，SQL語(yǔ)言，數(shù)據(jù)庫(kù)面試題1.Class="box"與.Box{}這兩者有區(qū)別，大小寫必須一致3.剃刀文件是一個(gè).js文件4.Js只寫在行為層，html只寫在結(jié)構(gòu)層，不要串寫。5.選項(xiàng)卡，水平菜單6.什么是函數(shù)：一個(gè)程序塊，執(zhí)行一項(xiàng)單一任務(wù)或一系列任務(wù)。好處是具有重用性，降低程序復(fù)雜度。7.什么是閉包：有權(quán)限訪問(wèn)另一個(gè)函數(shù)作用域的變量的函數(shù)。創(chuàng)建閉包的常見(jiàn)方式就是在一個(gè)函數(shù)a內(nèi)部創(chuàng)建另一個(gè)函數(shù)b，即內(nèi)部函數(shù)。當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時(shí)，就創(chuàng)建了該內(nèi)部函數(shù)的一個(gè)閉包。稱外部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量，相當(dāng)于授權(quán)該變量能夠被延遲使用。因此，當(dāng)外部函數(shù)調(diào)用完成后，這些變量的內(nèi)存不會(huì)被釋放（最后的值會(huì)保存），閉包仍然需要使用它們。閉包的作用就是在a執(zhí)行完并返回后，閉包使得Javascript的垃圾回收機(jī)制GC不會(huì)收回a所占用的資源，因?yàn)閍的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量。8.(1)vars=confirm();(2)vars;s=confirm();(1)方法聲明變量立即賦值更好2.書(shū)寫CSS樣式步驟：a.先做reset樣式（將瀏覽器內(nèi)置的樣式復(fù)位，即覆蓋）b.按照結(jié)構(gòu)層盒子的嵌套，并列關(guān)系寫好盒子關(guān)系c.按照效果圖分析效果給每個(gè)盒子添加相應(yīng)的屬性和值9.頁(yè)面一：alert(s);//報(bào)錯(cuò)，找不到頁(yè)面二：vars;alert(s);//undefined頁(yè)面三：alert(window.XMLHttpRequest);//不報(bào)錯(cuò)，彈出內(nèi)容10.面向?qū)ο螅簾o(wú)需關(guān)心內(nèi)部如何，只要知道如何使用它封裝、抽象（把主要的內(nèi)容抽出，創(chuàng)建對(duì)象，再進(jìn)行封裝）、繼承（子級(jí)繼承父級(jí)的屬性和方法）用面向?qū)ο笞鲞x項(xiàng)卡11.屬性和變量的區(qū)別，函數(shù)和方法的區(qū)別屬性和方法是屬于某對(duì)象，是私有的；變量是自由自在的。變量能變成屬性，屬性不能變成變量。全局變量和函數(shù)相當(dāng)于window的屬性：vara==window.afunctionaa()==window.aa=function()面向?qū)ο蠼?方法"，面向過(guò)程叫"函數(shù)"，函數(shù)是有返回值的方法用對(duì)象調(diào)用的叫方法（this），直接調(diào)用函數(shù)名的叫函數(shù)事件：就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。事件處理程序的名字以"on"開(kāi)頭，因此click事件的事件處理程序就是onclick。分類：讀取事件頁(yè)面載入事件onload，對(duì)象window用戶事件1.onmouseoveronmouseoutonmousemoveonmouseuponmousedownonclickonkeydownonkeyuponcontextmenu（環(huán)境菜單）對(duì)象document2.onsubmit對(duì)象formonsubmit在form上加，不能在submit按鈕上加3.keycodeclientXclientYbutton（指示哪一個(gè)鼠標(biāo)鍵被按下[0無(wú)、1左、2右、4中]）offsetXoffsetYpageXpageY對(duì)象eventclientXclientY以可視區(qū)域來(lái)定坐標(biāo)4.clientWidth可視區(qū)域的寬度clientHeight對(duì)象documentElement(html)offset可讀不可寫offsetWidth物體自身寬度，包含邊框，填充，不包邊界offsetLeft左偏移量，包含左邊界scrollscrollTop滾動(dòng)離開(kāi)頂端的距離scrollWidthonfocusonbluronreadystatechangesetTimeoutsetInterval對(duì)象window設(shè)置定時(shí)器前可以先關(guān)定時(shí)器，解決許多問(wèn)題cookie對(duì)象document火狐，查看頁(yè)面信息functioneventHandler(e){//獲取事件對(duì)象e=e||window.event;//IE和Chrome下是window.eventFF下是e//獲取事件源vartarget=e.target||e.srcElement;//IE和Chrome下是srcElementFF下是target}用CSS3做簡(jiǎn)單的動(dòng)畫(huà)效果但兼容性低，Javascript做復(fù)雜的動(dòng)畫(huà)效果，JQuery也可做動(dòng)畫(huà)效果且兼容性高。8個(gè)div語(yǔ)義化不強(qiáng)表格加載速度慢列表ullispana;dldtdd最好解決樣式?jīng)_突。Javascript最佳實(shí)踐交互就是網(wǎng)頁(yè)的元素針對(duì)用戶的特定行為，產(chǎn)生指定的變化。響應(yīng)事件。1.是什么？JS是用來(lái)實(shí)現(xiàn)交互的。它是純文本的，用任何的純文本編輯器都能編輯它；同時(shí)它是網(wǎng)頁(yè)的一部分，隨著一個(gè)html頁(yè)面被請(qǐng)求，JS腳本也隨之下載到了用戶的計(jì)算機(jī)本地，在用戶計(jì)算機(jī)本地渲染運(yùn)行。它是可讀的。2.不是什么？（1）Javascript不是Java。Javascript是輕量級(jí)運(yùn)行在瀏覽器中的語(yǔ)言，而Java是跨平臺(tái)的開(kāi)發(fā)多種應(yīng)用的語(yǔ)言。Jsp網(wǎng)站、安卓都是Java開(kāi)發(fā)的。（2）Javascript和php,asp,jsp完全不同。Javascript是運(yùn)行在用戶計(jì)算機(jī)中的，是前臺(tái)的腳本；php,asp,jsp是運(yùn)行在服務(wù)器上的。Javascript的功能單一，僅僅是用來(lái)開(kāi)發(fā)頁(yè)面效果的；php等語(yǔ)言可以與數(shù)據(jù)庫(kù)交互，開(kāi)發(fā)網(wǎng)sayName:function(){alert();}};原型模式的不足：它省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié)，結(jié)果所有實(shí)例在默認(rèn)情況下都將取得相同的屬性值；它最大問(wèn)題是由其共享的本性所導(dǎo)致，原型中所有屬性是被很多實(shí)例共享的，這種共享對(duì)于函數(shù)非常合適，然而，對(duì)于包含引用類型值的屬性來(lái)說(shuō)，問(wèn)題就比較突出了。（4）組合使用構(gòu)造函數(shù)模式和原型模式（推薦）176頁(yè)（5）動(dòng)態(tài)原型模式（6）寄生構(gòu)造函數(shù)模式（7）穩(wěn)妥構(gòu)造函數(shù)模式（安全）常見(jiàn)的三種節(jié)點(diǎn)：元素節(jié)點(diǎn)(p)，屬性節(jié)點(diǎn)(id)，文本節(jié)點(diǎn)(text)（查找時(shí)的先后順序）<pid="p1"class="">text</p>4.如何學(xué)？增刪改查（讀寫）對(duì)htmlcssinnerHTMLcreateTextNodeappendChildparentNodeinsertBeforechildNodesnodeValue行為層的樣式優(yōu)先級(jí)最高。Js控制css用style（行間樣式），className，setAttributeoP.style.background="";設(shè)置行間樣式.para{}oP.className="para";設(shè)置外部樣式oP.setAttribute("class","para");設(shè)置外部樣式對(duì)象（名詞）=屬性+方法+事件萬(wàn)物皆是對(duì)象。屬性（名詞）：描述對(duì)象特征無(wú)（）相當(dāng)于變量用方法（動(dòng)詞）：描述對(duì)象的行為有（）相當(dāng)于函數(shù)用，函數(shù)名（參數(shù)）事件：指令表達(dá)式：由運(yùn)算符和操作數(shù)鏈接起來(lái)的式子對(duì)象.屬性="新的值";賦值對(duì)象.方法("參數(shù)");調(diào)用方法JS對(duì)大小寫敏感一個(gè)盒子可以響應(yīng)單擊事件，也稱為為它添加了事件監(jiān)聽(tīng)。如：<divonlick="bianbiaoti()"></div>事件的三要素：事件源：有監(jiān)聽(tīng)的HTML標(biāo)簽，即能響應(yīng)事件的HTML標(biāo)簽。如<div>事件名：用戶的特定行為。如：onclick,onmouseover事件的響應(yīng)：一個(gè)個(gè)functionHTML事件處理：在標(biāo)記上加事件然后調(diào)用函數(shù)（寫在結(jié)構(gòu)層）DOM0級(jí)事件處理例：window.onload.html事件源（事件發(fā)生在誰(shuí)身上）ie下window.event.srcElement標(biāo)準(zhǔn)下event.targetnodeName：找到元素標(biāo)簽名循環(huán)影響性能，找東西放循環(huán)體外性能更好事件委托（讓別人做）：利用冒泡原理，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果。瀏覽器解析：事件捕獲-》目標(biāo)階段-》冒泡階段事件委托好處：1.提高性能2.新添加的元素還會(huì)有之前的事件性能好：代碼少，完成的功能多window.onload=function(){varoUl=document.getElementById("ul");varaLi=oUl.getElementsByTagName("li");varoBtn=document.getElementById("btn");variNow=4;oUl.onmouseover=function(ev){varev=ev||window.event;vartarget=ev.target||ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase()=="li"){target.style.background="red";}}oUl.onmouseout=function(ev){varev=ev||window.event;vartarget=ev.target||ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase()=="li"){target.style.background="";}}oBtn.onclick=function(){iNow++;varoLi=document.createElement("li");oLi.innerHTML=1111*iNow;oUl.appendChild(oLi);}}函數(shù)：內(nèi)置函數(shù)（系統(tǒng)中的函數(shù)）、自定義函數(shù)有名函數(shù)（可實(shí)現(xiàn)函數(shù)重用）、匿名函數(shù)A.三個(gè)對(duì)話框方法（內(nèi)置函數(shù)）：alert();confirm();prompt();這三個(gè)方法是window對(duì)象的方法。如何學(xué)習(xí)函數(shù)：1.掌握該函數(shù)的功能2.函數(shù)有沒(méi)有返回值（1）vars=alert(true);警告框document.write(s);//得出undefined變量不加引號(hào)，如s（2）vars=confirm("你確定嗎？");確認(rèn)框document.write(s);//得出true或false（3）vars=prompt("請(qǐng)輸入你的大名","");提示框document.write(s);//得出第二個(gè)參數(shù)的值或null3.函數(shù)的參數(shù)（參數(shù)的數(shù)據(jù)類型及參數(shù)的個(gè)數(shù)）4.函數(shù)的定義和調(diào)用（針對(duì)自定義函數(shù)）B.自定義函數(shù)的定義和調(diào)用簡(jiǎn)單格式functionabc(){功能語(yǔ)句vari=2;varj=1;vars=i+j;alert(s);}調(diào)用函數(shù)的格式abc();執(zhí)行環(huán)境及作用域：varcolor="blue";functionchangeColor(){varanotherColor="red";functionswapColors(){vartempColor=anotherColor;anotherColor=color;color=tempColor;//這里可以訪問(wèn)color、anotherColor和tempColor}//這里可以訪問(wèn)color和anotherColor，但不能訪問(wèn)tempColorswapColors();}//這里只能訪問(wèn)colorchangeColor();注：無(wú)論全局環(huán)境還是changeColor()的局部環(huán)境都無(wú)權(quán)訪問(wèn)tempColor，但在swapColor()內(nèi)部可訪問(wèn)其他兩個(gè)環(huán)境中的所有變量，因?yàn)樗麄兪撬母笀?zhí)行環(huán)境。使用var聲明的變量會(huì)自動(dòng)被添加到最接近的環(huán)境中。在函數(shù)內(nèi)部，最接近的環(huán)境就是函數(shù)的局部環(huán)境；在with語(yǔ)句中，最接近的環(huán)境是函數(shù)環(huán)境。如果初始化變量時(shí)沒(méi)有使用var聲明，該變量會(huì)自動(dòng)被添加到全局環(huán)境。JS高級(jí)程序設(shè)計(jì)第三版94頁(yè)JavaScript變量可以用來(lái)保存兩種類型的值：基本類型值和引用類型值。基本類型的值源自以下幾種基本數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String、function編寫利器：sublime,webstormSublime:Html:5div...Ctrl+eCtrl+滾動(dòng)鼠標(biāo)調(diào)整字號(hào)按鼠標(biāo)中鍵可以多行編輯Ctrl+shift+K刪除當(dāng)前行Ctrl+shift+D復(fù)制當(dāng)前行Ctrl+shift+上下鍵調(diào)整當(dāng)前行的位置Ctrl+alt+[讓CSS格式進(jìn)行轉(zhuǎn)換（單行，多行）DOM:alert(images.length);//輸出圖像的數(shù)量alert(images[0].src);//輸出第一個(gè)圖像元素的src特性alert(images.item(0).src);//輸出第一個(gè)圖像元素的src特性<imgsrc="myimage.gif"name="myImage"/>varmyImage=dItem("myImage");或?qū)憊armyImage=images["myImage"];特殊集合：Document.forms，包含文檔中所有的<form>元素，與document.getElementsByTagName("form")得到的結(jié)果相同；Document.images，包含文檔中所有