javascript總結

#初識 javascript

1、JS組成：ECMA   BOM  DOM

• js 是一種基於 對象模型 和 事件驅動 的腳本語言
• 組成：
  • ECMAScript由ECMA-262定義，提供核心語言功能；
  • 文檔對象模型（DOM），提供訪問和操做網頁內容的方法和接口；
  • 瀏覽器對象模型（BOM），提供與瀏覽器交互的方法和接口；

2、html 中使用 javascript

• html是從上往下瀑布式加載，<script>包裹的 js 代碼也是從上往下依次加載的；
• 通常應該把<script>元素放在頁面最後（body的最後面），越晚加載越好，有利於提高網頁的響應速度；
• 關於 script 標籤的 async 和 defer 屬性：
  • 經過 src 引用外部的腳本時，script 標籤的 async 和 defer 屬性都會讓腳本的加載不會阻塞 dom 的渲染；
  • async 是異步加載和執行腳本，不能保證腳本執行的順序和執行時機（不必定在 dom 渲染完成後），因此 async 適用於腳本對 dom 和其餘腳本沒有依賴的狀況使用；
  • defer 屬性可以保證腳本執行的時機是在 dom 渲染完成後，還能保證腳本的執行順序是正常的從上往下執行，因此這種模式是比較可靠的，用 defer 比 async 更穩；

 

#基本概念

1、js 的基本特色

• 區分大小寫；
• 標識符字母、數字、下劃線和美圓符組成，數字不能開頭；
• 單行和多行注和 java 同樣；
• 語句的分號不是必須的，可是最好寫一下；

2、變量

• 經常使用數據類型：string、number、boolean、array、object
• typeof 運算符（單目運算符）：不是函數；能夠用來判斷 function；function 是一個特殊的對象；
• js中的字面量相似於其餘語言的常量：12，'java' 都是字面量

3、基本數據類型

一、布爾 Boolean：

• 其餘類型經過Boolean（）函數能夠轉換爲 boolean 值；
• 空串、0、NAN、null、undefined 都爲 false；

二、數值 Number：

• JS數值始終是 64 位的浮點數
• 浮點數計算產生舍入偏差

  var x = 0.2 + 0.1;                     // x 將是 0.30000000000000004
  var x = (0.2 * 10 + 0.1 * 10) / 10;    //結果將是0.3

• 關於NAN：nan不等於nan；能夠用 isNaN（）函數判斷，用 typeof 判斷 NAN 會獲得 number；
• toString 用來進制轉換

  var myNumber = 128;
  myNumber.toString(16);     // 返回 80
  myNumber.toString(8);      // 返回 200
  myNumber.toString(2);      // 返回 10000000

• 轉換爲數值：三個方法是全局方法，非數字的方法
• Number（支持十六進制）；parseInt（str，rule）：rule 參數能夠指定進制；parseFloat（）
• 空串、null 和 undefined：Number函數的結果是0、0、nan；parseFloat 和 parseInt 都是 nan；
• 數值處理：toFixed() 方法

  var x = 9.656;
  x.toFixed(0);           // 返回 10
  x.toFixed(2);           // 返回 9.66
  x.toFixed(4);           // 返回 9.6560
  x.toFixed(6);           // 返回 9.656000

*****************************tips*******************************

• 關於Math 對象的Floor 和 ceil 方法：這兩個方法都是取離目標數字最近的整數，前者是比目標數字小，後者是比目標數字大
• Math.random() 必定範圍的隨機數獲取方法

  function getRndInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1) ) + min;
  }

****************************************************************

三、字符串 String：

• 基本特色：實質是字符序列，字符串常量概念
• 經常使用方法：
  • 查找：indexOf、search
  • 截取：slice（b，e）、substring（b，e）、substr（b，l）
  • 其餘：replace（不會改變原有的，返回的是新串）、toUpperCase、toLowerCase、trim、split

四、對象 Object：

• BOM和DOM中的對象由宿主實現提供，不必定會繼承 js 中的 Object；
• object 使用字面量表示法（json），不會調用構造函數；

