js基礎筆記

基本數據類型

• number
• string
• boolean
• null
• undefined
• object

強制類型轉換

toString();

var a= 123;
a= a.toString();
複製代碼

• toString 是轉換成字符串，而不是本身的值改變。
• NaN和Undefined沒有這個方法，要直接調用String方法。String(NaN);

轉換爲number

• string->number

  • "123"能夠轉換爲123；
  • "abc"裝換爲NaN；
  • 空值或者空格轉換爲0
  • parseInt();
    • "123px"->123
    • 123.648px->123
    • a123->NaN
  • parsFloat();
    • 123.648px->123.648
    • 123.456.789->123.456

• NUll->number

  • 0

隱式類型轉換

全部的非number進行運算，會將這些值轉換爲number再運算。

• 任何值和NaN運算都是NaN。
• "123"+"456"=123456若是對兩個字符串相加會拼串。
• 任何值和字符串相加都會轉換爲字符串。
• 將數字轉換爲字符串經常使用c=c+" "

結果是33。

• 除了字符串加法，其他都轉化爲number。

->boolean（其餘語言轉換不了，只有js能夠）

調用boolean（）方法。
複製代碼

• 數字 0和NaN是false，其餘都是ture。
• 字符串 空串是fasle 其餘都是ture
• null fasle
• undefined fasle
• 對象 ture

運算符（也叫操做符）

• typeof的返回值是string
• 對於和字符串相加，都會轉換爲字符串進行相加。
• 除了上邊這種狀況，其餘都是轉換爲數字進行計算。
• undefined ->NaN
• 2*null=0
• 能夠利用這個作隱式類型轉換。+0 -0 *1 /1

一元運算符

• 正號 +

  • 隱式轉換 +字符串轉換爲number 1 + +'2'+3 =>6

• 負號

  • 就是取反

自增

• 自增 a++；
  • 會影響原變量。
  • a 是一個變量 a++是一個表達式，這兩個不是一個東西。 變量有變量的值，表達式有表達式的值。 a++等於自增之前的值。++a是新值。

d=20;
d=d++
複製代碼

分析：d=d++先執行等號後邊的運算。d++是20;d是21;,而後再賦值給前邊的d。因此最後的d是20;

邏輯運算符

• ！非運算
  • 對非boolean取反 ，先轉換，再取反。
  • 兩次取反，隱式類型轉換爲boolean
• && 與運算
  • 兩端都是ture，返回ture。
  • js中是短路的與，若是第一個是fasle則直接不繼續判斷了。
  • false && alert('哈哈哈');哈哈哈就不會顯示。
• || 或
  • 只要有一個ture就返回ture。
  • 或也是短路的。
• 非boolean值
  • 先將他轉換爲boolean，再運算，並返回原值。
  • 與 &&
    • 第一個爲ture，直接返回第二個值，跟斷路有關係。
    • 第一個爲fasle，直接返回第一個。
    • 兩個有false，返回前邊的值。
  • 或 ||
    • 第一個爲ture，直接返回第一個。
    • 第一個爲fasle，直接返回第二個。

比較運算符

• 字符串和字符串相比較是比較Unicode編碼，一個一個比較。
• 其餘狀況是轉換爲數字進行比較。
• NaN不等於任何數，包括他本身
• 判斷一個值是否是NaN要用isNaN（）函數來判斷。
• ！== 這個是非全等

優先級

• && 比 || 的優先級高

判斷

提示框

• prompt() 彈出帶輸入框的提示框。並把輸入的值返回。 var a = prompt("請輸入內容");

if判斷語句

沒啥寫的 就正常

switch語句

switch(a){
    case 1:語句1;
    case 2：語句2;
    case 3:語句3;
    default: 語句4;
}
複製代碼

a等於的話，輸出語句2和語句3和語句4;想要只執行語句2，就在後邊加上break;

循環

• 向頁面中輸出：document.write("內容");
• while(){} 先判斷後執行。
• do ... while 先執行 後判斷。保證至少執行一次。
• for循環

for(初始化;條件;更新表達式){
    
}
複製代碼

質數練習

用根號算。Math.sqrt(i);

輸出99乘法表

for(var i=1;i<=9;i++){
            
            for(var j=1;j<=i;j++){
                document.write(j+'*'+i+'='+i*j);
            }
            document.write("<br/>");
        }
    
複製代碼

break和continue

不能在單獨if中使用。

• break退出當前循環
• continue 跳過當次循環
• 能夠爲循環語句建立一個label來標誌當前循環。

outer:
        for(var i=1;i<5;i++){
            console.log("外層循環"+i);
            break outer;
            //continue outer;效果同樣;
            console.log("內層循環");
        }
複製代碼

程序計時器

console.time('test'); console.timeEnd('test');

對象Object

• 基本數據類型都是單一的值
• 值和值之間沒有任何聯繫
• 對象屬於複合數據類型，
• 對象的分類
  1. 內建對象
     • ES標準中定義的對象（目前主要指由瀏覽器提供的對象）。
     • 好比Math String Boolean Function Object ...
  2. 宿主對象
     • 由js的運行環境提供的對象，主要指路藍旗提供的對象
     • BOM DOM
  3. 自定義對象

對象

• 建立對象 var obj = new Object();
  • 對象的屬性名隨便用，不遵照標誌符的規範。
  • 可是儘可能遵照。
  • obj.123會報錯。採用obj["123"]=789;取數據的時候也這樣console.log(obj["123"]);
  • 中括號方式更加靈活，能夠傳變量。
• 讀取對象
  • console.log(obj.name);
  • 讀取沒有的屬性，會返回undefined;
• 修改
  • obj.name= "tom";直接改就行;
• 刪除
  • delete obj.name;
• in 運算符
  • 檢查一個對象中是否含有指定的屬性，（對象中沒有，原型中有的話也會返回true）返回true或fasle。console.log("test2" in obj);

基本數據類型和引用數據類型

• 基本數據類型
  • 直接保存在棧內存中，每一個值修改不互相改變值。

    

• 對象
  • 保存在堆內存中

    

  • 每建立一個新的對象，
  • 對象保存的是地址。

    

字面量方法

函數

• 判斷數字是否是偶數

