函數(shù)變量的提升

• 函數(shù)內(nèi)部變量提升: 函數(shù)內(nèi)部使用變量, 默認(rèn)情況下, 函數(shù)會把下面變量它的聲明提升到函數(shù)的最上邊
• 結(jié)論: 同一作用域下, 都存在變量的提升
• 注意: 變量的提升只會提升變量的聲明, 變量的賦值沒變

頂層函數(shù)(全局變量)

• parseInt(): 截取字符串(以數(shù)字開頭)的整數(shù)部分, 再轉(zhuǎn)換number類型

• parseFloat(): 從字符串中截取浮點數(shù),并且會轉(zhuǎn)換成number類型

  var a=1.2000, b=0.123456;
  console.log(a, b);   //a=1.2, b=0.123456
  

• toFixed(x):默認(rèn)返回字符串類型, 保留x位小數(shù)

  • 不支持?jǐn)?shù)字字符串

數(shù)據(jù)類型轉(zhuǎn)換

• Boolean(): 轉(zhuǎn)換成布爾值
• toString(): 轉(zhuǎn)換成字符串
• String(): 強制轉(zhuǎn)換成字符串null,undefined也可以
• Number(): 面向字符串轉(zhuǎn)換成數(shù)字, 把字符串傳到括號里

Math對象

• Math.pow(x, y): 返回x的 y次冪
• Math.random(); 返回(0, 1)的隨機數(shù)
• Math.round(); 四舍五入的整數(shù)
• Math.ceil(.6); 向上取整. ceil:天花板的意思
• Math.floor(.6); 向下取整. floor: 地板的意思
• Math.abs(-4); 求絕對值
• Math.max(x, y, z); 返回最大值
• Math.min(x, y, z); 返回最小值

js引入方式

• 外鏈?zhǔn)?行內(nèi)式 內(nèi)嵌式
• 無優(yōu)先級 因為js引入默認(rèn)是行內(nèi)式書寫 后寫的會覆蓋先寫的

document.getElementsByTayName()通過標(biāo)簽名獲取文檔的元素們

• 參數(shù): 標(biāo)簽名 字符串
• 返回值: 偽數(shù)組, 存儲的根據(jù)標(biāo)簽名獲取全部標(biāo)簽
  • 偽數(shù)組, 有些數(shù)組的功能不能用
• 想要獲取誰的標(biāo)簽就用點語法點誰
  • eg: 獲取ul里的所有l(wèi)i標(biāo)簽: ul.getElementsByTagName('li');

事件的認(rèn)識以及使用

• 事件的三要素
  • 事件源: 事件發(fā)生在誰身上
  • 事件屬性: 發(fā)生了什么
  • 事件指令: 觸發(fā)事件后要做的事情
• 應(yīng)用: 當(dāng)觸發(fā)onmouseover事件(事件會在鼠標(biāo)指針移到指定的對象時發(fā)生)時切換圖片, 當(dāng)觸發(fā)onmouseout事件時切換回原來的照片

換膚案例

• 搭建界面: 例如淘寶產(chǎn)品展示圖
• 綁定事件:
  • 1.點擊事件函數(shù)封裝-每張圖點擊事件(或者使用onmouseover事件), 切換盒子的背景圖
  • 2.for循環(huán)封裝-獲取圖片標(biāo)簽的數(shù)組, 每張圖實現(xiàn)函數(shù)調(diào)用
  • 可以進(jìn)一步把1.步驟封裝到2.步驟里
• 解決思路:
  • 先實現(xiàn)功能
  • 看下代碼, 重復(fù)性使用調(diào)用 能否封裝
  • 封裝: 哪些代碼不變, 變化的當(dāng)做參數(shù)傳過來
  • 驗證代碼是否正確, 可執(zhí)行性

window.onload文檔加載完成后執(zhí)行

• script標(biāo)簽一般放在head標(biāo)簽里或者放在body結(jié)束標(biāo)簽前
• 如果把script代碼放在head中會導(dǎo)致功能失效
  • 原因: 瀏覽器是自上而下解析文檔時啤覆，遇到script標(biāo)簽時會停止渲染頁面磷箕，直到加載斜脂，解析，執(zhí)行js完成。
  • 解決方法: 把script代碼放在window.onload事件中. 只要窗口加載完成, 就會觸發(fā)這個方法的調(diào)用

數(shù)組

• 定義: 數(shù)組可以存儲大量的數(shù)據(jù), 并且這些數(shù)據(jù)是按一定順序排列
• 格式: var arr = new Array(1,2,3);
  • 簡寫var arr = [1,2,3]
  • 索引: 角標(biāo), 數(shù)組默認(rèn)角標(biāo)從0開始.
• 數(shù)組取某一元素值
  • 格式: 數(shù)組[索引]. arr[0]的值就是1,以此類推
• 往數(shù)組中存值(可以是不同類型的數(shù)據(jù))
  • 格式: 數(shù)組[索引]=44;
• 數(shù)組的長度, 數(shù)組元素的個數(shù)
  • arr.length;
• 數(shù)組越界問題, 獲取元素超出了數(shù)組的范圍
  • 否則值為undefined
• 數(shù)組遍歷結(jié)合for循環(huán) , 案例如下:

  • 打印數(shù)組元素

      for(var i=0; i< arr.length; i++){
          console.log(arr[i]);    //分別打印出1,2,3
      }
    

  • 隔行變色

  • 全選 反選 不選

    • 界面搭建步驟

      • 獲取3個按鈕的標(biāo)簽數(shù)組, 獲取全部input單選框的標(biāo)簽數(shù)組
      • 全選按鈕點擊事件中, 通過for循環(huán)設(shè)置所有input-checked屬性為false. 反選則反之
      • 不選按鈕點擊事件中, 通過for循環(huán)將全部input-checked屬性取非值

    • 代碼實現(xiàn)

         //全選
         btn[0].onclick = function (){
             com(true);
         }
          //不選
         btn[1].onclick = function(){
             com(false);
         }
         //反選
         btn[2].onclick = function(){
            for(var i = 0; i<oinput.length; i++){
                oinput[i].checked = !oinput[i].checked; //oinput標(biāo)簽數(shù)組別忘記索引
            }
         }
         //全選 不選公共函數(shù)
         function com(flag){
            for(var i = 0; i<oinput.length; i++){
                oinput[i].checked = flag;
            }
         }