五、數組 Array

• 特色：
  • 能夠保存不一樣類型的值，大小也能夠動態調整；
  • 建立數組最好不要用 new Array 方法；
  • 包含 index 和 length，僞數組也有這兩個屬性；

    var arr = [1,2];
    arr[arr.length] = 3;
    arr[arr.length] = 4;
    arr[10] = 10;
    console.log(arr.length);
    console.log(arr[8]);

• 經常使用方法：join、push （返回操做後的數組的長度）、 pop（後面）、shift（前面）、unshift、reverse、indexOf、lastIndexOf、concat、slice（切片）
• sort (默認比較字符串，其餘類型比較依賴於比較函數)

​

​

• splice（能夠新增、刪除和替換）
  

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  //insert
  fruits.splice(2, 0, "Lemon", "Kiwi");
  alert(fruits);
  //delete
  fruits.splice(2, 1);
  alert(fruits);
  //replace
  fruits.splice(2, 2, "Lemon", "Kiwi");
  alert(fruits);

• 迭代方法：

  //forEach方法
  var haha =[12,13,14];
  haha.forEach(function(value,index,array){
     alert(value);
  })
  
  //map建新數組，不會改變原來的
  var numbers1 = [45, 4, 9, 16, 25];
  var numbers2 = numbers1.map(myFunction);
  function myFunction(value, index, array) {
    return value * 2;
  }
  
  //filter條件過濾
  var numbers = [45, 4, 9, 16, 25];
  var over18 = numbers.filter(myFunction);
  function myFunction(value, index, array) {
    return value > 18;
  }
  
  //reduce total老是保存上一次返回的值
  var numbers1 = [45, 4, 9, 16, 25];
  var sum = numbers1.reduce(myFunction);
  function myFunction(total, value, index, array) {
    return total + value;
  }
  
  //every() 方法檢查全部數組值是否經過測試
  var numbers = [45, 4, 9, 16, 25];
  var allOver18 = numbers.every(myFunction);
  function myFunction(value, index, array) {
    return value > 18;
  }
  
  //some() 方法檢查某些數組值是否經過了測試
  var numbers = [45, 4, 9, 16, 25];
  var someOver18 = numbers.some(myFunction);
  function myFunction(value, index, array) {
    return value > 18;
  }
  
  //find() 方法返回經過測試函數的第一個數組元素的值
  //findIndex() 方法返回經過測試函數的第一個數組元素的索引

• 數組判斷

  Array.isArray(fruits);  
  fruits instanceof Array 

**************************************************tips***********************************************

• 關於 null 和 undefined
• null 是空對象，undefined 是未初始化的變量或者未聲明變量；
• null==undefined 判斷結果爲 true，null===undefined 判斷結果爲 false；
• 空對象的判斷先要看是否未定義

  //若是要測試對象是否爲空，則必須先測試它是否未定義
  typeof myObj !== "undefined" && myObj !== null;

• 關於函數閉包：子函數可使用父函數的局部變量

  var add = function (a) {
      return function (b) {
          return a + b;
      };
  };
  var addFive = add(5);
  alert(addFive(10));

*******************************************************************************************************

4、數據類型 & 變量(補充)

一、基本類型 & 引用類型

• 基本類型
  • 保存在棧中；複製值的副本；
  • 能夠用 typeof 區分類型；函數傳參是按值傳遞；
• 引用類型
  • 值爲對象保存在堆中；複製的時候複製的是指針；
  • 用 instanceof 區分具體類型；函數傳參是按值傳遞（傳遞的是引用的副本）；
  • 對象能夠動態添加屬性；

二、做用域（執行環境）

• 全局變量（全局執行環境）：儘可能少用，全局變量的頻繁使用可能會致使安全問題並使代碼變得難以維護；
• 局部變量（函數執行環境）：變量的做用域是靠函數來限制的，而不是用像 if 後面的｛｝來進行界定的；
• 在HTML中，全局做用域是window，全部全局變量均屬於window對象；
• 函數也是變量；儘可能不要建立全局變量，全局變量（函數）容易發生相互覆蓋；

