筆記 - JavaScript - 川哥視頻

第一節:javascript

obj.onmouseover  //添加事件,鼠標移入;
obj.onmouseout  //添加事件,鼠標移出;
obj.attr = value  //元素屬性操做方式一,經過點(.)的方式,不賦值便進行讀取;
document.getElementById(str)  //在當前文檔中(頁面中)獲取id爲某值的元素;
/*直接使用id.attr兼容性較差*/

第二節:html

obj[attr] = value  //元素屬性操做方式二,arr通常是string類型,實際使用中須要使用引號(‘’)括起來;
className  //在JS中不能直接使用class獲取和操做該屬性;  
style  //獲取和修改的是行內樣式,可能會覆蓋className樣式;  
window.onload  //意爲頁面加載完成後執行;
obj.innerHTML  //讀取或設置標籤元素內的全部內容;
/*靈活使用JS添加和使用行內索引值*/
/*沒法對一個數組進行讀取樣式或進行設置樣式、綁定事件的操做,通常須要使用循環*/

第三節:java

typeof obj  //獲取數據類型,包括:number、string、boolean、undefined、object、function六類;
parseInt(str, radix)  //強制類型轉換,將變量值轉換爲整數型,可設置轉換進制;
parseFloat(str)  //強制類型轉換,將變量值轉換爲浮點型;
NaN  //是一個number類型,但不等於任何數字(包括自身);
%  //取模是一個頗有用的算術運算符,能夠完成諸如取單雙數、數組無限循環等應用;
%=  //取得餘數並將餘數賦值給變量;
true  //包括true、非零數字、非空字符串、非空對象;
false  //包括false、undefined、數字零、空字符串、空對象;
/*強制類型轉換又稱顯性類型轉換,與之對應的叫自動類型轉換,又稱隱性類型轉換;例如使用雙等號(==)時,某一側數據類型會與另外一側轉換一致後比較,還有如減法計算等*/
/*關於Json對象:Json對象使用大括號({})包裹數據,使用key:value的方式保存數據,key值相似數組的下標,但它不具有length屬性,遍歷數據須要使用for in循環*/

第四節:node

arguments  //稱爲不定參或可變參,是函數的默認傳參,應用如利用其length屬性判斷參數個數進行不一樣操做;
obj.currentStyle[attr]  //操做元素目前最終的樣式(行內外皆可),只適用於IE;
getComputedStyle(obj, pseudoClass)[attr]  //只讀,獲取元素的計算完成後的樣式(行內外皆可),適用於Firefox和Chrome,參數中的僞類部分能夠填寫任意值;
arrObj.length  //數組的長度能夠獲取,也能夠在定義好數組後修改,若是比初始時小,會丟棄多餘長度對應的數據,此特性能夠用來清空數組;
concat(arrX, ..., arrX)  //合併多個數組;
join(separator)  //使用指定字符串鏈接數組內數據並轉換爲字符串,默認爲逗號(,)號;
push(newX)  //從尾部添加數據,並返回新的長度;
unshift(newX)  //從頭部添加數據,並返回新的長度;
pop()  //刪除並返回數組的末一個元素;
shift()  //刪除並返回數組的第一個元素;
splice(index, howmany, item1, ..., itemX)  //參數爲從某下標開始,刪除幾個,要插入的數據;可用此方法完成刪除、添加及替換操做;
sort(sortby)  //對數組內數據排序,無參時按string類型排序,字母先大寫後小寫排列,數字也做爲字符串排列,參數爲sortNumber則按數字字面值大小升序排列;
sort(function(n1, n2) {  //使用比較函數讓sort方法排序數字實際大小;
  return n1 - n2  //升序n1-n2,降序n2-n1;
});

第五節:ajax

