webAPI

00-操作圖片

1. 知識點-獲取圖片src屬性

   圖片對象.src   ----> 獲取圖片路徑注意:
   1. 獲取到的圖片路徑是一個絕對路徑
   

2. 知識點-動態的給圖片標簽設置路徑

   圖片對象.src = '圖片路徑';注意:
   1.可以設置絕對路徑(不推薦)
   2.可以設置相對路徑
   

3. 課堂案例-切換圖片案例

01-操作標簽樣式

1. 知識點-通過className方式

   • 設置一個類名

     DOM對象.className = '類名';注意:
     1. className 屬性的值是一個類名,不是一個類選擇器
     

   • 設置多個類名

     DOM對象.className = '類名 類名 ....';
     

   • 移除類名

     DOM.className = '';
     

   • 課堂案例-動畫樣式

2. 知識點-通過style方式

   • 語法

     DOM.style.屬性 = 值;或者DOM對象.style = '屬性: 值';例如: 
     div.style.backgroundColor = 'red';
     

   • 課堂案例

     • 立體動畫效果【課堂】

       ontransitionend 事件:  過渡動畫完成后觸發的事件 
       

     • 隔行變色【案例】

3. 知識點-通過H5新增方式

   • Dom.classList.add()

     DOM.classList.add('類名');備注:
     1. DOM指的就是一個具體的 標簽對象
     2. add方法中要設置的是一個類名, 不是類選擇器
     3. add方法中可以設置多個參數(多個類名)
     4. add方法中的參數不能設置數組例如:
     div.classList.add('box', 'myborder');
     

   • Dom.classList.remove()

     DOM.classList.remove('類名')備注:
     1. remove()方法的參數中設置的就是要被移除的類名
     2. remove()方法中的參數可以設置多個例如:
     div.classList.remove('myborder', 'box');
     

   • Dom.classList.toggle()

     DOM.classList.toggle('類名');備注:
     1. toggle() 方法是用來切換類名的
     2. 如果標簽有類名就移除,如果標簽沒有類名就添加
     

   • Dom.classList.contains()

     DOM.classList.contains('類名');備注:
     1. 判斷標簽是否有該類名
     2. 返回是一個布爾類型的結果, true 代表有類名, false 代表沒有類名
     

   • 課堂案例-tab欄

02-操作表單控件

1. 知識點-獲取/設置輸入框信息

   • 語法

     獲取: DOM.value     
     設置: DOM.value = 值;備注:
     1. DOM.value  獲取 表單控件中的值
     2. DOM.value  獲取的值是一個字符串類型
     3. DOM.value = 值; 給表單控件設置值
     

   • 課堂案例-購物車案例

2. 知識點-設置/獲取按鈕禁用屬性

   • 語法

     獲取:  DOM.disabled 
     設置   DOM.disabled = true | false 備注:
     1.DOM.disabled  得到的結果是布爾類型的結果  false 代表按鈕可以被點擊 , true 代表不可以被點擊
     2.DOM.disabled = true | false  設置按鈕的狀態
     

3. 知識點-設置/獲取復選框屬性

   • 語法

     獲取: dom.checked
     設置: dom.checked = true | false;備注:
     1.dom.checked 獲取復選框(單選框) 是否被選中, 返回的結果是布爾類型的結果 true 代表選中,false 代表未被選中2.dom.checked = true | false; 設置復選框的狀態
     

   • 課堂案例-同意注冊案例

   • 課堂案例-全選反選案例

4. 知識點-設置/獲取下拉列表框屬性

   • 語法

     獲取: dom.selected
     設置: dom.selected = true | false
     

03-操作標簽屬性

1. 系統屬性

   dom.getAttribute(屬性名)；
   dom.setAttribute(屬性名,值);
   dom.removeAttribute(屬性名)；
   

2. 自定義屬性

   • 標簽屬性的作用是什么?

   • 什么是自定義屬性?

   • 設置自定義屬性

     dom.dataset.自定義屬性名稱=值;
     

   • 獲取自定義屬性

     dom.dataset
     

3. 總結

   • getAttribute 既可以操作系統屬性又可以操作自定義屬性
   • dataset 只能操作自定義屬性

4. 課堂練習-自定義屬性tab欄切換案例

04-事件

1. 文本框事件
   • onfocus事件
   • onblur事件
   • 課堂案例-搜索框案例
2. 鼠標事件
   • onmouseenter 事件
   • onmouseleave 事件
   • onmouseover 事件
   • onmouseout 事件
   • 課堂案例-鼠標進入隔行變色案例
   • 課堂案例-ta欄切換