function isOu(){
    return num%2==0;
    //這個式子的返回值就是ture或者fasle，因此能夠直接寫return。
}
複製代碼

• console.time函數 console.time('jishi'); 中間寫運行的函數， console.timEnd('jishi'); 最後輸出所用時間。
• 函數返回值類型 返回值是任意類型。包括函數和對象。

當即執行函數

• 調用一次就不用了。
• function(){};像這樣的匿名函數直接調用會報錯，在外邊加一個（）就不會報錯了。
• 要想調用要這樣寫

  (function(){
  alert('我是當即調用函數';
  })();
  複製代碼

方法

若是一個函數做爲一個對象的屬性值，那麼這個函數是這個函數的方法。 調用函數就是調用函數的方法。

箭頭中兩個調用只有名字的區別沒有本質區別。

枚舉對象中的屬性

for in語句

var obj = {
    name : 'xiaolu';
    age : '18';
    add:'songlanbao';
}
for(var n in obj){
    //每次執行時，會將對象中的一個屬性的名字賦值給變量n。
    console.log(obj[n]);
    //此處不能寫 console.log(obj.n);由於obj嗎沒有n這個屬性，這樣寫會輸出undefined
};
複製代碼

做用域

• 一個變量的做用的範圍
• js中分爲全局和局部做用域
  • 全局做用域 在頁面打開時建立，關閉時銷燬。
  • 全局對象window能夠直接使用。
    • 在全局做用域中，建立的變量都會做爲window的屬性保存。 var a=1;console.log(window.a);
    • 建立的函數都會做爲window的方法保存。

變量的聲明提早

全部被var關鍵字生命的變量，會在全部的代碼以前被聲明，可是不會賦值。

變量尋找規則

• 先在當前做用域尋找，若是沒有則向上一級尋找，再沒有就再向上找，若是一直找到全局做用域沒找到，就報錯。ReferenceError
• 若是就想用全局的就寫window.a 就是全局的。

var a = 1;
        function fun(){
            console.log(a);
            // var a = 2;
        }
        fun();
複製代碼

上邊代碼沒有註釋的話就是undefined，有註釋就是1，由於沒有註釋的時候是聲明提早，有註釋的時候就是向外尋找變量。

• 函數聲明也會在全部代碼以前進行聲明，跟var似的。

var a = 1;
        function fun(){
            console.log(a);
            a = 2;
        }
        fun();
        console.log(a);
複製代碼

在函數中沒有寫var直接給a賦值，就是給全局做用域賦值，最終輸出爲1和2。

var e = 23;
        function fun2(e){
            //var e;
            alert(e);
        }
        fun2();
複製代碼

定義形參就至關於在函數中聲明變量，因此上邊的代碼輸出undefined

函數做用域

• 調用函數的時候建立函數做用域，函數執行完畢後，函數做用域銷燬。
• 每調用一次函數，就會建立一個函數做用域。他們相互獨立。
• 函數做用域能夠訪問全局做用域，可是全局做用域沒法訪問函數做用域。

debug

60集 火狐腳本調試

this

使用工廠方式建立對象

function creatperson(name,age,gender){
            var obj = new Object();
            obj.name= name ;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function(){
            alert(this.name);
            };
            return obj;
        }  
        var obj1=creatperson("swk",18,'nan');
        console.log(obj1);
複製代碼

輸出:

構造函數(難點)

• 使用工廠方法建立的對象都是Object類型,致使沒法區分出多種類型的對象，（例如：狗和人都是object，用的時候很差區分。）
• 構造函數建立的對象就是你起的名字。

function creatperson(name,age,gender){
            var obj = new Object();
            obj.name= name ;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function(){
            alert(this.name);
            };
            return obj;
        }  
        var obj1=creatperson("swk",18,'nan');
        console.log(obj1);//輸出的object
        function Persion(name,age,gender){
            this.name = name;
            this.age = age;
            this.geder = gender;
            this.sayName = function(){
                alert(this.naem);
            };
        }
        var per1 = new Persion('xiaolu',18,'man');
        console.log(per1);//輸出的是Persion
複製代碼

• 構造函數首字母大寫
• 經過instanceof能夠檢查一個對象是不是一個類的實例。對象 instance 構造函數
• 構造函數執行流程
  1. 馬上建立一個新的對象
  2. 將新建的對象設置爲函數中this，在構造函數中可使用this來引用新建的對象
  3. 逐行執行函數中的代碼
  4. 將新建的對象做爲返回值返回
• 使用用一個構造函數建立的對象，咱們稱爲一類對象，也將一個構造函數稱爲一個類，咱們將經過一個構造函數建立的對象，稱爲是該類的實例。
• this的狀況
  1. 當以函數調用的時候，this是window
  2. 當以方法調用時，誰調用方法this就是誰
  3. 構造函數 this就是新建立的對象

構造函數修改

構造函數每次調用都會建立一個空間，很佔內存，給他弄成全局的函數，就不會每次都建立了，每次調用就行啦。以下所示：

function Persion(name,age,gender){
            this.name = name;
            this.age = age;
            this.geder = gender;
            // this.sayName = function(){
            //     alert(this.naem);
            // };
            this.sayName = fun;
        }
        function fun(){
            alert("hello，我叫"+this.name);
        }
        var per1 = new Persion('xiaolu',18,'man');
        per1.sayName();
複製代碼

原型對象prototype

上邊的方法雖然解決了很佔內存的弊端，可是聲明的一個全局變量，這樣之後若是也建立一個一樣名字的函數的時候，就會覆蓋掉這個。因此引出了原型對象來解決這個問題。

• 咱們建立的每個函數，解釋器都會向函數中添加一個屬性prototype，
  • 這個屬性對應着一個對象，這個對象就是咱們所謂的原型對象。
• 若是函數做爲普通函數調用prototype沒有任何做用
• 以構造函數的形式調用的時候，能夠經過__proto__來訪問該屬性
• 當咱們訪問對象的一個屬性或者方法時，他會先在對象自身中尋找，若是有則直接使用，若是沒有則會去原型對象中尋找，若是找到就直接使用。沒有找到的話繼續找原型的原型，再沒有就再找，這個有幾層不必定，看你的函數是怎麼寫的了，通常狀況下是兩層 直到找到object的原型，若沒有找到就返回undefined object的原型是null，至關於沒有原型
• 之後咱們建立構造函數時，能夠將這些對象共用的屬性和方法，統一添加到構造函數的原型對象中，這樣不用分別爲每個對象添加，也不會影響到全局做用域，就可使每一個對象都具備這些屬性和方法了。
• has OwnProperty()來檢查對象自身中是否含有某個元素，不包括原型中的對象。（和 in 運算符做比較）。返回true fasle

function Persion(name,age,gender){
            this.name = name;
            this.age = age;
            this.geder = gender;
            // this.sayName = function(){
            //     alert(this.naem);
            // };
            // this.sayName = fun;
            Persion.prototype.sayName=function(){
            alert("hello，我叫"+this.name);
            }
        }
        // function fun(){
        //     alert("hello，我叫"+this.name);
        // }
       
        var per1 = new Persion('xiaolu',18,'man');
        per1.sayName();
複製代碼

toString

console.log(per);展現的是per的toString方法。會顯示[object object] 沒法復現。難受。

垃圾回收（GC）（概念）

• 當一個對象沒有任何變量或者屬性對它進行引用，此時咱們沒法操做該對象。該對象就成爲一個垃圾。垃圾多了就會佔用內存空間，致使程序運行變慢。
• js中有自動垃圾回收機制，會自動將這些垃圾從內存中銷燬
• 咱們只須要將再也不使用的對象設置爲null便可。

數組

• 數組也是對象

• 數組的存儲性能比普通對象好

• 讀取不存在的數組回返回undefined

• 獲取數組的長度

  • length返回最大索引值+1（非連續的數組回不知道有多少位）。
  • 修改長度 length=10; (若是改的數比以前的小，則把最後覺得截沒)

• 想數組最後添加元素arr[arr.length]=10;

• 建立數組

  • var arr = new Array(10,20,30);
  • 字面量方法 var arr = [1,2,3];
  • 注意：
    • 當var arr = new Array(10);表明的是建立的數組中有10個元素，都是空，
    • var arr= [10];表明的是數組中有一個元素 10

• 數組的方法

  • push（）向數組末尾添加一個或多個元素，返回新數組的長度。arr.push(1,2,3);
  • pop() 刪除數組最後一個元素，並返回刪除的元素。arr.pop()
  • unshfit() 向數組開頭添加一個或多個元素，返回新數組的長度
  • shift（）刪除數組第一個元素，返回刪除的元素

• 數組的遍歷 for循環（略）

  • forEach方法（ie8以上）
    • 須要函數做爲參數
    • 像這種函數，由咱們建立可是不禁咱們調用的，咱們稱爲回調函數。
    • 數組中有幾個元素就會循環幾回。
    • 回調函數中會傳遞三個參數：
      1. 當前正在遍歷的元素
      2. 當前索引
      3. 就是整個數組。

  var arr = ['swk','zbj','shs'];
      arr.forEach(function(a,b,c){
          console.log(a);
          console.log(b);
          console.log(c);
      });
  複製代碼

  結果：

  

• slice(start，end)

  • 截取數組中指定的元素
  • 不改變原數組
  • 參數
    • 包括開始的索引
    • 不包括結束的索引
    • 第二個參數能夠省略不寫，表示截取以後的全部。
    • 若是是負值，就是從後往前數

• splice ()

  • 刪除數組中指定的元素
  • 改變原數組
  • 參數
    • 開始位置的索引
    • 刪除的數量
    • 第三個參數 傳進來新元素，放在刪除的元素那裏。能夠第二個參數寫0，直接插入新的元素。

• 練習去除數組中重複的數據。

• concat（）

  • 鏈接兩個或多個數組，返回新數組
  • 不改變原數組

• join（）

  • 將數組轉換爲字符串
  • 不改變原數組
  • join中能夠指定一個字符串做爲鏈接符。（不指定的話默認爲，）

• reverse()

  • 反轉數組
  • 改變原數組

• sort（）

  • 對數組中的元素進行排序
  • 改變原數組，按照unicode進行排序，排序數字的時候回出現錯誤，因此要寫回調函數。
    • 回調函數：系統自動調用的函數叫回調函數
    • sort的回調函數是傳入兩個值，若是返回值>1就交換位置。

  var arr = [1,2,22,3,4,11];
      arr.sort(
          function(a,b){
              return a-b;
          }
      );
      console.log(arr);
  複製代碼

• 函數對象的方法

  • call()和apply()

• arguments

  • 是一個類數組對象
  • 判斷是否是數組用判斷或者Array.isArray(arguments)
  • 調用函數時，咱們所傳遞的實參保存在arguments中。
  • 有個callee的屬性，返回函數對象

• Date對象

  • 當前時間var d = new Date();
  • 指定時間 var d2 = new Date("12/03/2019 11:10:30");
  • getDate() 幾日
  • getDay 周幾 0爲週日
  • getTime（） 1970.1.1 到當前的毫秒數

• Math

  • 不是構造函數，不用建立對象，是工具類，拿過來直接用。
  • abs（） 絕對值
  • ceil() 向上取整
  • floor()向下取整
  • round（）四捨五入
  • round（） 生成隨機數0-1
    • 生成 x-y的隨機數？
  • max() 取最大值
  • min() 最小值
  • pow(x,y) x的y次冪
  • sqrt() 開方

• 包裝類

  • 瀏覽器底層本身用的，開發的時候不會用，目的是臨時將基本數據類型轉換爲對象，就能夠給基本數據類型加屬性了，好比num.tostring();

• 字符串相關方法

  • 字符串是以數組的形式存放的，因此數組能用的屬性他都能用。
  • str.charAt(2); 取下標爲2的字符 至關於str[6];
  • charCodeat(2); 返回unicode編碼
  • String.formChartCode（） 根據字符編碼獲取字符(經過string函數調用，特殊)
  • concat（） 字符串拼接
  • indexOf（）
    • 檢索一個字符串中有沒有指定內容，返回第一次出現的索引，沒有找到返回-1
    • 第二個參數是從第幾個開始數。
  • lastIndexOf（） 從後往前找
  • slice（） 和數組同樣，包括開始，不包括結束。
  • substring() 和slice相似，
    • 不能傳負數 寫負數至關於0
    • 自動會把數組的參數從小到大排。
  • sunstr（） 不建議使用 第一個參數是開始位置，第二個是截取的長度。
  • aplit() 拆分字符串爲數組，參數寫根據什麼拆。
  • toUpperCase() 轉爲大寫
  • toLowerCase() 轉爲小寫

• 正則表達式

  • 用於定義字符串規則，檢查一個字符串是否符合規則。
  • 建立正則表達式對象
    • var reg = new RegExp("正則表達式","匹配模式");
    • var reg = /正則表達式/匹配模式;
  • 匹配模式爲
    • i 忽略大小寫
    • g 全局匹配
  • 使用reg.test(arr);來檢查arr這個字符串是否符合reg這個正則
  • |表示或 /a|b/a或b
  • [] /[a-z]/ 也是或的意思
    • /[A-z]/表示任意字母
    • /a[bde]c/ abc.adc.aec
    • /[^ac]/ 除了ac
    • /[^0-9]/ 除了數字
  • 字符串和正則相關的方法
    • splice()
      • 拆字符串爲數組

    var arr = "1a2b3c4d5f6g7h";
    var result = arr.split(/[A-z]/);
    console.log(result);//["1", "2", "3", "4", "5", "6", "7", ""];
    複製代碼

    • search() 字符串中是否含有指定的內容。返回第一次出現的索引。
      • search(/a[bef]c/);查找有沒有abc或aec或afc 即便設置全局匹配也沒用。只能返回找到的第一個。
      • match(/[a-z]/ig)提取符合要求的字符。
        • 默認狀況只會找到第一個
        • 把正則寫成全局匹配模式，就會找全。
        • 返回值爲數組
    • replace('舊值'，'新值'); 將字符串中指定內容替換爲新內容。默認只替換第一個。
    • repace(/[a-z]/ig,"-");
  • 經過量詞設置出現的次數。/a{3}/;
  • /ab{3}/ 三個b
  • /ab{1,3}c/ ac中間有1到3個b就行（含1和3）
  • /ab{3,}c/ ac中間有3次以上b。
  • + 表示至少一個
  • * 有沒有都行至關於{0,}
  • ? 0個或者1個 {0,1}
  • ^表示是否開頭（注意和中括號中的區分）/^a/
  • $ 表示結尾/a$/
  • /^abc$/ 同時使用，要求必須徹底符合。
  • /^a|a$/ 表示a開頭或者a結尾
  • 手機號練習

  var phone = "13681234560";
      var reg = /^1[3-9][0-9]{9}$/;
      result = reg.test(phone);
      console.log(result);
  複製代碼

  • 檢查字符串是否是有.
  • /./ .表示任意字符
  • 轉義字符\
    • 字面量方法：/\./
    • 構造函數方法: reg = new regExp("\\.");要寫兩個\,由於字符串中的\也是轉義字符。
  • \w 字母數字下劃線
  • \W 除了字母數字下劃線
  • \d 數字
  • \s 空格
  • \b 單詞邊界 /\babc\b/用於檢測abc是獨立單詞，若是是sdabcsd就錯了。
  • 練習去除開頭和結尾的空格

  var arr4 = " aaa aa ";
      console.log(arr4);
      result = arr4.replace(/^\s*|\s*$/,"");
      console.log(result);
  複製代碼

  • 電子郵件練習 fasdf.12324_fasd@fsdf.com
    • 任意數字字母下劃線 \w+
    • .和任意字母下劃線。\.[A-z0-9]
    • @ @
    • 任意字母[A-z]*
    • .和任意字母\.[A-z]*$
    • /^\w*(\.[A-z0-9])*@[A-z0-9]*(\.[A-z]+){1,2}$/

DOM

事件

就是用戶和瀏覽器之間的交互行爲。
兩種方法：
1. 直接在HTML中寫屬性。
2. 分離出來在js中寫。
複製代碼

文檔的加載

自上而下的加載。
能夠用`window.onload=function(){}`來綁定頁面加載完成後再執行js代碼。
複製代碼

dom 的方法

1. getElementById();
   返回元素
2. getElementsByTagName() 返回數組
3. getElementsByName() 返回數組

• innerHTML 用於獲取元素內部的html代碼，若是元素沒有內部，那就無法獲取。eg：input是自結束標籤，他就沒有。想要獲取元素中的屬性，直接元素.屬性名。
• 由於class是保留關鍵字，因此不能.class要用className。
• 練習圖片切換

<style>
        div {
            width: 500px;
            height: 332px;
            margin: 0 auto;
        }
        div:nth-child(2) {
            float: right;
        }

    </style>
    <script>
        window.onload=function(){
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var img = document.getElementById("img");
            var index = 1;
            next.onclick = function(){
                index++;
                if(index>5){
                    index=1;
                }
                img.src = "./img/"+index+".jpg";
            }
            prev.onclick = function(){
                index--;
                if(index<1){
                    index=5;
                }
                img.src = "./img/"+index+".jpg";
            }
        }
    </script>
</head>
<body>
    <div>
         <img id="img" src="./img/1.jpg" alt="">
    </div>
    <div>
        <button id="prev">
            <
        </button>
        <button id="next">
            >
        </button>
    </div>
</body>
複製代碼

4. 獲取元素節點的子節點

   1. getElrmentsByTagName() 獲取當前節點的指定標籤名後代節點。
   2. childNodes 表示當前節點的全部子節點。沒有括號會獲取文本節點、空格、回車。ie8不會將空白當成子節點
   3. firstChild 第一個子節點 會將空白當成子節點 返回text
   4. firstElementChild 不會獲取空白。ie8不支持
   5. lastChild 最後一個子節點

5. 獲取父節點和兄弟節點

   1. parentNode 父節點
   2. previousSibling 前一個兄弟節點
   3. nextSibling 後一個兄弟節點

• innerText 獲取元素中的text文本內容

<script type="text/javascript">
			function Myclick(idStr,fun){
					var btn = document.getElementById(idStr);
					btn.onclick = fun;
				};
			window.onload =function(){
				//定義通用點擊函數
			
				//查找#bj節點
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					var beijing = document.getElementById("bj");
					alert(beijing.innerHTML);
				}
				//查找全部li節點
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					var lis = document.getElementsByTagName("li");
					for(var i=0;i<lis.length;i++){
						console.log(lis[i].innerHTML);
					}
				}
				//查找name=gender的全部節點
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					var gender = document.getElementsByName("gender");
					for(var i=0;i<gender.length;i++){
						console.log(gender[i].value);
					}
				}
				//查找#city下全部li節點
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					var city = document.getElementById("city");
					var citylis = city.getElementsByTagName("li");
					for(var i=0;i<citylis.length;i++){
						console.log(citylis[i]);
					}
				}
				//返回#city的全部子節點
				var btn05 = document.getElementById("btn05");
				btn05.onclick= function(){
					var city = document.getElementById("city");
					console.log(city.childNodes);
				}
				//返回#phone的第一個子節點
				var btn06 = document.getElementById("btn06");
				btn06.onclick=function(){
					var phone = document.getElementById("phone");
					console.log(phone.firstChild);
					console.log(phone.firstElementChild);
				}
				//返回#bj的父節點
				Myclick("btn07",function(){
					var beijing = document.getElementById("bj");
					console.log(beijing.parentNode);
				});
				//返回#android的前一個兄弟節點
				Myclick("btn08",function(){
					var android = document.getElementById("android");
					console.log(android.previousSibling);
					console.log(android.previousElementSibling.innerText);
				});
				//讀取#username的value屬性值
				Myclick("btn09",function(){
					var username = document.getElementById("username");
					console.log(username.value);
					//設置#username的value屬性值
				
				});
				Myclick("btn10",function(){
					var username = document.getElementById("username");
					
					//設置#username的value屬性值
					username.value = "hello world";
					console.log(username.value);
				});
				
				//返回#bj的文本值
				Myclick("btn11",function(){
					var beijing = document.getElementById("bj");
					console.log(beijing.innerHTML);
					console.log(beijing.firstChild.nodeValue);//這種麻煩
				});

			}				
				
				
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜歡哪一個城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>東京</li>
					<li>首爾</li>
				</ul>

				<br>
				<br>

				<p>
					你喜歡哪款單機遊戲?
				</p>

				<ul id="game">
					<li id="rl">紅警</li>
					<li>實況</li>
					<li>極品飛車</li>
					<li>魔獸</li>
				</ul>

				<br />
				<br />

				<p>
					你手機的操做系統是?
				</p>

				<ul id="phone">
					<li>IOS</li>
					<li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj節點</button></div>
			<div><button id="btn02">查找全部li節點</button></div>
			<div><button id="btn03">查找name=gender的全部節點</button></div>
			<div><button id="btn04">查找#city下全部li節點</button></div>
			<div><button id="btn05">返回#city的全部子節點</button></div>
			<div><button id="btn06">返回#phone的第一個子節點</button></div>
			<div><button id="btn07">返回#bj的父節點</button></div>
			<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
			<div><button id="btn09">返回#username的value屬性值</button></div>
			<div><button id="btn10">設置#username的value屬性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
