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

掌握J(rèn)S中的BOM對(duì)象

掌握J(rèn)S中的常用事件

掌握J(rèn)S中的常用DOM操作

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

上一次內(nèi)容進(jìn)行復(fù)習(xí):

CSS: 層疊樣式表

主要作用: 美化頁(yè)面, 將美化和HTML進(jìn)行分離,提高代碼復(fù)用性

選擇器:

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

? 類選擇器: . 開頭

? ID選擇器: #ID選擇器

?

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

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

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

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

? 偽類選擇器:

浮動(dòng):

? float 屬性: left right

清除浮動(dòng):

? clear 屬性: both left right

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

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

? 邊框: 盒子的邊框

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

絕對(duì)定位: position : absolute; top: left

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

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

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

JS開發(fā)的步驟:

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

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

? 切換圖片:

? 每個(gè)三秒鐘做一件事:

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

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

定時(shí)器

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

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

clearInterval

clearTimeout

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

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

確定事件: 頁(yè)面加載完成的事件 onload

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

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

啟動(dòng)一個(gè)定時(shí)器 : setTimeout()

顯示一個(gè)廣告

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

JS的引入方式

? 昨天我們做了一個(gè)簡(jiǎn)單的表單校驗(yàn)，每當(dāng)用戶輸入出錯(cuò)的時(shí)候，我們是彈出了一個(gè)對(duì)話框，提示用戶去修改。這樣的用戶體驗(yàn)效果非常不好好。我們今天就是需要來(lái)對(duì)他進(jìn)行一個(gè)修改，當(dāng)用戶輸入信息有問(wèn)題的時(shí)候，我們就再輸入框的后面給他一個(gè)友好提示。

【HTML中innerHTML屬性】

【JS中的常用事件】

onfocus 事件: 獲得焦點(diǎn)事件

onblur : 失去焦點(diǎn)

onkeyup : 按鍵抬起事件

    
        
        
        
        
        
    
    
        

            用戶名:

            密碼:

            確認(rèn)密碼:

            郵箱:

            手機(jī)號(hào):

            
            
        
    

定時(shí)器:

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

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

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

? clearInterval()

? clearTimeout()

切換圖片

? img.src = "圖片路徑"

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

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

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

引入一個(gè)外部js文件

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

? 事件 : onclick點(diǎn)擊事件

全選和全不選步驟分析:

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

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

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

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

【HTML中的DOM操作】

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

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


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

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

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

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

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

    
        
        
        
        
    
    
        
        

            

                
分類名稱
                

            
            

                
分類描述
                

            
            

                
分類商品
                

                    
                    

                        已有商品

                        
                            華為
                            小米
                            錘子
                            oppo
                        
                        

                         >>  

                         >>> 
                    
                    
                    
 
                        未有商品

                        
                            蘋果6
                            腎7
                            諾基亞
                            波導(dǎo)
                        
                        

                         <<  

                         <<< 
                    
                
            
            

                

                    
                
            
        
    

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

定時(shí)器:

? setInterval

? setTimeout

? clearInterval

? clearTimeout

控制圖片顯示隱藏

? img.style.display = "block"

? img.style.display = "none"

表單中常用的事件:

? onfocus: 獲取焦點(diǎn)事件

? onblur : 失去焦點(diǎn)的事件

? onkeyup: 按鍵抬起的事件

? onclick: 單擊事件

? ondblclick: 雙擊事件

表格隔行換色,鼠標(biāo)移入和移除要變色:

? onmouseenter: 鼠標(biāo)移入

? onmouseout: 鼠標(biāo)移出

? onload: 文檔加載完成事件

? onsubmit: 提交

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

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

DOM的文檔操作:

? 添加節(jié)點(diǎn): appendChild

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

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

JS開發(fā)步驟:

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

?