setInterval(code, millisec)  //間隔性計時器,按指定毫秒調用函數或計算表達式;
clearInterval(obj)  //中止指定間隔性計時器;
setTimeout(code, millisec)  //延時性計時器,在指定毫秒後調用函數或計算表達式,能夠調用自身以起到無限循環的做用;
clearTimeout(obj)  //中止指定延時性計時器;
DateObj.getFullYear  //獲取當前年份,返回4位數字;
string[index]  //獲取字符串中指定下標的字符,有兼容性問題;
strObj.charAt(index)  //獲取字符串中指定下標的字符,推薦使用;
obj.offsetLeft  //獲取對象相對於父級的左邊距,只讀屬性,返回值爲number類型,什麼時候均可使用,同類屬性還包括offsetTop、offsetWidth;
obj.style.left  //獲取或設置相對於具備定位屬性父級的左邊距,返回值爲string類型,只有對象具備left屬性時(外鏈無效)才能使用,同類屬性還包括top、bottom、right;
/*在JS中可使用連等於,如:obj1=obj2=onclick=function(){},兩個對象綁定了相同的點擊事件*/

第六節:正則表達式

obj.childNodes  //標準DOM屬性,獲取元素全部子節點,高級瀏覽器返回節點包括元素節點、屬性節點和文本節點;
obj.children  //非標準DOM屬性,獲取元素全部元素子節點,低版本IE返回值中包含註釋節點,兼容性較好;
obj.nodeType  //獲取節點類型,元素節點返回1,屬性節點返回2,文本節點返回3,通常和childNodes配合使用;
obj.firstChild  //獲取第一個元素子節點,適用於IE6~8,同類屬性還包括:lastChild、nextSibling、previousSibling;
obj.firstElementChild  //獲取第一個元素子節點,適用於Firefox、Chrome瀏覽器,同類屬性還包括:lastElementChild、nextElementSibling、previousElementSibling;
obj.offsetParent  //獲取元素定位參照的父元素;
obj.setAttribute(attr, value)  //元素屬性操做方式三,同類屬性還包括:getAttribute()、removeAttribute();
/*經常使用if語句判斷和解決兼容性問題,例如:*/
if (obj.firstElementChild) {  //判斷是否可用;
  obj.firstElementChild.something;  //適用高級瀏覽器;
} else {
  obj.firstChild.something;  //適用IE6~8;
}

第七節:chrome

createElement(tagname)  //建立一個新節點,新建立的節點與文檔中事先有的節點別無二致,能夠爲其賦值;
obj.appendChild(new)  //將new元素插入obj元素子集末尾;
obj,insertBefore(new, objson)  //將new元素插入obj指定子元素以前,低版本IE在父元素沒有任何子元素時會出錯,因此先用子元素length判斷後,決定使用哪一種方式;
obj.removeChild(objson)  //刪除obj元素的某一子元素,要刪除一個元素須要經過其父元素;
createElementFragment()  //建立一個文檔碎片,可將全部準備放入同一父元素的子元素打包其內,統一添加至目標父元素,已不經常使用;

第八節:json

obj.tBodies  //表格類DOM屬性,獲取表格對象的某一tbody下元素的子集,相似屬性還包括:tHead、tFoot、rows、cells;
str.search(regexp)  //檢索在字符串中是否包含某字符或是否匹配指定正則表達式,包含則返回字符位置下標,不包含返回-1;
str.toLowerCase()  //將字母字符串轉換爲小寫,toUpperCase是轉換爲大寫;
str.split()  //將字符串用指定字符分割;
obj.onSubmit  //添加事件,提交表單;
obj.onReset  //添加事件,重置表單;
/*實現隔行變色時,能夠聲明一個變量存儲選定行以前的顏色,在變換之間後將該變量賦值回該行顏色*/
/*建立一個新元素的流程:新建父元素暫存,新建子元素1,賦值,扔進新建父元素,新建子元素2,扔進新建父元素,...,將新建父元素扔進指定位置*/
/*使用appendChild()方法操做一個已有元素的流程:先將選定元素從原父元素刪除,再將選定元素插入目標父元素末尾,也能夠再次插入原來的父元素末尾*/
/*使用sort()排序數組,數組內能夠是object類型,在使用比較函數時,能夠在比較函數中傳入objcet中的某值進行比較,如value,innerHTML等,使object數據按要求排序*/

第九節:數組