複製代碼

dom 的增刪改

1. removeChild() 刪除子節點 父節點.removeChild("要刪除的節點")
2. creatElement() document.creatElement() 建立元素節點,參數是 標籤名 將建立好的對象返回
3. createTextNode()
4. appendChild() 把新的子節點添加到指定節點父節點.appendChild(子節點);
5. insertBefore() 在指定的子節點前面插入新的子節點父節點.insertBefore(新節點,舊節點);
6. repalceChild() 替換子節點

<script type="text/javascript">			
			window.onload = function() {
				//建立一個"廣州"節點,添加到#city下
				myClick("btn01",function(){
					var li = document.createElement("li");
					var gz = document.createTextNode("廣州");
					// console.log(li.append("廣州"));
					li.append(gz);
					document.getElementById("city").append(li);
					// 簡便方法（利用innerHtml）可是原理是先刪除後增長，若是其中的元素綁定了元素，那麼綁定就會失效。
					document.getElementById("city").innerHTML += "<li>廣州</li>";

					// 折中方法
					var li = document.createElement("li");
					li.innerHTML = "廣州";
					city.appendChild(li);
				});
				//將"廣州"節點插入到#bj前面
				myClick("btn02",function(){
					var li = document.createElement("li");
					var gz = document.createTextNode("廣州");
					li.append(gz);
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					city.insertBefore(li,bj);
				});
				//使用"廣州"節點替換#bj節點
				myClick("btn03",function(){
					var bj = document.getElementById("bj");
					var li = document.createElement("li");
					var gz = document.createTextNode("廣州");
					var city = document.getElementById("city");
					li.append(gz);
					city.replaceChild(li,bj);
				});
				//刪除#bj節點
				myClick("btn04",function(){
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					// city.removeChild(bj);
					// 自殺方法
					bj.parentNode.removeChild(bj);
				});
				//讀取#city內的HTML代碼
				myClick("btn05",function(){
					
					var city = document.getElementById("city");
					console.log(city.innerHTML);
				});
				//設置#bj內的HTML代碼
				myClick("btn06",function(){
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					bj.innerHTML = "京北";
				});
			};
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}	
		</script>
