JavaScript
1.JS和DOM的關(guān)係
瀏覽器有渲染html程式碼的功能，把html源碼在記憶體裡形成一個(gè)DOM對(duì)象，就是文件對(duì)象
瀏覽器內(nèi)部有一個(gè)JS的解釋器/執(zhí)行/引擎，如chrome用v8引擎
我們?cè)趆tml裡面寫一個(gè)JS程式碼，JS程式碼被引擎執(zhí)行，而執(zhí)行的結(jié)果就是對(duì)DOM的操作，也就是我們?？吹降奶匦?，例如?圖片漂浮，文字變色
瀏覽器執(zhí)行時(shí)，遇到html程式碼就渲染，遇到j(luò)s就解釋執(zhí)行，所以為了確保頁面整體的顯示，一般把js寫在最後，即先渲染頁面，再操作DOM
2.變數(shù)的宣告
var name = 'jquery';
註:?
?? ?嚴(yán)格區(qū)分大小寫;
?? ?變數(shù)名稱:數(shù)字,字母,底線.其中數(shù)字不能作為變數(shù)名稱的起始.變數(shù)名稱也可以以$來作為起始(不建議使用)
?? ?不使用var?會(huì)污染全域變數(shù);
##?? ???? ?加var?表示在函數(shù)內(nèi)部宣告一個(gè)局部變數(shù)且賦值，若沒有則單單為這個(gè)變數(shù)調(diào)試：?? ?console.log();?? ?document.write(string);?? ?alert(string);3.變數(shù)型別?? ?三大類(八種資料型別)?? ?- 傳統(tǒng)型別???????Number(數(shù)位型別讀??串串類型)???????Boolean(布林類型)???????- 複合型別????tom', age: 18}???????Array (陣列型態(tài))? ? ?['a', 3, true] 不管中途去掉某值，索引總是從0...N 編排?##??(函數(shù)型別)
?????- 特殊型別
???????undefined (未定義型別)
????????
##? ???? ??? ??? ??沒有原生資料???????null??????????函數(shù)的組成:???1.函數(shù)名稱?????- 數(shù)字,字母,底線,數(shù)字不能作為函數(shù)名稱的起始.?????- 函數(shù)名稱要盡量起的意義.函數(shù)名稱建議採(cǎi)用小駝峰式命名規(guī)則.
???2.參數(shù)(可選),一個(gè)函數(shù)最多有255個(gè)參數(shù).
#???3.函數(shù)本體.
???4.傳回值(可選)
???函數(shù)的宣告
???1.function 函數(shù)名稱([參數(shù)...]){
????? ??函數(shù)體;
????????將值相給;
?????}
??
???3.匿名函數(shù)?????var test = function([參數(shù)...]){????????函數(shù)本體;?}
????函數(shù)的呼叫
????1.以超連結(jié)的形式呼叫自訂函數(shù)名稱。
????2.以超連結(jié)的形式呼叫自訂函數(shù).
#??????例如：
???????<a href='javascript:自訂函數(shù)名稱([參數(shù)...])'>文字</a>
##?3.?呼叫自訂函數(shù).????變數(shù)的作用域????全域作用域與局部作用域????1.全域作用域????????1.全域作用域?????變數(shù),作用域是全域作用域.????2.局部作用域??????在函數(shù)體內(nèi)宣告的變數(shù),作用域?yàn)榫植孔饔糜?#4.運(yùn)算?? ?依照運(yùn)算功能劃分????-算術(shù)運(yùn)算???????? - * / % -- ( -邏輯運(yùn)算(JS，邏輯運(yùn)算，返回的是最早能判斷表達(dá)式結(jié)果的那個(gè)值)????????&&& ??|| ??!?? ??##?|| ??!?? ??##?|| ??!?-比較運(yùn)算????????> < >= <= != === !== ==##? ? ?-賦值運(yùn)算
?=?/= %=?????-連結(jié)運(yùn)算(一旦遇到非法數(shù)字時(shí)，後面的一律理解為「拼接」)???????? ??運(yùn)算數(shù)目來分割? ? ?- 單目運(yùn)算#
?????????? -- (正) -(負(fù)) !(非)
? ? ?- 雙眼運(yùn)算
???????exp2:exp3
? ? ? ? 當(dāng)exp1為真時(shí),執(zhí)行exp2,否則執(zhí)行exp3.
5.分支語句
???????if#?....
##???????if...elseif....???????switch()6.迴圈?#?????????while???????do...while...???????while在循環(huán)條件不滿足的情況下也會(huì)執(zhí)行一次循環(huán)體.while在循環(huán)條件不滿足的情況下不執(zhí)行循環(huán)體.7.JavaScript內(nèi)建物件? ??? ?js中一切都可以理解為對(duì)象，在呼叫方法時(shí)，那一瞬間被包裝成對(duì)象?? ?1.對(duì)象的宣告?????var o = new Object();#?????var o = {};?????var o = {name:'tom',age:10}????????2.##????????2.中存取成員中存取成員的方法?????物件名稱.物件中的成員(屬性與方法)-?字串物件???var s = new String();???var s = new String("hello");? ?var?s = "hello";???屬性與方法
##???屬性:
#???length 取得字串的長(zhǎng)度
???
???方法:
???物件.indexof(子字串)
???功能:判斷子字串在物件中首次出現(xiàn)的位置.從0開始
???返回:位置.如果子字串在物件中沒有出現(xiàn),則回傳-1.
???物件.toUpperCase();
???功能:將物件轉(zhuǎn)換為大寫
???物件.toLowerCase();
???功能:將物件轉(zhuǎn)換為小寫
???物件.substr(start [,length])#?
o:字串的截?cái)?從start位置開始截取length長(zhǎng)度.? ? ? ? ? ?length可選參數(shù)不將預(yù)設(shè)截取至字串尾.???物件.slice(start[,end])???功能:字串的截?cái)?從start位置開始截取,截?cái)嗟降趀nd位置為止.end可選參數(shù)不給預(yù)設(shè)截取到字串尾.?? 物件.replace(str1,str2)
-??陣列物件
????宣告:
????var a = new Array(); = [];
????var a = new Array('team',1);
????var a = ['team',1...];
????var a = new Array(7); //7 是陣列的長(zhǎng)度
????陣列的輸出:
????document.write(陣列的名稱);
#????陣列的賦值
????a[0] = 'nico';
????屬性:
????length 陣列的長(zhǎng)度
????方法:
(數(shù)組物件)????功能:連接兩個(gè)陣列物件.????返回:新合併的陣列,新陣列中元素的順序取決於合併時(shí)兩個(gè)陣列的順序.????陣列物件.pop()????功能:將陣列物件中的最後一個(gè)元素彈出.????返回:被彈出(刪除)的陣列元素.##????陣列物件.push(陣列元素)????功能:新增元素在陣列末端.
##????返回:被新增元素後的陣列的長(zhǎng)度.
##????返回:被新增元素後的陣列的長(zhǎng)度.????數(shù)組物件.shift()##????功能:彈出陣列頭部一個(gè)元素
????返回:被彈出的陣列元素.
????數(shù)組物件.
##????功能:在陣列的頭部新增元素##????返回:被加元素後的陣列的長(zhǎng)度.
? ? ?陣列物件.join(',')
? ? ?陣列物件.join(',')
#?? ?
?? ?數(shù)組物件.split(',')??
?? ?數(shù)組物件.reverse()??
?
????var d = new Date()
?????
????方法:
????年份
????
????物件.getMonth()
????功能:取得月份,月份(0~11)
????物件.getDate()
#Oate()##. ##????功能:取得日
????物件.getHours()
????功能:取得小時(shí)數(shù)
???
##??#????功能:取得分鐘????物件.getSeconds()????功能:取得秒值.????物件.getDay()????功能:取得目前的星期值(0週日~6週六)
-? 數(shù)學(xué)(Math)物件
? ??
#? ? 沒有實(shí)例化，相當(dāng)於PHP中的透過類別名稱靜態(tài)呼叫
?? ?
????屬性:
????PI 派值
????方法:#???PI 派值
????方法:#???PI 派值
????方法:#?
????功能:向上抽取
#????Math.floor(變數(shù))
????功能:向下取整
????Math.r」(變數(shù))：向下取整
????Math.r
#????功能:四捨五入????Math.abs(變數(shù))????功能:取絕對(duì)值????Math.random()##??隨機(jī)值.大於等於0小於1 [0,1).
##????Math.max(變數(shù)..)????功能:回傳變數(shù)中的較大者.# Math.min(變數(shù)..)????功能:返回變數(shù)中的較小者.8.瀏覽器window物件?? ?註：window物件是瀏覽器宿主物件?與JS語言無關(guān)?? ?? ? window物件的方法：?? ?window.alert(message);??? ?window.alert(message);???window.confirm(message);#om(message);#??window.confirm(message);#??window.confirm(message);#??#?? ?window.prompt();
? ? window.open();
?? ?window.close();
? ? window.print();
?? ?window.setInterval();
?? ?window.setTimeout();
?? ?window.clearInterval();
?#? ?window.clearTimeout();
oTime?window物件的子物件：? ? 1.navigator 瀏覽器資訊物件?? ?? ??? ? ??#o.
##? ? ??? ?? ? 3.history?歷史記錄?? ?#? ??? 畫面#p##1# campo#? | #?? ??
? ? ??
? ? ?5.document?物件（DOM物件）
?? ??
#?儲(chǔ)存API 提供了sessionStorage （會(huì)話儲(chǔ)存） 和localStorage（本機(jī)儲(chǔ)存）兩個(gè)儲(chǔ)存物件來對(duì)網(wǎng)頁的資料進(jìn)行新增、刪除、修改、查詢操作。 ? ? ??? ????? ??sessionStorage 用於暫時(shí)儲(chǔ)存相同視窗(或標(biāo)籤頁)的數(shù)據(jù)，並在關(guān)閉視窗或標(biāo)籤頁之後刪除這些資料。 ?? ???? ??#
?? ?localStorage 用於長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動(dòng)移除。
?
9.DOM物件操作? ?
???DOM(Document Object Model 文件物件模型)
???Document HTML/XML#?
##????????????eXtensionable Markup Language????????????(擴(kuò)充標(biāo)記??????????特性:不作為.# Object 將HTML轉(zhuǎn)換為JavaScript物件.???Model??模型???? ?找物件???-#document.getElementsByTagName(HTML#???-#document。 #?????返回:物件組成的陣列.
???- document.getElementsByName(HTML標(biāo)籤的name屬性值)
?????傳回:物件組成的陣列.
#?HTML標(biāo)籤的id屬性值)?????傳回:物件.#?? ?- document.getElementsByClassName(HTML標(biāo)籤的class屬性值)?????:物件組成的陣列.? ? window.document為什麼可以省略前面的window?? ? 答：還是作用域的問題，內(nèi)部找不到往外層找，全域下有window.document?? ?#?? ??? ? ?#? ? ??????
##??中的HTML標(biāo)籤,文本,註解,屬性都可以被視為樹型結(jié)構(gòu)上的節(jié)點(diǎn).節(jié)點(diǎn)之間是有關(guān)聯(lián)的.找到其中的一個(gè)節(jié)點(diǎn).就可以找到樹型結(jié)構(gòu)上的全部節(jié)點(diǎn).
? ? 註：一個(gè)空白、註解都是一個(gè)節(jié)點(diǎn);
????節(jié)點(diǎn):節(jié)點(diǎn)名稱(nodeName),
? ? ? ? ? ?節(jié)點(diǎn)類型(nodeType).
##? ? ? ?節(jié)點(diǎn)類型(nodeType).#? ? ?編號(hào)(nodeValue).
????父節(jié)點(diǎn): 節(jié)點(diǎn)物件.parentNode
????子節(jié)點(diǎn):?
?? ??? ?節(jié)點(diǎn)物件.child使用與陣列（包含空白節(jié)點(diǎn)）編號(hào)
? ? ???? ?
?? ??? ?節(jié)點(diǎn)物件.children? ? 非標(biāo)準(zhǔn)屬性，但相容於良好，不含空白節(jié)點(diǎn)
?? ??? ???? ? ??
? ??? ? ?
? ? ? ?與子lastChild
? ? ? ? 節(jié)點(diǎn)物件的最後一個(gè)子節(jié)點(diǎn)
????同胞節(jié)點(diǎn):
?? ??? ??? ?節(jié)點(diǎn)物件.previousSibling
???????
?? ??? ??? ?節(jié)點(diǎn)物件. nextSibling
?????????????下一個(gè)同胞節(jié)點(diǎn)
????document.createElement(HTML tag 標(biāo)籤)##?
???? ? 父物件.appendChild(子物件)????功能:將子物件新增至父物件.##?? ?
? ?## ?##? ? 父物件.removeChild(父物件.lastChild)?? ?功能:刪除物件的最後一個(gè)子節(jié)點(diǎn).? ??? 操作物件##o#? ?屬性##?#?屬性#?
???1.屬性的讀取
?????對(duì)象.屬性名稱
???2.屬性的修改
?????對(duì)象.屬性名稱= 屬性值
???文字
???1.讀取
##??????物件.innerText??????物件.innerHTML#???????物件.innerText = 修改的文字
??????物件.innerHTML = 修改後的文字
?????innerHTML解析HTML標(biāo)籤,inner解析不解析樣式不解析樣式標(biāo)籤.不解析樣式
????1.讀(因?yàn)閟tyle屬性後面還是物件,所以要用.?繼續(xù)訪問，只能去讀內(nèi)連樣式的值，無法讀取<style>中的值)??????對(duì)象。後將下一個(gè)單字首字母大寫,即小駝峰式屬性名稱.????3.批次修改樣式??????????3.批次修改樣式
??????
|className = class樣式名稱???取得執(zhí)行階段的物件.className = class樣式名稱???取得執(zhí)行時(shí)間的物件.className style對(duì)象：?? ?obj.currentStyle[attr] 和?getComputedStyle(obj, null)[attr] 來取得
? ? 前者只有ie和opera支持，後者標(biāo)準(zhǔn)瀏覽器中使用ie9以上也支援,第二個(gè)參數(shù)是偽元素
10.事件?
???1.事件來源
?????所有的HTML標(biāo)籤視為事件來源
???2.事件」
???2.事件##'#?????滑鼠click 點(diǎn)選事件
??????????dblclick 以雙擊事件
?????????? ?
##????????滑鼠#10over#?
#?????鍵盤??keyup??鍵盤抬高???????????keydown 鍵盤按下 ???????????keypresspress 鍵盤按##??關(guān)閉前
?????表單??focus 取得焦點(diǎn)
???????????blur??失去焦點(diǎn)
???????????change 表單變更中
???????3.事件處理程序??????- <tag on事件="事件處理程序">?????????事件處理程序可以是javascript代碼,也可以是自定義函數(shù)的名稱.??????- 物件.on事件= 事件處理程序?????????事件處理程序?yàn)槟涿瘮?shù).11.定時(shí)器##?定時(shí)器
? ??
?? ?clearTimeout() 方法可取消由?setTimeout()?方法設(shè)定的定時(shí)操作。
?? ?clearTimeout() 方法的參數(shù)必須是由 setTimeout() 傳回的 ID 值。
?? ?注意:?要使用clearTimeout() 方法, 建立執(zhí)行定時(shí)作業(yè)時(shí)要使用全域變數(shù)：
? ? 每隔n秒執(zhí)行的計(jì)時(shí)器
?? ?
#?? ?setInterval() 方法可依照指定的週期（以毫秒計(jì)）來呼叫函數(shù)或計(jì)算表達(dá)式。
?? ?setInterval() 方法會(huì)不停地呼叫函數(shù)，直到?clearInterval()?被呼叫或視窗關(guān)閉。由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數(shù)。
?? ?提示：?1000 毫秒= 1 秒。
?? ?提示：?如果你只想執(zhí)行一次可以使用?setTimeout()?方法。
0
0
0