/*讓圖像運動是利用間隔定時器循環改變圖像的定位屬性實現的*/
/*圖像運動速度的快慢,通常不會改變運動時間,而採用更改單位時間改變的距離或其餘數值來控制*/
/*要讓運動的圖像在須要的位置中止,就要設置目標值,當達到目標值,便關閉間隔定時器*/
/*當速度值乘以時間不能正好等於目標值時,要採用「當前值>=目標值」的形式來判斷是否中止運動*/
/*要使用if else將中止計時器和更改位置代碼分開,避免運動到達目標後再次啓動定時器仍然會執行一次更改位置代碼,圖像便會再次運動一下*/
/*每次啓動間隔定時器前,先關閉一次定時器,避免重複啓動定時器,使參數累加,致使圖像運動速度改變*/
/*使用運動框架改變圖像透明值,因爲沒有方便的取值方法,能夠聲明一個變量存儲透明度*/
/*緩衝運動的速度=(目標值-當前值)/縮放係數,速度使用三目運算判斷取整*/
/*目標值可能帶有小數時,傳參前將目標值轉換爲整數,不然沒法到達目標值*/
/*勻速運動時當前值距離目標值<=單位速度的長度時便認定到達目標位置,並將值取絕對值,防止正負數一直計算使圖像左右抖動,此條件知足後將當前值直接設置爲目標值*/
/*注意變量做用域以及賦值時是否須要拼接字符串「px」*/

第十節:瀏覽器

Math.round(x)  //把一個數字四捨五入爲最接近的整數;
/*使用parseFloat轉換獲取到的透明值,乘100使適用面變大,使用Math.round舍入透明值,防止透明值計算偏差而沒法到達目標值*/
/*透明值不須要加px單位,整合運動框架時須要額外判斷是否爲透明度屬性來區分操做*/
/*多元素運動須要爲每一個元素添加定時器才能互不干擾*/
/*屬性可與運動元素綁定,如定時器、速度及其餘屬性值如:透明度*/
/*多元素運動時,全部參數不可共用*/
/*要弄清楚須要變化的屬性或變量是哪一個*/
/*使用offsetWidth和offsetHeight獲取的是元素盒子模型尺寸,包括元素的內邊距和邊框,而不僅僅是元素的內容尺寸,但元素運動須要獲取和操做的都是內容尺寸,
因此須要使用currentStyle或getComputedStyle來獲取與元素的內容尺寸,使用這兩種方法獲取的元素樣式能夠用parseInt將獲取值由字符串型轉換爲整數型便於計算和賦值*/
/*對象的時間函數也能夠像普通函數同樣放入定時器,如setInterval(obj.onclick,30)*/
/*不要急於求成,久練才能久熟,先模仿再創新*/

第十一節:

obj.hasOwnProperty(property)  //判斷對象是否有某個特定屬性,必須用字符串指定該屬性;此方法沒法檢查對象原型鏈中是否具備該屬性,該屬性必須是對象自己的一個成員;檢查框架內json傳參頗有用;
/*建立一個函數時,爲此函數傳入的函數類型參數稱爲回調函數,可利用回調函數調用函數自己,組成函數鏈,應用如:鏈式運動框架,當元素運動完畢後,在運動框架內部繼續調用本框架,執行下一個元素屬性的變化*/
/*元素運動須要使多個值變化時,須要用json對象代替單一的屬性和目標值,使用for in循環遍歷json內的鍵值對,對多個屬性操做;使用這個方式須要注意可能發生其中一個值改變時間短而過早中止定時器,須要設定開關變量,判斷只要有一個屬性沒有到達目標值,開關變量便爲false,在定時器第二次循環,此時已經都到達目標值,開關變量爲true*/
/*在運動結束時使用回調函數,要清除整個運動框架的結束點在哪裏;用if判斷是否傳入了回調函數,再執行調用*/
/*輪播圖類效果除了每一個按鈕須要定義index屬性,還要用一個變量存儲index,這樣才能封裝變化函數,也方便各類計算*/
/*標籤類效果大體思路是:先循環給標籤添加事件,當某個標籤發生事件時進行函數,在此函數內循環爲每一個標籤去除樣式,再給發生事件的標籤添加樣式*/
/*對於offsetWidth和offsetHeight要加深理解,他們獲取的數值中包含了元素的內邊距和邊框尺寸,純粹的元素width或height,須要使用currentStyle或getComputedStyle,*/
/*運動框架演變過程*/
startMove(iTarget)  //運動框架
startMove(obj, iTarget)  //多物體
startMove(obj, attr, iTarget)  //任意值
startMove(obj, attr, iTarget, fns)  //鏈式運動
startMove(obj, json)  //多值運動
startMove(obj, json, fn)  //完美運動框架