複製代碼

dom 的添加刪除記錄

例子：

點擊刪除就會刪除一行。 具體操做：

1. 看結構，知道要刪除的是tr
2. 找delete和tr的關係 tr是delete的爺爺
3. 找到tr
4. tr.parentNode.removeNode(tr) 完成刪除

• confirm(""); 帶取消和肯定的彈窗。

<script type="text/javascript">
	window.onload=function(){
		var allA = document.getElementsByTagName("a");
		for(var i=0;i<allA.length;i++){
			allA[i].onclick = function(){
				var tr = this.parentNode.parentNode;
				var name = tr.firstElementChild.innerText;
				if(confirm("確認刪除"+name+"麼？")){
					tr.parentNode.removeChild(tr);
				}
				return false;//取消默認返回值
			};
		};
	};
</script>
複製代碼

添加信息：

思路：

1. 獲取提交按鈕
2. 獲取三個文本框
3. 添加到tr中

var addEmpButton = document.getElementById('addEmpButton');
		addEmpButton.onclick= function(){
			var empName = document.getElementById("empName");
			var email = document.getElementById("email");
			var salary = document.getElementById("salary");
			var employeeTable = document.getElementById("employeeTable");
			var tr = document.createElement("tr");
			console.log(empName);
			tr.innerHTML="<td>"+empName.value+"</td>"+
						"<td>"+email.value+"</td>"+
						"<td>"+salary.value+"</td>"+
						"<td><a href='javascript:;'>Delete</a></td>";
			var tbody = document.getElementsByTagName("tbody")[0];
			tbody.appendChild(tr);
複製代碼

• 函數執行順序問題

<script>
        var lis = document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            alert("for循環"+i);
            lis[i].onclick = function(){
                alert("響應函數"+i);
            };
        };        
    </script>