三、內存問題（垃圾回收）

• js 自動垃圾回收機制基於標記清除法（基於變量的做用域）；
• 另一種回收機制是引用計數法，用的少，由於相互引用會致使沒法垃圾回收引起內存泄漏；
• 解除變量的引用有利於垃圾回收：全局變量、全局變量屬性和循環引用在不用的時候最好及時解除引用（null）；

四、變量聲明提高

• 將變量聲明移至頂部的默認行爲，變量初始化不會被提高
• 用 let 或 const 聲明的變量和常量不會被提高
• 爲了不 bug和提升程序的易讀性，在每一個做用域的開頭聲明全部變量

5、運算符 | 流程控制 | JSON

一、運算符

• 相等（==）和不相等（！=）操做符僅能用於判斷兩者的值是否相等；
• 推薦使用全等(===)和不全等(!==)判斷兩者的值和類型是否都相等；
• 三目運算符：（condition？value1：value2）；
• JS 將數字存儲爲 64 位浮點數，但全部按位運算都以 32 位二進制數執行【負數二進制碼（補碼）=絕對值反碼+1】

二、流程控制 -- if、switch、for、for-in、while、do-while（break和continue）

• 基本和java同樣的用法；
• 循環也支持 label：statement 方式的命名，以便在break等中使用；
• switch語句在比較值時使用的是全等操做符，所以不會發生類型轉換，同時js的switch不加break的話也具備穿透性；
• for（var  i  in  json）來進行遍歷對象的屬性（json 能夠理解爲 js 對象的簡化表示）；
• 關於 if 和 for：js沒有塊級做用域

​

三、JSON（js 對象的字面量表示）

• JSON 是一種數據傳輸的格式，用於先後端的數據傳輸，正逐漸取代 xml 成爲主流；
• JSON 串和 js 對象的相互轉換：stringify 和 parse 方法

var jsonString = JSON.stringify({
    make: "McLaren",
    model: "MP4-12C",
    miles: 5023
});
var car = JSON.parse(jsonString);
console.log(jsonString);
console.log(car);

**********************************tips**************************************

• with語句：做用和vb裏的with相似，使用一個對象的多個屬性，不用屢次寫對象名

  function Lakers() {  
         this.name = "kobe bryant";  
         this.age = "28";  
         this.gender = "boy";  
  }  
  var people=new Lakers();  
  with(people)  
  {  
         var str = "姓名: " + name;  
         str += "年齡：" + age;  
         str += "性別：" + gender;  
         document.write(str);  
  }  

****************************************************************************

 

#引用類型

1、對象（Object）

• 後面的Array、Date、RegExp都是Object
• 對象具體類型判斷的通用方法示例

//經過檢查 constructor 屬性來肯定某個對象的具體類型
//這裏是檢查date類型的實例
function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

2、數組（Array）

3、時間（Date）

一、構造函數和三個方法

//構造器和幾個方法
var d = new Date();
var d = new Date(454545545);
var d = new Date(2018, 11, 24, 10, 33, 30, 0);
var d = new Date("October 13, 2014 11:13:00");
var d = Date.parse('2018-01-01'); //返回毫秒值
var d = Date.UTC(2005,4,5); //返回毫秒值
var d = Date.now(); //返回毫秒值

二、四種日期格式

//時間格式
var d = new Date("2018-02-19T12:00:00-08:30"); //標準日期格式
var d = new Date("02/19/2018"); // 短日期 最好不要省略0
var d = new Date("Feb 19 2018");//長日期
var d  = new Date("Mon Feb 19 2018 06:55:23 GMT+0200 (W. Europe Standard Time)");//完整格式，括號裏的錯誤會被自動忽略

三、幾個toString方法

//幾個toString 方法
var d = new Date();
document.getElementById("p1").innerHTML = d.toLocaleString();//完整本地時間
document.getElementById("p3").innerHTML = d.toUTCString();//完整標準時間
document.getElementById("p2").innerHTML = d.toDateString();//年月日
document.getElementById("p4").innerHTML = d.toTimeString();//時分秒

