JavaScript入門基礎

 

1、數組

         一、數組是一個能夠存儲一組或一系列相關數據的容器

         二、數組元素：是指存儲在數組中並賦予惟一索引（下標）的數據段數組元素的數據類型能夠不一樣

         三、做用：解決大量相關數據的存儲和使用問題

         四、定義數組

                   （1）字面量的方式（JSON）

                            [數據，數據...]或{"key":"value","key":"value",...}

                   （2）建立對象的方式（構造函數）

                            var arr = new Array();

                            var arr1 = new Array(5);      數組長度爲5

                            var arr2 = [5];                                數組元素5，長度1

                            var arr3 = new Array("-5");  長度爲1，去掉引號會出錯

                            有且只有一個正整數做爲參數時，表示數組長度，若是是負數，則會出錯

         五、數組的方法（增刪改截拼復排轉）

                   （1）增

                                     i.前增

                                               方法：unshift(增長的內容)

                                               做用：在數組首部增長元素

                                               返回值：增長後數組的長度

                                               影響原數組

                                                        若是增長的是另一個數組，會將增長的數組當作一個元素添加到指定數組中

                                     ii.後增

                                               方法：push(增長的內容)

                                               做用：在數組尾部增長元素

                                               返回值：增長後數組的長度

                                               影響原數組

                   （2）刪

                   i.前刪

                   方法：shift()

                   做用：刪除數組首部的元素（一次只能刪除一個）

                   返回值：被刪除的元素

                   影響原數組

                   ii.後刪

                   方法：pop()

                   做用：刪除數組尾部的元素（一次只能刪除一個）

                   返回值：被刪除的元素

                   影響原數組

                   （3）改

                   方法：splice(開始下標，刪除的長度，新增元素...)

                   做用：在數組任意位置進行增、刪、改元素

                   返回值：被刪除的元素

                   影響原數組

                   （4）截

                   方法：slice(開始下標，結束下標)

                   做用：截取指定範圍的元素（包含開始位置的元素，不包括結束位置的元素）

                   返回值：被截取到的元素

                   不影響原數組

                   參數支持負數，但不支持第一個參數>第二個參數

                   （5）拼

                   方法：concat(拼接的內容)

                   做用：將參數拼接到指定數組後面，併產生一個新數組

                   將一個數組拼接到指定數組後，會將該數組中的每個元素單獨拼接到指定數組後

                   返回值：拼接後的新數組

                   不影響原數組

                   （6）復

                   複製數組：

                   i.slice(0);

                   ii.concat(0);

                   iii.遍歷數組

                   （7）排

                   i.       方法：reverse();

                   做用：將數組元素逆序

                   返回值：逆序後的數組

                   影響原數組

         ii.      方法：sort();

                   做用：按編碼排序（默認數組中全部的元素按照字符串的形式排序）

                   返回值：排序後的數組

                   影響原數組

                   sort(function(a,b){return a-b;})(從小到大按Number類型排序)

                   sort(function(a,b){return b-a;})(從大到小按Number類型排序)

                   （8）轉

                   i.       方法：toString();

                   做用：將數組轉換爲字符串，轉換後字符以逗號隔開

                   返回值：轉換後的字符串

                   不影響原數組

                   若是是一個變量，調用toString()方法，參數是幾，則將變量轉換成幾進制的字符串

                   ii.      方法：join(指定分隔符)

                   做用：將數組轉爲帶有指定分隔符的字符串

                   返回值：轉換後的字符串

                   不影響原數組

         六、數組遍歷

                   for in循環（做用：遍歷數組和對象）

                   for(變量 in 集合){

                   語句組;

                            }

         七、冒泡排序

                   從小到大（從上往下：相鄰元素比較）

                   4 2 3 5 1

                   2 3 4 1 5

                   2 3 1 4

                   2 1 3

                   1 2

                   var arr = [4,2,3,5,1];

                   for(var i = 0;i<arr.length-1;i++){

                            for(var j = 0;j<arr.length-i;j++){

                                     if(arr[j]>arr[j+1]){

                                               var t = arr[j];

                                               arr[j] = arr[j+1]

                                               arr[j+1] = t;

                                     }

                            }

                   }

         八、選擇排序（拿一個元素與它後面的元素比較）

                   從小到大

                   4 2 3 5 1

                   2 3 4 1 5

                   2 3 1 4

                   2 1 3

                   1 2

                  for(var i =0;i<arr.length-1;i++){

                            for(var j = i+1;j<arr.length;j++){

                                     if(arr[i]>arr[j]){

                                               var t = arr[i];

                                               arr[i] = arr[j];

                                               arr[j] = t;

                                     }

                            }

                   }

        

         十、棧：存放簡單數據和指向堆地址，每個棧只能存放一個數據

                   堆：堆的地址是存入棧中的，堆中能夠存放複雜數據類型，多個數據

 

 