複製代碼

先執行for循環，執行完了，再執行相應函數，相應函數無論怎麼點擊都是隻顯示 3 。

dom操做內聯樣式（css）

1. 修改語法：元素.style.樣式名 = 樣式值;

• css中有-，這在js中不合法，要改成駝峯命名，eg:background-color => backgroundColor
• 這個方法改的是內聯樣式。
• 若是在樣式中寫了！important ，用js就不能覆蓋這個啦。因此儘可能不要加！important。

2. 讀取元素樣式
   1. 讀取內聯樣式 元素.style.樣式名
   2. 讀取當前顯示的樣式元素.currentStyle.樣式名 只有ie支持
      • 沒有設置width的時候返回width會是auto；
   3. getComputedStyle(要獲取樣式的元素,傳遞僞元素（通常寫null）） ie9以上 返回對象
      • 獲取的時候用返回的對象.屬性
      • 沒有設置width的時候返回width是真實的寬度。
   • 以上兩種方法讀取的樣式是隻讀的，不能修改。修改只能經過style。
   • 兼容性問題
     • 由於ie8和其餘的不同。因此寫一個判斷，若是有getComputedStye的話就運行，若是沒有的話就用currentStyle來運行。

     if(window.getComputedStyle){
     //此處的這個window必需要加
         var width = getComputedStyle(obj,null).width;
     }else{
         var width = currentStyle.width;
     };
     複製代碼

     • window要加的緣由：若是不加window那麼這個getComputedStyle是個函數，若是找不到這個函數那就會報錯，他以後的代碼都不會執行了，若是加上window那這個個getComputedStyle就是一個屬性，若是找不到的話就會返回undefined。

dom 其餘樣式相關的屬性

如下屬性得返回值都不帶px

• clientWidth、clientHeight 獲取的是可見寬高，不帶px，返回（內容區+內邊距）。
• offsetWidth、offsetHeight獲取整個的寬度，包括內外邊距和邊框。
• offsetParent 獲取離當前元素最近的開啓了定位的父元素
• offsetLeft offsetTop 當前元素相對於其定位元素的水平\垂直偏移量
• scrollHeight 獲取整個滾動區域的高度。包括被overflow:hidded藏起來的。
• scrollLeft 獲取水平滾動條滾動的距離。
• scrollHeight - scrollTop == clientHeight 時說明滾動條到底啦. eg:

<script>
        var p = document.getElementById("p");
        p.onscroll=function(){
            var c = document.getElementById("c");
            if(p.scrollHeight-p.scrollTop == p.clientHeight){
                
                c.disabled = false;
            };
            c.onclick=function(){
                if(c.checked){
                var z = document.getElementById("z");
                z.disabled = false;
                }
            };
            
        };
        
    </script>
複製代碼

事件對象

eg：顯示鼠標的座標

<script>
        var area = document.getElementById("area");
        var show = document.getElementById("show");
        area.onmousemove=function(e){
            var x = e.clientX;
            var y = e.clientY;
            show.innerHTML = "X:"+x+" Y:"+y;
        };
    </script>
複製代碼

• onmousemove 鼠標移動
• 事件對象
  • 當函數響應函數觸發時，瀏覽器每次都會將一個事件對象最爲實參傳遞進響應函數，在事件對象中封裝了當前事件的一切信息。
  • clientX 獲取鼠標指針的水平座標
• IE8中，響應函數被觸發時，瀏覽器不會傳遞事件對象，他是將對象做爲window對象的屬性保存的。用window.e,
  • 解決辦法1：在前邊加一個判斷，if(!e){e=window.e;}
  • 解決辦法2: 在前邊加上e = e || winsow.e;

div跟隨鼠標移動

<style>
        #box{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById("box");
        document.onmousemove=function(e){
            var left = e.clientX+"px";
            var top = e.clientY+"px";
            box.style.left = left;
            box.style.top = top;
        };
    </script>
</body>
複製代碼

• clientY 相對於可見窗口的高度，而div是相對於頁面定位的。若是頁面大於可見的窗口（出現滾動條），那就會出現誤差。
• pageY 相對於頁面的高度，用這個替換上邊的能夠去掉誤差。Ie8不兼容
• ie8解決辦法： 加上scrollTop的長度就行啦，document.documentElement.scrollTop;

事件的綁定

• 對象.事件 = 函數 這種方式只能綁定一次，綁定屢次的話第二次就會覆蓋第一次。
• addEventListener("click",function(){},false); 這種方式能夠綁定多個。ie8不支持
  • 參數1 事件的字符串，不要on
  • 回調函數，當事件觸發時該函數會被執行
  • 是否在捕獲階段觸發事件，布爾值，通常爲false
  • 若是返回this的話 this是綁定的對象。
• ie8 attachEvent("onclick",function(){}); 只有兩個參數 要on；可是後綁定先執行。返回的this是window
• 定義函數用來爲指定元素綁定響應函數

<script>
        function bind(obj,eventStr,callback){
            if(obj.addEventListener){
               //正常瀏覽器
               obj.addEventListener(eventStr,callback,false);
            }else{
               //兼容ie8
               obj.addEventListener("on"+eventStr,function(){
                    callback.call(obj);
                });
            }
        };
    </script>
複製代碼

拖拽

1. 按下鼠標，開始拖拽 onmousedown
2. 當鼠標移動時，跟隨鼠標移動 onmosemove
3. 當鼠標鬆開的時候，被拖拽元素不動了onmouseup

<script>
        var box = document.getElementById("box");
        box.onmousedown=function(){           
            document.onmousemove= function(e){
                e = e || window.e;
                var left = e.clientX;
                var top = e.clientY;
                box.style.left = left + "px";
                box.style.top = top + "px";
            };
            var song = document.onmouseup = function(){
            //這個用document是由於 若是用了box的話，當鼠標被擋住就不能固定了。（好比第二個盒子在第一個盒子上邊）
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    </script>
複製代碼

改進，以上的拖拽是隻能鼠標在box的左上角。

解決方法就是將box向左上挪一些，就是原本的top和left減去鼠標到box邊的距離。

• 瀏覽器有默認的拖拽行爲，取消它能夠防止拖拽異常。return false;對ie8不起做用

<script>
        var box = document.getElementById("box");
        box.onmousedown=function(e){    
            // 求出鼠標偏移量
            var x = e.clientX - box.offsetLeft;
            var y = e.clientY - box.offsetTop;
            document.onmousemove= function(e){
                e = e || window.e;
                var left = e.clientX;
                var top = e.clientY;
                box.style.left = left- x + "px";
                box.style.top = top-y + "px";
            };
            var song = document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    </script>
複製代碼

• setCapture()這個只有ie8有。做用是強制捕獲，若是是點擊的話，無論點誰，都是點擊它。

滾輪事件

eg：隨着鼠標滾輪滾動，box變長變短

• onmousewheel 火狐不支持要用DOMMouseScroll,用addEventListrner()綁定
  • e.wheelDelta 能夠獲取滾輪方向，火狐中使用e.detail
• 當滾輪滾動的時候，若是瀏覽器有本身的滾動條，就會兩個都滾動，能夠取消默認行爲。

<script>
        var box = document.getElementById("box");
        box.onmousewheel = function(e){
            if(e.wheelDelta > 0){
                // box.style.height += 10+"px";
                // 不能這樣寫，由於css屬性是外聯的，這樣讀取不到。
                box.style.height = box.clientHeight + 10 +"px";
            }else{
                box.style.height = box.clientHeight - 10 +"px";
            }
        };
    </script>
複製代碼

鍵盤事件

• onkeydown onkeyup (onkeydown按住不鬆手會連續觸發) 綁定給能夠獲取焦點的對象中，（例如輸入框） 或者document。
• keyCode 獲取按鍵編碼
• altKey ctrlKey shiftKey 判斷是否被按下

Bom瀏覽器對象模型，操做瀏覽器

• Window 表明的是瀏覽器的窗口，也是網頁中的全局對象
• Navigator 表明的是當前瀏覽器的信息，識別當前瀏覽器是什麼
  • 因爲歷史緣由，大部分屬性已經識別不了了。
  • 通常使用userAgent來判斷瀏覽器信息 可是ie11挺缺德，刪除了ie相關的內容
  • 經過ie特有的屬性來判斷是不是ie
• Location 地址欄 獲取瀏覽器地址欄信息和操做跳轉信息
  • 打印地址
  • 修改 而後自動跳轉
  • assign() 和直接修改location同樣
  • reload() 從新加載
    • 參數若爲true 則強制清空緩存
• HIstory 歷史記錄

  • 只能操做向前或向後，不能訪問具體的歷史記錄，只在當成有效

  • history.back() 回退上一個頁面

  • forward()

  • go() 1表示向前一個頁面 2表示向前2個頁面 -1 -2

• Screen 屏幕 顯示器相關信息 移動端用的多
• 後邊四個都是做爲window的屬性保存的，由於window是全局的，能夠經過winsow.navigator來使用，也能夠直接使用。

定時器

• setInterval(); 每隔一段時間執行一次
  • 參數1 function（）{}
  • 參數2 每隔多長時間 單位毫秒
  • 返回一個number 做爲定時器的位移標識
• clearInterval(timer); 關閉定時器
• 自動切換圖片的練習

<script>
        var imgArrs = [];
        for(var i=1;i<= 5;i++){
            imgArrs.push("./img/"+i+".jpg");

        };        
        console.log(imgArrs);
        var index = 0;
        setInterval(function(){
            var img = document.getElementById("img");
            img.src = imgArrs[index];
            index++;
            if(index>=5){
                index=0;
            }
        },1000);
    </script>
複製代碼

延時調用

• setTimeout 只會執行一次。
• clearTimeout 關閉延時調用。

定時器應用

輪播圖

• 界面框架

如下是代碼，爲了界面排版，放的壓縮版本的。能夠到這個網站解壓一下。 代碼壓縮

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>*{margin:0;padding:0}#outer{width:520px;height:333px;margin:50px auto;background-color:aqua;padding:10px 0;position:relative;overflow:hidden}#imgList{list-style:none;position:absolute;left:0}#imgList li{float:left;margin:0 10px}#nav{position:absolute;bottom:15px}#nav a{float:left;width:15px;height:15px;background-color:red;margin:0 5px;opacity:.5;filter:alpha(opacity=50)}#nav a:hover{background-color:black}</style><script>window.onload=function(){var imgList=document.getElementById("imgList");var imgArr=document.getElementsByTagName("img");imgList.style.width=520*imgArr.length+"px";var nav=document.getElementById("nav");var outer=document.getElementById("outer");nav.style.left=(outer.offsetWidth-nav.offsetWidth)/2+"px";var index=0;var allA=document.getElementsByTagName("a");allA[index].style.backgroundColor="black"};</script></head><body><div id="outer"><ul id="imgList"><li><img src="./img/1.jpg"alt=""></li><li><img src="./img/2.jpg"alt=""></li><li><img src="./img/3.jpg"alt=""></li><li><img src="./img/4.jpg"alt=""></li><li><img src="./img/5.jpg"alt=""></li></ul><!--導航--><div id="nav"><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div></div></body></html>
複製代碼

• 功能實現

//綁定單擊響應函數
        for(var i = 0;i<allA.length;i++){
            allA[i].num=i;
            allA[i].onclick = function(){
                index = this.num;
                imgList.style.left = index*-520+"px";
                //修改正在選中的方塊的顏色
                setA();
            };
           
        };

        // 建立一個方法設置選中的a
        function setA(){
          for(var i=0;i<allA.length;i++){
            allA[i].style.backgroundColor="";
            //內聯樣式調成空串，防止覆蓋hover。
          }
          allA[index].style.backgroundColor = "black";
        };
複製代碼

• 自動切換 自動切換設置好之後，他到最後一張的時候，再轉下一張的時候回回退到第一張，效果很差，解決辦法：

1. 再最後加一張和第一張同樣的圖片
2. 偷樑換柱，把最後一張一下換成第一張，肉眼沒法察覺。 此時兩個動畫同時執行，很難受。

完成代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    #outer {
      width: 520px;
      height: 333px;
      margin: 50px auto;
      background-color: aqua;
      padding: 10px 0;
      position: relative;
      overflow: hidden
    }

    #imgList {
      list-style: none;
      position: absolute;
      left: 0
    }

    #imgList li {
      float: left;
      margin: 0 10px
    }

    #nav {
      position: absolute;
      bottom: 15px
    }

    #nav a {
      float: left;
      width: 15px;
      height: 15px;
      background-color: red;
      margin: 0 5px;
      opacity: .5;
      filter: alpha(opacity=50)
    }

    #nav a:hover {
      background-color: black
    }
  </style>
  <!-- 引入tools -->
  <script type="text/javascript" src="js/tools.js"></script>
  <script>
    window.onload = function () {
      var imgList = document.getElementById("imgList");
      var imgArr = document.getElementsByTagName("img");
      imgList.style.width = 520 * imgArr.length + "px";
      var nav = document.getElementById("nav");
      var outer = document.getElementById("outer");
      nav.style.left = (outer.offsetWidth - nav.offsetWidth) / 2 + "px";
      var index = 0;
      var allA = document.getElementsByTagName("a");
      allA[index].style.backgroundColor = "black"


      var timer;
      //綁定單擊響應函數
      for (var i = 0; i < allA.length; i++) {
        allA[i].num = i;
        allA[i].onclick = function () {
           clearInterval(timer);   
          index = this.num;
          // imgList.style.left = index*-520+"px";
          //修改正在選中的方塊的顏色
          setA();
          // 使用move函數
          move(imgList, "left", -520 * index, 20, function () {
              // 動畫執行完畢，開啓自動播放
              autoChange();
          });
        };

      }
      autoChange(); //開啓自動切換

      // 建立一個方法設置選中的a
      // 將選中的設置爲紅色，其餘的設置爲黑色。
      function setA() {
        //判斷當前索引是不是最後一張
        if(index>=imgArr.length-1){
          index = 0 ;
          // 此時顯示的是最後一張圖，和第一張長得同樣，
          // 經過css把最後一張切換成第一張。偷樑換柱
          imgList.style.left = 0;
        }
        for (var i = 0; i < allA.length; i++) {
          allA[i].style.backgroundColor = "";
          //內聯樣式調成空串，防止覆蓋hover。
        }
        allA[index].style.backgroundColor = "black";
      };

      function autoChange(){
        //開啓定時器，定時切換
        timer =  setInterval(function(){
          //索引自增
          index++;
          
          index %=imgArr.length;

          move(imgList, "left", -520 * index ,20, function() {
            // 修改導航按鈕
            setA();
          });
        }, 3000);
      };

    };

    // 自動切換圖片 建立函數調整自動切換
  </script>
