摘要：返回包含帶有指定標簽名稱的所有元素的節(jié)點列表集合節(jié)點數(shù)組。增加節(jié)點創(chuàng)建屬性節(jié)點。刪除節(jié)點刪除子節(jié)點。

掌握JS中的BOM對象

掌握JS中的常用事件

掌握JS中的常用DOM操作

了解JS中的內(nèi)置對象

上一次內(nèi)容進行復習:

CSS: 層疊樣式表

主要作用: 美化頁面, 將美化和HTML進行分離,提高代碼復用性

選擇器:

? 元素選擇器: 元素的名稱{}

? 類選擇器: . 開頭

? ID選擇器: #ID選擇器

?

? 后代選擇器: 選擇器1 選擇器2

? 子元素選擇器: 選擇器1 > 選擇器2

? 選擇器分組: 選擇器1,選擇器2,選擇器3{}

? 屬性選擇器: 選擇器[屬性的名稱="屬性的值"]

? 偽類選擇器:

浮動:

? float 屬性: left right

清除浮動:

? clear 屬性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 順時針的方向

? 內(nèi)邊距: 控制的盒子內(nèi)距離

? 邊框: 盒子的邊框

? 外邊距: 控制盒子與盒子之間的距離

絕對定位: position : absolute; top: left

JS開發(fā): 是一門腳本語言,由瀏覽器來解釋執(zhí)行,不需要經(jīng)過編譯

JS聲明變量: var 變量的名字;

JS聲明函數(shù): function 函數(shù)的名稱(參數(shù)的名字){}

JS開發(fā)的步驟:

1. 確定事件
2. 事件要觸發(fā)函數(shù),所以我們是要聲明函數(shù)
3. 函數(shù)里面通常是去做一些交互才操作,  彈框, 修改頁面內(nèi)容,動態(tài)去添加一些東西

有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換

? 切換圖片:

? 每個三秒鐘做一件事:

1. 確定事件: 文檔加載完成的事件 onload
2. 事件要觸發(fā) : init()
3. 函數(shù)里面要做一些事情:(通常會去操作元素,提供交互)
     1. 開啟定時器: 執(zhí)行切換圖片的函數(shù) changeImg()
4.  changeImg()
     1. 獲得要切換圖片的那個元素

? 一般網(wǎng)頁，當我們剛打開的時候，它會5秒之后，顯示一個廣告，讓我們看5秒鐘，然后他的廣告就自動消失了！

定時器

setInterval : 每隔多少毫秒執(zhí)行一次函數(shù)

setTimeout: 多少毫秒之后執(zhí)行一次函數(shù)

clearInterval

clearTimeout

顯示廣告 img.style.display = "block"

隱藏廣告 img.style.display = "none"

確定事件: 頁面加載完成的事件 onload

事件要觸發(fā)函數(shù): init()

init函數(shù)里面做一件事:

啟動一個定時器 : setTimeout()

顯示一個廣告

再去開啟一個定時5秒鐘之后,關(guān)閉廣告

JS的引入方式

? 昨天我們做了一個簡單的表單校驗，每當用戶輸入出錯的時候，我們是彈出了一個對話框，提示用戶去修改。這樣的用戶體驗效果非常不好好。我們今天就是需要來對他進行一個修改，當用戶輸入信息有問題的時候，我們就再輸入框的后面給他一個友好提示。

【HTML中innerHTML屬性】

【JS中的常用事件】

onfocus 事件: 獲得焦點事件

onblur : 失去焦點

onkeyup : 按鍵抬起事件

    
        
        
        
        
        
    
    
        

            用戶名:

            密碼:

            確認密碼:

            郵箱:

            手機號:

            
            
        
    

定時器:

? setInterval("test()",3000) 每隔多少毫秒執(zhí)行一次函數(shù)

? setTimeout("test()",3000) 多少毫秒之后執(zhí)行一次函數(shù)

? timerID 上面定時器調(diào)用之后

? clearInterval()

? clearTimeout()

切換圖片

? img.src = "圖片路徑"

事件: 文檔加載完成的事件 onload事件

顯示廣告 : img.style.display = "block"

隱藏廣告: img.style.display ="none"

引入一個外部js文件