四、時間獲取和設置方法

//時間獲取方法分別對應幾個相應的時間設置方法
getDate()    //以數值返回天（1-31）
getDay()    //以數值獲取周名（0-6）
getFullYear()    //獲取四位的年（yyyy）
getHours()    //獲取小時（0-23）
getMilliseconds()    //獲取毫秒（0-999）
getMinutes()    //獲取分（0-59）
getMonth()    //獲取月（0-11）
getSeconds()    //獲取秒（0-59）
getTime()    //獲取時間（從 1970 年 1 月 1 日至今）和 valueOf都是返回毫秒值

**********************tips***************************

• 外國的月份是0到11月，分別對應咱們的1到12；

*****************************************************

4、正則（RegExp）

一、正則基礎

• 修飾符

  g（全局匹配）、i（忽略大小寫）、m（多行模式）

• 括號

  [abc]    查找方括號之間的任何字符。
  [^abc]    查找任何不在方括號之間的字符。
  [0-9]    查找任何從 0 至 9 的數字。
  (red|blue|green)    查找任何指定的選項。

• 元字符

  .    查找單個字符，除了換行和行結束符。
  \w    查找單詞字符。
  \W    查找非單詞字符。
  \d    查找數字。
  \s    查找空白字符。
  \b    匹配單詞邊界。

• 量詞

  n+    匹配任何包含至少一個 n 的字符串。
  n*    匹配任何包含零個或多個 n 的字符串。
  n?    匹配任何包含零個或一個 n 的字符串。
  n{X}    匹配包含 X 個 n 的序列的字符串。
  n{X,Y}    匹配包含 X 至 Y 個 n 的序列的字符串。
  n{X,}    匹配包含至少 X 個 n 的序列的字符串。

• 首尾匹配

  n$    匹配任何結尾爲 n 的字符串。
  ^n    匹配任何開頭爲 n 的字符串。

• string支持正則的方法：search、replace、match、split

二、正則對象

• 字面量的元字符轉義只要一個 \   而構造函數要 \\

var pattern1 = /at/g;
var pattern2 = new RegExp("[bc]at", "i");

三、對象屬性

• global          RegExp 對象是否具備標誌 g
• ignoreCase RegExp 對象是否具備標誌 i
• lastIndex     標示開始下一次匹配的字符位置
• multiline      RegExp 對象是否具備標誌 m
• source         正則表達式的源文本

四、對象方法

• 方法：test方法、exec方法、compile方法
• exec 方法返回的是數組，其中含兩個額外屬性，index 表示匹配項在字符串中的位置，input表示測試的字符串

var text = "mom and dad and baby"; 
var pattern = /mom( and dad( and baby)?)?/gi; 
var matches = pattern.exec(text); 
alert(matches.index);     // 0 
alert(matches.input);     // "mom and dad and baby" 
alert(matches[0]);        // "mom and dad and baby" 
alert(matches[1]);        // " and dad and baby" 
alert(matches[2]);        // " and baby" 

五、構造函數屬性？

• RegExp.$一、RegExp.$2...RegExp.$9，分別用於存儲第1、第二......第九個匹配的捕獲組；

var text = "this has been a short summer";
var pattern = /(.)hort/g;
if (pattern.test(text)){
    alert(RegExp.input);            // this has been a short summer
    alert(RegExp.leftContext);      // this has been a
    alert(RegExp.rightContext);     // summer
    alert(RegExp.lastMatch);        // short
    alert(RegExp.lastParen);        // s
    alert(RegExp.multiline);        // false IE不支持
}

5、函數（funtion）

一、函數參數（聲明、調用和返回略）

• arguments（可變參）：僞數組（有 index 和 length），存的傳入的參數，能夠用for 遍歷；
• 函數的參數在聲明的時候寫不寫均可以，寫多少個也沒有規定，底層是用數組實現的，函數聲明的括號裏寫上形參只是爲了函數內部使用的方便；函數在調用的時候要傳幾個實參都是能夠的，反正是傳幾個接受幾個；
• 因爲 js 函數參數的以上特色，因此 js 的函數沒有真正意義上的重載；
• 函數的參數最好的作法是對那些必需值使用命名參數，而使用對象字面量（json）來封裝多個可選參數；
• es2015支持 函數參數默認值 的設置；