第十二節:

event.clientX  //獲取當前頁面可視區域的鼠標X軸座標,而clientY獲取的是Y座標,僅支持IE,其餘瀏覽器中調用事件函數須要在事件處理函數中傳入事件對象參數;
event.keyCode  //返回按下鍵位的對應數字,不一樣鍵盤的鍵位返回值均相同,幾個特殊鍵值:ctrlkey、altkey、shiftkey,可用來組合快捷鍵;
obj.onkeydown  //添加事件,鍵盤按下,注意要清楚爲哪一個元素添加;
obj.onclick = function(e){  //事件函數的兼容性寫法;
  oEvent = e || event;
}
/*使用clientX/Y定位元素,在有滾動條的狀況下,要加上scroll距離,消除滾動條的影響;可將此方法封裝,把事件對象做爲參數傳入函數後,將頂部滾動距離和左側滾動距離分別與事件對象的鼠標Y座標和X座標相加後返回成爲json對象,以下:*/
function getPos(e) {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  return {x: scrollLeft + e.clientX, y: scrollTop + e.clientY};
}
event.cancelBubble = true;  //經過事件對象的「取消冒泡」屬性設置爲true來關閉次觸發事件對象的事件冒泡;
/*沒法經過body元素添加頁面事件,由於它默認沒有高度,頁面事件須要添加給document對象*/
/*document的本質就是整個文檔,是全部標籤(包括文檔聲明和html)的父元素*/
/*event對象時用來獲取事件的狀態*/

第十三節:

/*瀏覽器中的右鍵菜單、輸入框中輸入字符後顯示都屬於默認行爲,又稱爲默認事件;阻止默認事件能夠在事件函數末尾用return false阻止默認行爲,能夠運用這種方法自定義事件行爲或阻判定義的鍵盤輸入*/
/*拖拽的原理是計算出鼠標點擊在元素的位置,鼠標移動後,鼠標當前位置減去在元素上的位置,就是元素被拖拽後的位置*/
/*拖拽元素時爲了防止鼠標移動過快而脫離元素,一般將onmousemove添加在document對象上;爲了防止鼠標移出可視區鬆開鼠標事件無效,onmouseup事件也添加在document對象上*/
/*在onmouseup事件函數中,清空元素的onmousemove事件的同時,也要清空元素的onmouseup事件,從而釋放無用事件佔用的內存*/
/*用if判斷能夠設定元素拖拽範圍,也能夠爲拖拽元素添加邊緣吸附效果*/
/*拖拽元素的函數末尾添加return false,能夠解決火狐瀏覽器中無內容元素的二次拖拽殘影的Bug*/

第十四節:

elem.attachEvent(ev, fn)  //爲元素綁定事件,事件名爲字符串,適用於IE6~10;解除綁定方法爲elem.detachEvent(),參數相同;
elem.addEventListener(ev, fn, false)  //爲元素綁定時間,事件名爲字符串,不加‘on’,適用於FF、chrome及IE9以上版本,要注意不要忘記寫第三個參數;解除綁定方法爲elem.removeEventListener(),參數相同;
elem.setCapture()  //爲元素添加事件捕獲,僅支持IE,將全部同類事件集中在添加了事件捕獲的元素上,解除事件捕獲方法爲releaseCapture(),在低版本IE拖拽元素時選中文字的Bug能夠用爲拖拽元素添加事件捕獲解決;
/*同一個元素須要添加同一種事件時,常規的方式會讓後來添加的事件覆蓋前面添加的事件,在此時可使用事件綁定,在協做代碼時比較經常使用;綁定與解除事件傳參中的函數,要單獨封裝,傳參時使用函數名,不然沒法解除綁定匿名函數*/
/*封裝兼容性方法無論瀏覽器是否支持該代碼,即使只有一行,都要使用if判斷後再調用*/
/*自定義滾動條的滾動比例是用距離頭部的值除以整個滾動範圍減去滾動條自身長度的值*/