1、ES5

         一、嚴格模式 "use strict"

                   嚴格模式下，函數做用域中局部變量不會變量提高

                   建議在函數做用於內部使用，且放在函數開頭部分

         二、ES5新增的數組方法

                   （1）indexOf:查找指定元素在數組中首次出現的下標位置，若是沒有找到，返回-1

                                     indexOf(查找的元素，start)

                   （2）forEach(function(value,index,array){})

                                     做用：遍歷數組

                                     value：表示數組中的每個元素

                                     index：表示數組的下標

                                     array：表示數組自己

                   （3）map:遍歷數組，並返回結果

                   （4）reduce：歸併

                                     reduce(function(pre,next,index,array){})

                                               pre：表示前一個元素

                                               next：表示下一個元素

                                               index：表示下標

                                               array：表示數組自己

                                               將pre與next運算的結果再次賦值給pre

                   （5）fiter過濾

                                     做用：經過遍歷數組，設置過濾事件，返回過濾後的結果

2、字符串

         一、聲明字符串

                   （1）字面量方式：var str = "hello"

                   （2）構造函數的方式：var str = new String("hello")

         二、字符串的屬性：length：表示字符串的長度

         三、字符串的方法（查、替、截、轉）

                   （1）查

                            i.       charAt(下標)：返回指定下標位置的元素

                            ii.      indexOf(查找的字符，start)

                            iii.     lastIndexOf(查找的字符，start):返回一個元素最後出現的位置

                            iV.              charCodeAt(下標)：返回指定下標位置字符的編碼值

                   （2）替

                                      replace(被替換的內容，替換的內容)一次只能替換一個

                   （3）截

                            i.       substring(start,end) 參數位置大小隨意，但不支持負數

                            ii.      substr(start,length)從指定位置開始截取固定長度的字符串

                            iii.     slice(start,end)參數大小不容許互換，參數支持負數

                   （4）轉

                            i.       split(切割符,切割長度)：將字符串轉爲數組

                            ii.      toUpperCase()：將小寫字母轉爲大寫字母

                            iii.     toLowerCase()：將大寫字母轉爲小寫

         四、ASCII碼

                   （1）漢字範圍

                                     4E00(19968)

                                     9FA5(40869)

                                     共20902個

                   （2）charCodeAt():根據下表獲取指定元素的編碼值

                             String.fromCharCode():根據編碼值返回字符

                             大寫字母65~90

                             小寫字母97~122

 

1、Math

         屬性：Math.PI

         方法：

         一、Math.abs():求絕對值

         二、求近似值

                   （1）Math.round():四捨五入（若是是負數，>.5進1，<=.5捨去）

                   （2）Math.floor():向上取整

                   （3）Math.ceil():向下取整

         三、求最值

                   （1）Math.max():求最大值（不支持傳遞一個數組做爲參數）

                   （2）Math.min():求最小值

         四、隨機數

                   Math.random():表示0~1之間的隨機數[0,1)

                   Math.floor(Math.random() * (n+1));   0~n的整數

                   Math.floor(Math.random() * (max-min+1)+min)

                   取從min到max之間的隨機整數

         五、Math.pow(m,n)  m的n次方

         六、Math.sqrt(n):求平方根

         七、日期對象Date

                   建立日期對象

                            var date = new Date();

                   方法：

                   （1）getFullYear():獲取年份

                            getYear():獲取年份，兩千年以前，只顯示年份的後兩位

                   （2）getMonth():獲取月份（月份從0~11表示1月至12月）

                   （3）getDate():獲取日期

                   （4）getDay():獲取星期

                   （5）getHour():獲取小時

                   （6）getMinutes():獲取分鐘

                   （7）getSeconds():獲取秒

                   （8）getMillseconds():獲取毫秒

                   （9）getTime();獲取時間戳

                                     時間戳：從1970年1月1日0時整到如今的毫秒數

                   擴展：

                   （1）setFullYear():設置年份

                   （2）setMonth():設置月份

                   （3）setDate():設置日

                   （4）setHours():設置小時

                   （5）setMinutes():設置分鐘

                   （6）setSeconds():設置秒

                   （7）setMillseconds():設置毫秒

                   toLocaleString()：顯示本地日期格式的字符串                  2017/9/8 下午9:02:56

                   toLocaleDateString():顯示本地日期                2017/9/8

                   toLocaleTimeString()：顯示本地時間              下午9:02:56

 