二、function 類型

• js 是沒有方法重載致使同名函數是覆蓋的效果；function 不是 object 類型的；
• 函數聲明隨意寫在什麼位置都不影響函數的調用，可是函數表達式必須寫在調用以前纔不會出錯；

  //函數表達式
  var run = function (v1) {
    alert(v1);
  };
  //函數聲明
  function run() {}

 

#DOM應用

1、dom基礎

一、節點獲取

• 經過 id、標籤名、類名和選擇器獲取：
  • getElementById 和 getElementsByTagname；
  • getElementsByClassName 經過類名獲取元素列表；
  • querySelector(經過 css 選擇器獲取一個元素) 和 querySelectorAll(經過 css 選擇器獲取元素列表)；
  • 用 className 來獲取元素，封裝函數 getByClass（oParent，sClass）；
• 父子兄弟節點獲取：
  • 父節點的獲取：parentNode、offsetParent（獲取有定位的父節點）；
  • 子節點的獲取：childNodes和nodeType（也能夠用children）；
  • 首尾子節點：firstChild（firstElementChild 不會獲取到文本節點，IE9如下不可用）、lastChild（lastElementChild）；
  • 兄弟子節點：nextSibling（nextElementSibling）、previousSibling（previousElementSibling）；

二、屬性操做

• 基本方法：obj.value（不能夠傳參） 和 obj["value"]（能夠傳參）；setAttribute | getAttribute | removeAttribute
• 相關細節：
  • 屬性基本 html 怎麼寫 js 就怎麼寫，除了 class 外：div.className=" "；
  • style 屬性不管是增長仍是獲取都是取行間，行間沒有的話，取值的時候取不到；
  • style 的優先級高於 className；
  • 獲取非行間樣式的兼容性寫法：

function getStyle(obj, attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,null)[attr];
    }
}

三、節點操做（建立-插入-刪除）

• createElement | appendChild（加在末尾，也是先刪後加）| insertBefore（節點，指定節點）--加在前面 | removeChild

var div = document.createElement('div');
div.textContent = "Sup, y'all?";
div.setAttribute('class', 'note');
document.body.appendChild(div);
var span = document.createElement('span');
span.textContent = "Hello!";
div.appendChild(span);
div.parentNode.removeChild(div);

四、關於 innerText、innerHTML 和 textContent

• innerText 和 textContent 都只能設置文本；innerHTML既能設置文本也能設置標籤；
• innerText基本的瀏覽器都支持，textContent 低版本的 IE 不支持；
• textContent 相對於 innerText 保留了必定的格式信息；

2、dom進階

一、表格應用

• 表格的便捷操做：tHead、tFoot、tBodies、rows、cells；
• 練習：表格的隔行變色；添加和刪除一行；搜索和排序；

二、表單應用（表單驗證）

• input 添加屬性進行輸入約束：disabled、required、pattern、max和min
• css 僞選擇器選擇相應約束的元素：disabled、invalid、valid、optional、required
• input約束驗證相關方法
  • checkValidity() ：input 的數據有效則返回 true
  • setCustomValidity() ：設置input元素的 validationMessage（校驗提示信息）
• input約束驗證相關屬性
  • validity   包含一系列和input元素的合法性相關的布爾屬性
  • validationMessage   錯誤提示信息
  • willValidate   是否會進行校驗
• validity包含的屬性：customError、patternMismatch、rangeOverflow、rangeUnderflow、stepMismatch、tooLong、typeMismatch、、valueMissing、valid
• 注意：以上基於html的約束及其驗證在IE瀏覽器不太好使！！！

 

 

#BOM應用

1、基礎