第十五節:

ajax(url, fnSucc, fnFail)  //ajax函數中參數第一個是讀取文件的路徑,第二個是讀取完成後要進行的操做,第三是讀取失敗後要進行的操做;
eval(str)  //此函數可計算某個字符串,並執行其中的代碼;
/*阻止緩存可使用在文件名後添加自定義的get數據,好比添加Date數據*/
/*在同一項目中,最好使用統一的字符編碼,通常推薦UTF-8*/
/*使用json對象,必定要記住,key值能夠不用引號括,可是value值通常要用引號括*/

第十六節:

XMLHttpRequest  //ajax對象接口,支持除IE6的其餘高級瀏覽器;在兼容性判斷時,爲了照顧IE6,須要在把前面默認的window對象也寫上:window.XMLHttpRequest;
ActiveXObject("Microsoft.XMLHTTP")  //IE6須要經過插件來建立ajaX對象;
ajax.open(method,url,async)  //ajax鏈接服務器,參數分別爲:提交方式,地址,是否異步;
ajax.send()  //ajax向服務器發送請求;
ajax.onreadystatechange  //ajax接收返回值;
ajax.readyState  //返回ajax請求狀態,判斷爲4時表明讀取完成,但讀取完成不表明讀取成功,只做爲下一步的開始條件;
/*readyState屬性返回值含義*/
//0(未初始化)尚未調用open()方法;
//1(載入)已調用send()方法,正在發送請求;
//2(載入完成)send()方法完成,已收到所有響應內容;
//3(解析)正在解析響應內容;
//4(完成)響應內容解析完成,能夠在客戶端調用了;
ajax.status  //返回http狀態碼,判斷爲200時表明讀取成功,返回其餘值則爲讀取失敗;常見的如404,表示請求的文件不存在;503,表示服務不可用;其餘可參照狀態碼錶;
ajax.responseText  //返回ajax成功獲取到的文件文本;
/*ajax建立步驟:一、建立ajax對象;二、鏈接到服務器;三、發送請求;四、接收返回值*/
function ajax (url, fnSucc, fnFail){
  if (window.XMLHttpRequest) {
    var oAjax = new XMLHttpRequest();
  }else{
    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  oAjax.open('GET', url, true);
  oAjax.send();
  oAjax.onreadystatechange = function () {
    if (oAjax.readyState === 4) {
      if (oAjax.status === 200) {
        fnSucc(oAjax.responseText);
      }else {
        if (fnFail) {
          fnFail(oAjax.status);
        }
      }
    }
  };
}

第十七節:

/*關於this:觸發事件的是哪一個元素便指向哪一個元素,在方法中時,方法屬於哪一個元素便指向哪一個元素*/
/*爲元素添加事件與爲對象添加方法在本質上沒什麼區別,差別在於,方法是使用者調用,而事件是系統自動調用*/
/*用prototype相似使用CSS中的類樣式*/
/*構造函數用來添加屬性,原型用來添加方法*/

第十八節:

obj.onclick = function () {
  _this.fn(this);  //這裏的this是觸發事件的對象,須要把它傳入,fn方法才能執行,而_this是保存的表明實例自己的變量;
};
/*把面向過程的程序,改成面向對象形式:*/
//原則:不能有函數套函數,能夠先用全局變量過渡;
//過程:一、window.onload轉化爲構造函數;二、全局變量轉化爲對象屬性,對象命名開頭大寫;三、將拎出來的函數轉化爲對象的方法;四、this的使用,閉包保存並傳遞this,事件調用時傳遞參數;

 第十九節:

var json {
  name: 'name';
  showName: function() {
    alert (this.name);
  }
}
/*利用json對象也能夠寫面向對象程序,可是隻適合單體程序,不適合多個對象;json還能夠用來做爲命名空間使用,使相同名字的函數不會互相沖突*/
obj.call(this, arg1, arg2)  //使用call時,第一個是指定this指向,後面的是自定義參數,使用call方法來繼承上級對象的屬性;
objB.prototype.fn = objA.prototype.fn  //雖然可使objB擁有objA的全部方法,但在修改objB的方法時,會影響objA的方法,由於這只是將objA的方法索引複製給objB,故繼承方法使用循環遍歷複製比較好;

第二十節:

window.open(url, name, features, replace)  //打開一個新瀏覽器窗口或查找一個指定名稱的窗口;
document.write()  //此方法會先將文檔清空後再寫入指定內容;
window.navigator.userAgent  //獲取當前瀏覽器和系統信息;
window.location  //獲取或設置窗口的地址;
window.onscroll  //窗口滾動事件;
window.onresize  //窗口大小變化事件;
document.documentElement.scrollTop  //獲取當前窗口距離頂部的滾動距離,scrollLeft爲距離左側的滾動距離,支持IE、FF;
document.body.scrollTop  //獲取當前窗口距離頂部的滾動距離,scrollLeft爲距離左側的滾動距離,支持chrome;
alert(content)  //警告窗口,參數傳入警告內容;
confirm(content)  //選擇窗口,選擇「肯定」返回true,選擇「取消」返回false,參數傳入提示信息;
prompt(content, value)  //輸入窗口,有輸入內容便返回輸入的值,沒有輸入內容返回null,參數傳入提示信息和默認值(可選);

第二十一節:

document.cookie  //獲取存儲在頁面中的cookie;
dateObj.setDate(dateObj.getDate() + num)  //設置一個日期對象的時間值爲當前時間加指定num值;
document.cookie = 'expires = ' + dateObj  //設置cookie的過時時間;
/*在cookie內,=號是添加符,並不是賦值符*/
/*讀取cookie中存儲的值能夠建立函數,使用split方法分割獲取到的cookie值,循環並分割獲取到的全部值再進行判斷須要讀取的值是否存在,存在便返回此值,不存在返回空值*/
/*但是用設置過時時間爲-1的方法刪除cookie*/
function setCookie(name, value, time) {
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + time);
  document.cookie = name + '=' + value +'; expires=' + oDate;
}
function getCookie(name) {
  var arr = document.cookie.split('; ');
  for(var i = 0; i<arr.length; i++){
    var arr2 = arr[i].split('=');
    if (arr2[0] === name){
      return arr2[1];
    }
  }
  return '';
}
function delCookie (name) {
  setCookie(name, 1, -1);
}