1、BOM

         一、BOM（Browser object model） 瀏覽器對象模型

                   BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象

                   BOM主要用於管理窗口與窗口之間的通信，核心對象是window

         二、window子對象

                   document/frames/history/loction/navigator/screen

         三、window的內置對象（location/history/navigator）

                   (1)location對象

                            i.       window.location = "http://www.baidu.com";

                                               location對象包含有關當前URL(統一資源定位符)的信息，是window對象的一部分，可經過window.location屬性來訪問

                                               href屬性:是一個可讀可寫的字符串，可設置或返回當前顯示的文檔的完整URL

                                                        location.href = "http://www.baidu.com"

                            ii.      方法：

                                     reload():用於從新加載當前文檔（刷新）

                                     語法：location.reload();

                                               location.reload(true);:刷新頁面，不使用緩存

                   （2）history對象

                            i.                 history.back():載入歷史列表中的前一個網址，至關於按下「後退」

                            ii.                history.forward():載入後一個網址，至關於「前進」

                            iii.     history.go():打開歷史列表中的一個網址，括號裏有正數負數

                                               history.go(0):刷新頁面

                   （3）navigator對象

                                     navigator.userAgent:用戶代理信息。經過該屬性能夠獲取瀏覽器及操做系統信息

         四、定時器

                   （1）setInterval（函數或表達式，毫秒數）   間歇性計時器

                            clearInterval():清除間歇性計時器

                   (2)setTimeout(函數或表達式，毫秒數)            一次性定時器

                            做用：在指定毫秒數後調用函數或執行表達式

                            clearTimeout():清除一次性計時器

         五、window.onscroll事件

                   兼容：var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

2、DOM

         一、DOM（Document Object Mode）文檔對象模型

                   做用：經過JavaScript操做DOM，能夠重構整個HTML文檔，改變頁面上的項目

         二、DOM的基本操做（查詢，修改，建立，刪除）

                   （1）查詢

                            getElementById("id名")：獲取指定ID元素的節點，找不到返回null

                            getElementsByTagName("標籤名")：僞數組

                            getElementsByName("name名")：獲取相同名稱的節點列表：僞數組

                            getElementsByClassName("class名")：獲取相同class屬性的節點列表（IE9如下不兼容）

                            document.documentElement:獲取html的方法

                            document.body:獲取body

                            querySelector("選擇器")：（IE8如下不兼容）

                            querySelectorAll（「選擇器」）：經過選擇器獲取一組元素，返回一個集合

                   （2）建立

                            creatElement("標籤名")：建立一個元素節點

                            createTextNode("文本內容")：建立一個文本節點

                   （3）追加/插入節點

                            父對象.appendChild("節點")：向指定父元素的子節點列表末尾追加新的節點

                            父對象.insertBefore("插入的節點","指定的子節點")：將節點添加到父對象中的指定子節點前面

                   （4）修改

                            父節點.replace(newNode,oldNode):用新節點替換某個子節點

                   （5）刪除

                            父節點.removeChild("子節點")

                   （6）克隆

                            節點.cloneNode():克隆節點，複製節點（只克隆節點，不克隆內容）

         三、DOM元素類型

                   節點屬性

                                               元素                    屬性                    文本

                   nodeName                   元素名稱    屬性名稱    #text

                   nodeType             1              2                3

                   nodeValue          null             屬性值                 文本內容（純文本）

事件捕獲和事件冒泡的區別？

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

就是由子節點向父節點依次傳遞事件的過程。

 

（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，而後到最精確(也能夠在窗口級別捕獲事件，不過必須由開發人員特別指定)。

和冒泡相反的過程，由父元素向子元素依次傳遞事件的過程。

 

 

什麼叫會話跟蹤技術，並說明cookie的特色？