</head>

<body>
  <div id="outer">
    <ul id="imgList">
      <li>
        <img src="./img/1.jpg" alt=""></li>
      <li>
        <img src="./img/2.jpg" alt=""></li>
      <li>
        <img src="./img/3.jpg" alt=""></li>
      <li>
        <img src="./img/4.jpg" alt=""></li>
      <li>
        <img src="./img/5.jpg" alt=""></li>
        <li>
          <img src="./img/1.jpg" alt=""></li>
        
    </ul>
    <!--導航-->
    <div id="nav">
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
    </div>
  </div>
</body>

</html>
複製代碼

js類的操做

• 能夠經過修改元素的class來改樣式 box.className = "新class"
• 既想要舊的css也想要新的css box.className += " 新class";//注意空格
• 定義一個函數，想其中指定元素添加class屬性值。

function addClass(obj,cn){
    //檢查obj中是否有cn
    if(!hasClass(obj,cn)){
        obj.className+=""+cn;
        //加空格是由於 添加class屬性值的時候 兩個屬性之間有空格，兩個屬性才能都顯示。
    }
};
複製代碼

• hasClass判斷一個元素中是否含有指定的class屬性值，有就返回true，沒有返回false

function hasClass(obj,cn){
    var reg = new RegExp("\\b"+cn+"\\b");
    //正則，\b是判斷是否是一個單詞。
    return reg.test(obj.className);
};
複製代碼