? 商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們?nèi)∠舻臅r候，我們希望不選中所有的商品

? 事件 : onclick點擊事件

全選和全不選步驟分析:

1.確定事件: onclick 單機事件
2.事件觸發(fā)函數(shù): checkAll()
3.函數(shù)要去做一些事情:

  獲得當前第一個checkbox的狀態(tài)
   獲得所有分類項的checkbox
  修改每一個checkbox的狀態(tài)

function checkAll(){
//                獲得當前第一個checkbox的狀態(tài)
                var check1 = document.getElementById("check1");
                //得到當前checked狀態(tài)
                var checked = check1.checked;
//                     獲得所有分類項的checkbox
//                var checks = document.getElementsByTagName("input");
                var checks = document.getElementsByName("checkone");
//                alert(checks.length);
                for(var i = 0; i < checks.length; i++){
//                     修改每一個checkbox的狀態(tài)
                    var checkone = checks[i];
                    checkone.checked = checked;
                }
            }

什么是DOM: Document Object Model : 管理我們的文檔 增刪改查規(guī)則

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
  getElementById(id) - 獲取帶有指定 id 的節(jié)點（元素） 
  appendChild(node) - 插入新的子節(jié)點（元素） 
  removeChild(node) - 刪除子節(jié)點（元素） 

  一些常用的 HTML DOM 屬性：
  innerHTML - 節(jié)點（元素）的文本值 
  parentNode - 節(jié)點（元素）的父節(jié)點 
  childNodes - 節(jié)點（元素）的子節(jié)點 
  attributes - 節(jié)點（元素）的屬性節(jié)點 


查找節(jié)點：
getElementById() 返回帶有指定 ID 的元素。 
getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節(jié)點列表（集合/節(jié)點數(shù)組）。 
getElementsByClassName() 返回包含帶有指定類名的所有元素的節(jié)點列表。 

增加節(jié)點：
createAttribute() 創(chuàng)建屬性節(jié)點。 
createElement() 創(chuàng)建元素節(jié)點。 
createTextNode() 創(chuàng)建文本節(jié)點。 
insertBefore() 在指定的子節(jié)點前面插入新的子節(jié)點。 
appendChild() 把新的子節(jié)點添加到指定節(jié)點。 

刪除節(jié)點：
removeChild() 刪除子節(jié)點。 
replaceChild() 替換子節(jié)點。 

修改節(jié)點：
setAttribute()  修改屬性
setAttributeNode()  修改屬性節(jié)點

在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉(zhuǎn)到一個可以編輯的頁面,這里面能夠修改分類的名稱,分類的描述,以及分類的商品

    
        
        
        
        
    
    
        
        

            

                
分類名稱
                

            
            

                
分類描述
                

            
            

                
分類商品
                

                    
                    

                        已有商品

                        
                            華為
                            小米
                            錘子
                            oppo
                        
                        

                         >>  

                         >>> 
                    
                    
                    
 
                        未有商品

                        
                            蘋果6
                            腎7
                            諾基亞
                            波導
                        
                        

                         <<  

                         <<< 
                    
                
            
            

                

                    
                
            
        
    

今天內(nèi)容簡單回顧:

定時器:

? setInterval

? setTimeout

? clearInterval

? clearTimeout

控制圖片顯示隱藏

? img.style.display = "block"

? img.style.display = "none"

表單中常用的事件:

? onfocus: 獲取焦點事件

? onblur : 失去焦點的事件

? onkeyup: 按鍵抬起的事件

? onclick: 單擊事件

? ondblclick: 雙擊事件

表格隔行換色,鼠標移入和移除要變色:

? onmouseenter: 鼠標移入

? onmouseout: 鼠標移出

? onload: 文檔加載完成事件

? onsubmit: 提交

? onchange: 下拉列表內(nèi)容改變

checkbox.checked 選中狀態(tài)

DOM的文檔操作:

? 添加節(jié)點: appendChild

? 創(chuàng)建節(jié)點: document.createElement

? 創(chuàng)建文本節(jié)點: document.createTextNode()

JS開發(fā)步驟:

1. 確認事件
2. 事件觸發(fā)函數(shù)
3. 函數(shù)里面要做一些交互 

?