復(fù)習(xí)

1. javascript 組成？
2. window 常用方法
3. history 對象常用方法
4. 如何打開一個窗口 ？ 關(guān)閉呢？
5. location 對象的常用方法與屬性？

單詞預(yù)習(xí)

• document 文檔
• get 獲取
• element 元素
• By 通過
• name 名字
• Tag 標(biāo)簽名
• display 呈現(xiàn)，顯示
• style 樣式
• none 沒有
• checked 選中

知識點講解

3.1 獲取元素

案例 getElementById

function changeNode(){
    var node=document.getElementById("node");
    if(node.innerHTML=="新浪"){
        node.innerHTML="搜狐";
    }else{
        node.innerHTML="新浪";
    }
    
}

<div id="node">新浪</div>
<input name="b1" type="button" value="改變層內(nèi)容" onclick="changeNode()" />

image.png

結(jié)果

image.png

案例 getElementsByTagName

function showInput(){
    var s=document.getElementById("s");
    var inputs=document.getElementsByTagName("input");
    var str="";
    for(var i=0;i<inputs.length;i++){
        str+=inputs[i].value+"<br/>";
    }
    s.innerHTML=str;
}

<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="顯示input內(nèi)容" onclick="showInput()"  />
<input name="b3" type="button" value="顯示season內(nèi)容" onclick="showSeason()"  />
<p id="s"></p>

點擊前

點擊 顯示input內(nèi)容 后

案例 getElementsByName

function showSeason(){
    var s=document.getElementById("s");
    var season=document.getElementsByName("season");
    var str="";
    for(var j=0;j<season.length;j++){
        str+=season[j].value+"<br>";
    }
    s.innerHTML=str;
    
}

點擊前

點擊顯示season內(nèi)容后

3.2 顯示/隱藏

visibility屬性的值

object.style.visibility="值"

display屬性的值

object.style.display="值"

點擊前

點擊 visibility后

點擊display隱藏后

js

function hidden1(){
    var b2=document.getElementById("b2");
    if(b2.style.visibility!="hidden"){
        b2.style.visibility="hidden"
                  // 隱藏圖像還占原來的位置
    }else{
        b2.style.visibility="visible"
    }
}
function hidden2(){
    var b2=document.getElementById("b2");
    if(b2.style.display!="none"){
        b2.style.display="none"
                // 隱藏圖像不占原來的位置
    }else{
        b2.style.display="inline-block"
    }
}

html

![](images/book1.jpg)
![](images/book2.jpg)
![](images/book3.jpg)<br />
<input name="btn1" type="button" value="visibility隱藏圖b2" onclick="hidden1()"/>
<input name="btn2" type="button" value="display隱藏圖b2" onclick="hidden2()"  />

3.3 樹形菜單

樹形菜單

3.4 全選效果

• 復(fù)選框的checked屬性值
  選中：true
  未選中：false
• onchange 事件 當(dāng)表單發(fā)生改變時觸發(fā)

思路
1 為每一個checkbox添加一個onchange事件
for(var i = 0, len = 單選框集合.length;  i++) {
    單選框集合[i].onchange = function() {
        checkAllChecked();       
    }
}
2， 查看是否是全選
function checkAllChecked() {
    var isSelected = true; //全選是否會選中
    // 循環(huán)每一個多選框
    for(;;) {
        if(是否沒有被選中) {
            isSelected = false;
            break; //退出來
        }
    }
    allCheck.checked = isSelected;
   // 設(shè)置全選按鈕
}

3. 設(shè)置全選
allCheck.onchange = function() {
  if（如果全選按鈕被選中）{
     // 循環(huán)所有的單選框都設(shè)置選中
  }else{
      // 循環(huán)所有的單選框都設(shè)置不選中
    }
}

全選效果

擴展 （有時間講）

eval(str) 把字符串當(dāng) js執(zhí)行一次(小心使用)

計算器擴展

總結(jié)

1. 獲取元素有哪些方法
2. 如果設(shè)置元素的顯示與隱藏
3. 如何設(shè)置單選框被選中 或者不被選中
4. 表單發(fā)生改變觸發(fā)的事件是什么

作業(yè)

1. 全選
2. 步進(jìn)器

步進(jìn)器

3. 實現(xiàn)簡易的計算器（選做）
4. getElementsByClassName 不兼容怎么辦（選做）

請自行百度  getElementsByClassName 如何兼容
提示
className 獲取元素 class 的屬性值 
elem.className.indexOf(classname+" ") != -1 
|| elem.className.indexOf(" "+classname+" ") != -1
|| elem.className.indexOf(" "+classname) != -1