• window.open(url,'_self')：打開一個窗口；
• window.close()：關閉一個窗口，最好是腳本打開，腳本關閉，否則會有一些問題；
• window.navigator.userAgent
• window.location：就是html文件的地址，不只能夠取值，也能夠賦值；

2、尺寸座標

一、可視區寬高

• document.documentElement.clientWidth
• document.documentElement.clientHeight

二、滾動距離

• document.body.scrollTop
• document.documentElement.scrollTop

3、經常使用方法事件

• 對話框：alert（警告框）、confirm（確認框）、prompt（輸入框）
• 事件：onload、onscroll、onresize

 

#JS運動技術

一、運動基礎

（1）offsetWidth 和 offsetHeight：只和自身相關，與周圍的元素無關

• offsetWidth = border-left + border-right + padding-left+padding-right+元素自己的寬度;
• offsetHeight = border-top + border-bottom + padding-top+padding-bottom+元素自己的高度；

（2）offsetLeft和offsetTop

• offsetTop = 上級定位元素的padding + 元素自己的margin；
• 若是兩者中間還有其餘元素，還要加上該元素的 margin padding 和 border；
• offsetLeft同理；

（3）scrollTop和scrollLeft：與滾動條相關的屬性

• scrollTop：滾動條當前位置顯示的最上面和真正的最上面的距離，scrollLeft同理；

（4）clientHeight和clientWidth

• clientHeight包括padding但不包括border、水平滾動條、margin的元素的高度，clientWidth同理；

（5）定時器

• 開啓：setInterval（函數，時間）---循環執行；setTimeout（）---只執行一次；
• 關閉：clearInterval；clearTimeOut；
• 應用：數碼時鐘，延時提示框、無縫滾動；

二、運動框架

（1）開始運動前先關閉已有的定時器；

（2）將運動和中止的狀態用 if else 隔開；

（3）練習：側邊欄、圖片的淡入淡出；

三、緩衝運動

（1）速度愈來愈慢，最後中止；

（2）速度=（目標值-當前值）/縮放係數；

（3）緩衝菜單：速度取整（向上和向下取整）；目標值取整；

四、勻速運動的中止條件

（1）距離小於速度就中止；

（2）再手動將元素移到目標點；

（3）勻速和緩衝運動代碼的差別：速度表達式不一樣，最後的中止條件和處理方法也不一樣

五、多物體運動框架

（1）多物體運動框架不少東西都不能公用，定時器和透明度的變量等，解決方法就是給每一個元素設置自定義屬性；

六、任意值的運動框架

（1）offset 屬性 bug 和 opacity 的小數問題；

（2）練習：圖片輪換的播放器；

七、運動中級

（1）鏈式運動

• 在原有框架的基礎上加一個回調函數，在運動結束關閉定時器以後加

（2）完美運動框架

• 多個屬性同時變化；
• 等全部的條件都知足再中止；

 

#JS事件應用

一、基礎

（1）event對象

• 用來獲取事件的詳細信息：鼠標位置，鍵盤鍵位
• 鼠標的位置：clientX 和 clientY
• document的本質：能夠看做一個最高級的節點，包含html 的全部內容，全局事件加在 document 上
• 事件對象的兼容性寫法：var oEvent = ev || event

var handleClick = function (event) {
    console.log('offsetX:'+event.offsetX);
    console.log('offsetY:'+event.offsetY);
    console.log('pageX:'+event.pageX);
    console.log('pageY:'+event.pageY);
    console.log('screenX:'+event.screenX);
    console.log('screenY:'+event.screenY);
    console.log('X:'+event.x);
    console.log('Y:'+event.y);
    console.log('target:'+event.target);
    console.log('timestamp:'+event.timeStamp);
    console.log('type:'+event.type);
    console.log(event);
};
var but1 = document.querySelector('#but1');
but1.addEventListener('click',handleClick);

（2）事件冒泡

• 父級和子級的元素假如都有 onclick 事件，子級元素的被點擊，則會觸發父級元素的點擊事件
• 阻止事件的冒泡：event.cancelBubble = true;

（3）鼠標事件