在一次會話從開始到結束的整個過程，全程跟蹤記錄客戶端的狀態叫作會話跟蹤。就是跟蹤一個會話，並保留會話。正常狀況下，當客戶端向服務器端發送請求並獲得服務器端響應後，此次會話關閉，客戶端不會把請求獲得的信息存儲，那麼下次再須要相同信息時，還要向服務器端再次請求，這樣很浪費時間，因此須要會話跟蹤技術，將請求到的信息保存到客戶端本地，以便下次使用。這就是會話跟蹤技術。

會話跟蹤技術就是cookie

特色:：

(一)   只能使用文本文件

(二)   文件有大小限制（4KB）

(三)   數量限制。通常瀏覽器，限制大概在50條左右

(四)   讀取有域名限制。不可跨域讀取，只能由來自寫入cookie的同一域名的網頁可進行讀取。

(五)   時效限制：每一個cookie都有時效，最短的有效期是，會話級別：就是當瀏覽器關閉，那麼cookie當即銷燬

 

一、設置或修改標籤中的屬性

         對象.屬性 訪問標籤中支持的全部屬性

         class屬性：對象.className        class是保留字

二、自定義屬性

         （1）getAttribute("屬性名")獲取屬性值

         （2）getAttribute("屬性名","屬性值")設置或修改屬性值

         （3）class兼容

                   對象.getAttribute("class") == null ? 對象.getAttribute("className") : 對象.getAttribute("class")

         (4)removeAttribute("屬性名")：刪除屬性

三、    outHTML：獲取指定標籤及標籤的左右內容

         innerText：獲取或修改指定標籤中的文本內容（純文本）

         innerHTML：獲取或修改制定標籤中的文本內容（超文本）（解析標籤）

四、childNodes屬性:獲取到指定節點中的全部子節點（僞數組）返回元素節點和文本節點，

六、children:獲取制定對象中的全部元素節點（僞數組）忽略空白節點

         attributes:獲取屬性節點

七、高級選取

         層次節點結構：父節點與子節點、兄弟節點

         （1）firstChild:獲取當前元素節點下的第一個子節點，至關於childNodes[0]

                            不會忽略空白文本節點

         （2）lastChild：獲取當前元素節點的最後一個子節點

         （3）parentNode：返回該節點的父節點

         （4）previousSibling：返回該節點的前一個同級節點（兄弟節點），若是沒有，返回           null

         （5）nextSibling：返回該節點的後一個同級元素

 

九、obj.offsetWidth：自身的寬度，單位像素

十、obj.offsetLeft:距離左方或上層對象的位置，單位像素

 

一、事件對象：當一個對象觸發了所綁定的事件，所發生的一切詳細信息都將保存在一個臨時 的地方，這個地方叫作事件對象

二、獲取時間對象

         兼容：

                   （1）IE及谷歌早期版本：利用內置的全局對象獲取 window.event

                   （2）標準：經過給時間觸發函數傳遞的第一個參數

                            var e = e || window.event

三、event.button屬性

         （1）標準：鼠標左鍵                              0

                               鼠標中鍵（滾輪）            1

                               鼠標右鍵                                    2

         （2）IE早期版本

                                     左鍵           1

                                     右鍵           2

                                     滾輪           4

        

四、事件對象的屬性

         （1）clientX/clientY

                   鼠標在頁面上相對於瀏覽器可視區的位置；

         （2）offsetX/oddsetY

                   鼠標點擊位置相對於點擊（鼠標所在對象區域）的座標位置

         （3）pageX/pageY

                   鼠標在頁面上的位置

         （4）document.documentElement.clientWidth:可視寬度

         （5）screenX/screenY

                   鼠標點擊位置到windows屏幕窗口的位置

五、鍵盤事件

         （1）keyup/keydown :獲取到整個鍵盤的編碼值（字母返回大寫的編碼值）

         （2）keypress：只能獲取到鍵盤中字符的編碼值，且火狐只能獲取編碼0，其餘瀏覽器能夠獲取到字母的大小寫編碼

         屬性：

                   兼容：var k = evt.keyCode || evt.charCode || evt.which

六、快捷鍵，組合鍵

         ctrlKey/shiftKey/altKey

七、事件捕獲：（IE和Opera瀏覽器中，不支持捕獲）

                   由祖先節點向子節點層層傳遞，傳遞到最底層的子節點，這個過程，稱爲事件捕獲

   事件冒泡：由子節點向父節點，一直到祖先節點傳遞事件，這個過程稱爲事件冒泡