第二十二節:

str.search(char)  //檢索並返回指定單字符在字符串中的位置,從0開始,若是沒有找到返回-1;
str.charAt(index)  //檢索並返回字符串中指定下標的單字符;
str.substring(index1, index2)  //檢索並截取字符串中位置1到位置2之間的字符串後返回,帶前不帶後;
str.match(reg)  //檢索並返回一次指定的或符合規則的字符,返回值爲數組,全局檢索時有空格隔開字符時,按隔開順序返回爲數組元素;
str.test(reg)  //檢測字符串中是否有符合規則的或指定的字符,整句匹配須要加首尾符號;
str.replace(reg, newStr)  //將符合規則的或指定的字符替換爲新指定的字符;
/*正則表達式能夠先分段制定規則後再合併爲一句*/
i  //ignore,忽略大小寫;
g  //global,全局匹配;
[char]  //元字符,指定任意字符規則;
[a-z]  //小寫a-z範圍;
[A-Z]  //大寫A-Z範圍;
[0-9]  //數字0-9範圍;
.  //除了換行符以外的任意字符;
\d  //數字0-9,等價於[0-9];
\D  //除了數字0-9以外的全部字符,等價於[^0-9];
\w  //匹配一個數字,下劃線或字母字符,等價於[A-Za-z0-9_];
\W  //排除單字符,等價於[^A-Za-z0-9_];
\s  //任何空字符;
\S  //任何非空字符;
{n}  //匹配n次;
{n, }  //匹配最少n次,最多不限次;
{n, m}  //匹配最少n次,最多m次;
*  //匹配0次或不限次,等價於{0, },通常不推薦使用;
+  //最少匹配1次,最多不限次,等價於{1, };
?  //最少匹配0次,最多1次,表明前一項是可選的,等價於{0, 1};
/*須要轉義的字符前面加反斜槓\便可,如須要單指定.字符,須要輸入\.*/

完成。

相關文章
相關標籤/搜索