• onmousemove事件
• clientX 和 clientY 實際是可視區域的座標，若是要獲取相對與 document 的絕對座標，須要和 scrolltop 等配合使用，封裝相應的方法；
• 應用：div 跟隨鼠標的移動

（4）鍵盤事件

• keycode ：能夠用來判斷鍵盤的按鍵；應用：鍵盤控制 div 的移動；
• ctrlkey、altkey、shiftkey：應用提交留言；

二、中級

（1）默認行爲

• 默認行爲就是瀏覽器自發產生的行爲，不用人爲寫代碼觸發；
• document.onContextMenu（右鍵菜單彈出）；
• 阻止默認行爲，直接在事件的方法裏 return false；
• 練習：阻止右鍵默認菜單，彈出自定義菜單；只能輸入數字的文本框（keycode 和 onKeydown）；

（2）拖拽

   一、基本原理：

• 元素位置的肯定依靠鼠標位置和鼠標距離元素左上邊界的長度來肯定；
• onmousedown計算鼠標和元素邊界的距離，onmousemove從新定位元素，onmouseup中止事件；

   二、拖拽的改進：

• 快速拖動鼠標會移出 div ：直接給 document 加事件；
• 火狐瀏覽器下空 div 的拖拽 bug：阻止默認行爲；
• 防止 div 脫出頁面：進行位置的修正；

三、應用

（1）事件綁定

• 老方法給同一個元素相同事件綁定不一樣的函數，會出現後面的把前面的覆蓋了的問題；
• 解決以上問題須要用到新的事件的綁定方法

function myAddEvent(obj, ev, fn)
{
    if(obj.attachEvent)
    {
        obj.attachEvent('on'+ev, fn);
    }
    else
    {
        obj.addEventListener(ev, fn, false);
    }
}

• 事件的解綁：IE（detachEvent）；CHROME（removeEventListener）； 

（2）高級拖拽

• 練習：不能脫出指定的元素；
• 練習：磁性吸附功能（靠近邊界的時候把距離設置爲0便可）；
• 練習：帶框的拖拽；
• 事件捕獲：將全部元素的事件集中到某一個元素上，解決IE下拖拽引發的其餘元素的選中問題（setCapture()、releaseCapture()）；

（3）自定義滾動條

• 原理：橫向拖拽；限制範圍；計算比例；
• 應用：控制元素大小；控制透明度；控制文字的滾動；

 

#AJAX技術

一、概念

• Ajax 即 Asynchronous Javascript And XML（異步 JavaScript 和 XML）；
• 能夠用來獲取 html、xml、json 和純文本等，實現網頁的局部刷新；

------- tips ---------

• eval（str）能夠將 str 解析爲 js 執行；
• 瀏覽器緩存是根據 url 進行緩存的，變動 url 能夠阻止瀏覽器的緩存；
• js 的變量與屬性：使用未定義的變量會報錯；使用未定義的屬性僅僅是 undefine，不會報錯；

二、原理

（1）AJAX 原理

/**
 * ajax 的簡單封裝
 */

function myAjax(method,url,data,async,sucFn,faiFn){
    //get ajax obj
    if(window.XMLHttpRequest)
    {
        var oAjax=new XMLHttpRequest();
    }
    else
    {
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //connection check method
    if(method.toUpperCase() == "GET"){
        oAjax.open(method, url+(data ? '?'+data : ''), async);
        oAjax.send(data);
    }else if(method.toUpperCase() == "POST"){
        oAjax.open(method, url, async);
        oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
        oAjax.send(data);
    }
    //state listener
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4)    
        {
            if(oAjax.status==200)
            {
                if(sucFn){
                    sucFn(oAjax);
                }
            }
            else
            {
                if(faiFn){
                    faiFn(oAjax);
                }
            }
        }
    };
};

（2）AJAX請求的幾種狀態說明：

• 0：未初始化，還未調用 open 方法；
• 1：載入，已調用 send 方法，正在發送去請求；
• 2：載入完成，send 方法完成，收到全部的響應內容；
• 3：解析，解析響應內容；
• 4：完成，解析完成，能夠在客戶端使用了；

 