八、阻止事件冒泡

         （1）標準：Event.stopPropagatior();

         （2）IE：Event.cancelBubble = true;

         兼容：Event.stopPropagatior() ? Event.stopPropagatior() : Event.cancelBubble=true;

day12

1、瀏覽器默認行爲

         一、右鍵菜單        oncontextmenu

         二、超連接

         三、拖拽      ondragstart       

2、阻止瀏覽器默認行爲

         一、超連接

                   兼容：

                   evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

         二、右鍵菜單：return false；

         三、拖拽：return false；

3、事件監聽

         添加事件監聽：

                   （1）標準           對象.addEventListener("事件名click"，執行函數，布爾值)

                            true：表示捕獲

                            false：表示冒泡（默認值）

                   （2）IE     對象.attachEvent("事件驅動onclick"，執行函數)

                   兼容：

                   function listener(obj.evt,evtname,fn,boo){

                            obj.addEventLister ? obj.addEventListener(evt,fn,boo):obj.attachEvent(eventname,fn);

                   }

         移除事件監聽：

                   （1）標準           對象.removeEventListener("事件名",移除函數，false)；

                   （2）IE     detachEvent("事件驅動"，移除事件函數)

                   兼容：

                   function removelistener(obj.evt,evtname,fn,boo){

                            obj.removeEventListener ? obj.removeEventListener(evt,fn,boo):obj.detachEvent(eventname,fn);

                   }

4、事件源

         （1）標準：event.target

         （2）IE：event.srcElement

         兼容：

                   var target = event.target || event.srcElement

5、JSON

         一、JSON是一種基於文本的數據交換方式，或者叫作數據描述格式

         二、JSON的優勢

                   （1）基於純文本，跨平臺傳遞極其簡單

                   （2）JS原生支持，後臺語言幾乎所有支持

                   （3）輕量級數據格式，佔用字符數量極少，特別適合互聯網傳遞

                   （4）可讀性較強

                   （5）容易編寫和解讀

6、構造函數

         一、使用JS語法

                   function person(name,sex){

                            this.name=name;

                            this.sex = sex;

                   }

                   var p = new person("張三","男")

                   alert（p.name）;

         二、使用JSON語法建立對象

                   var obj = {"name:":"張三","sex:":"男"};

                   alert(obj.name);

 

兼容總結

             

1、 className兼容

 

function byClassName (className){

         if(document.getElementsByClassName){

                   return document.getElementsByClassName(className);

         }else{

                   var arr = [];

                   var ele = document.getElementsByTanName("*");

                   for(var i = 0; i < ele.length; i++){

                            if(ele[i].className == className){

                                     arr.push(ele[i]);

                            }

                   }

                   return arr;

         }

}

 

2、 滾動高度兼容

         document.documentElement.scrollTop ? document.documentElement.scrollTop :document.body.scrollTop;

 

3、 滾動寬度兼容

         document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft;

 

4、 class的兼容

         function getAttr (obj){

                   return obj.getAttribute("class") == null ? obj.getAttribute("className") : obj.getAttribute("class");

         }

 

6、獲取事件Event兼容

         var oBtn = document.getElemenetById("btn");

         oBtn.onclick = function(event){

                   event = event || window.event;

         }

 

 

8、onkeypress的兼容

         document.onkeypress = function (e){

                   var e = e || window.event;

                   var code = e.keyCode || e.which || e.charCode;

                            alert(code);

         }

 

9、阻止事件冒泡

         function stop (e){

                   var e = e || window.event;

                   return e.stopPropagtion ? e.stopPropagtion() : e.cancelBubble = true;

         }

 

10、阻止超連接的默認行爲

         oA.onclick = function (e){

                   var e = e || window.event;

                   e.preventDefault ? e.preventDefault() : e.returnValue = false;

         }

十3、右鍵默認行爲

         document.oncontextmenu = function (e){

                   e = e || window.event;

                   return false;

         }

 

十4、事件源委託兼容

         var oUl = document.getElementById("ul");

         oUl.onclick = function (evt){

                   evt = evt || window.event;

                   var target = evt.target || evt.srcElement;

                   alert(target.innerText);

         }

 

十5、拖拽圖片的默認行爲

         document.ondragstart = function(){

                   return false;

         }