• 刪除一個元素中的指定的class屬性

function removeClass(obj , cn){
				//建立一個正則表達式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//刪除class
				obj.className = obj.className.replace(reg , "");
				
			}
複製代碼

• toggleClass 能夠用來切換一個類若是元素中具備該類，則刪除若是元素中沒有該類，則添加

function toggleClass(obj , cn){
				
				//判斷obj中是否含有cn
				if(hasClass(obj , cn)){
					//有，則刪除
					removeClass(obj , cn);
				}else{
					//沒有，則添加
					addClass(obj , cn);
				}
				
			}
複製代碼

JSON

• JSON 是一個特殊格式的字符串，這個字符串能夠被任意的語言所識別，而且能夠轉換爲任意語言中的對象，JSON在開發中主要用來數據的交互
• json分類
  • 對象{}
  • 數組[]
• JSON容許的值
  1. 字符串
  2. 數值
  3. 布爾值
  4. null
  5. 對象
  6. 數組
• json --> js對象
  • JSON.parse()
    • 能夠將以JSON字符串轉換爲js對象
    • 它須要一個JSON字符串做爲參數，會將該字符串轉換爲JS對象並返回
• JS對象 ---> JSON
  • JSON.stringify()
    • 能夠將一個JS對象轉換爲JSON字符串
    • 須要一個js對象做爲參數，會返回一個JSON字符串
• eval()
  • 這個函數能夠用來執行一段字符串形式的JS代碼，並將執行結果返回
  • 若是使用eval()執行的字符串中含有{},它會將{}當成是代碼塊 若是不但願將其當成代碼塊解析，則須要在字符串先後各加一個()
  • eval()這個函數的功能很強大，能夠直接執行一個字符串中的js代碼， 可是在開發中儘可能不要使用，首先它的執行性能比較差，而後它還具備安全隱患