#面向對象

一、概述

• js 中沒有類的概念，能夠經過構造函數直接建立對象；
• 對象之間的繼承極大的提升了 js 代碼的可擴展性；
• js 對象沒法進行對比，比較兩個對象將始終返回 false，無論使用 == 仍是使用 === 判斷；

二、JS 對象構建

• 最佳實踐：構造函數加屬性（特有）；原型（prototype）加方法（共有）；

function CreatePerson(name, qq)        //構造函數
{
    this.name=name;
    this.qq=qq;
}

CreatePerson.prototype.showName=function ()    //原型
{
    alert('個人名字叫：'+this.name);
};

CreatePerson.prototype.showQQ=function ()
{
    alert('個人QQ號：'+this.qq);
};

var obj=new CreatePerson('blue', '258248832');
var obj2=new CreatePerson('張三', '45648979879');

三、添加方法和屬性

（1）this 的本質：函數屬於誰 this 就是誰，全局函數屬於 window 對象；

（2）Object 對象：不能隨意給系統的對象添加屬性和方法，可能會形成方法和屬性的覆蓋；Object 是一個空的對象，能夠用來改造；

四、面向對象的選項卡（練習）

（1）面向對象原則：不能有函數套函數、但能夠有全局變量

（2）過程：onload  →  構造函數；全局變量  →  屬性；函數  →  方法

（3）注意 this 在面向對象的用法

window.onload=function(){
    new Tar('div1');
};

function Tar(id) {
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.aInput = this.oDiv.getElementsByTagName('input');
    this.aDiv = this.oDiv.getElementsByTagName('div');

    for(var i = 0;i < this.aInput.length;i ++){
        this.aInput[i].index = i;
        this.aInput[i].onclick=function () {
            _this.fnClick(this);
        };
    }
}

Tar.prototype.fnClick = function (aInput) {
    for(var j = 0;j < this.aInput.length;j ++){
        this.aDiv[j].style.display = "none";
        this.aInput[j].className = '';
    }
    this.aDiv[aInput.index].style.display = 'block';
    aInput.className = 'active';
};

五、面向對象高級

（1）JSON方式的面向對象（字面量）：適合單例模式（複用性差）；

var obj = {
    name:'allen',
    age:24,
    show:function () {
        alert(this.name+':'+this.age);
    }
};
obj.show();

（2）繼承（以拖拽爲例）：普通拖拽和限制範圍的拖拽

//一、構造函數內用 call 繼承屬性；
//二、遍歷原型鏈複製繼承方法；

/*普通拖拽*/
function Drag(id) {
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function (ev) {
        _this.down(ev);
    }
}

Drag.prototype.down = function (ev) {
    var _this = this;
    var oEvent = ev || event;
    this.disX = oEvent.clientX - this.oDiv.offsetLeft;
    this.disY = oEvent.clientY - this.oDiv.offsetTop;
    document.onmousemove = function (ev) {
        _this.move(ev);
    };
    document.onmouseup = function () {
        _this.up();
    };
};

Drag.prototype.move = function (ev){
    var oEvent = ev || event;
    this.oDiv.style.left = oEvent.clientX - this.disX + "px";
    this.oDiv.style.top = oEvent.clientY - this.disY + "px";
};

Drag.prototype.up = function () {
    document.onmousemove = null;
    document.onmouseup = null;
};


/*限制拖拽*/
function LimitDrag(id) {
    Drag.call(this,id);
}

for(var i in Drag.prototype){
    LimitDrag.prototype[i] = Drag.prototype[i];
}

LimitDrag.prototype.move = function (ev) {
    var oEvent = ev || event;
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY;
    if(l < 0){
        l = 0;
    }
    if(t < 0){
        t = 0;
    }
    this.oDiv.style.left = l + "px";
    this.oDiv.style.top = t + "px";
}

（3）系統對象

• 本地對象（非靜態）：Object、Function、Array、Number、String 等
• 內置對象（靜態）：Math、Global
• 宿主對象（瀏覽器提供）：BOM、DOM