JavaScript基礎視頻教程總結（101-110章）

時間 2019-12-10
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>101-110章總結</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
    
<pre> 101. dom查詢的剩餘方法 </pre>
<div id="box2"></div>
<div class="box1">我是第一個box1<div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div class="box1"><div>我是box1中的div</div></div>
<div></div>
<script type="text/javascript">
    console.log("--第101--")
    
    function fun101(){
        //body
        console.log("--body--")
        var body1 = document.getElementsByTagName("body")[0]
        var body2 = document.body
        console.log(body1)
        console.log(body2)
        // html
        console.log("--html--")
        var html = document.documentElement
        console.log(html)
        // all
        console.log("--all--")
        var all = document.all
        console.log(all.length)
        for ( var i=0 , allL = all.length ; i<allL; i++) {
            console.log(all[i])
        }
        /*
         * 根據元素的class屬性值查詢一組元素節點對象
         * getElementsByClassName()能夠根據class屬性值獲取一組元素節點對象，
         * 可是該方法不支持IE8及如下的瀏覽器
         */
        // class
        console.log("--getElementsByClassName--")
        var box1 = document.getElementsByClassName("box1")
        console.log(box1.length)
        //獲取頁面中的全部的div
        console.log("--div--")
        var divs = document.getElementsByTagName("div")
        console.log(divs.length)
        /*
         * document.querySelector()
         *  - 須要一個選擇器的字符串做爲參數，能夠根據一個CSS選擇器來查詢一個元素節點對象
         *  - 雖然IE8中沒有 getElementsByClassName()可是能夠使用querySelector()代替
         *  - 使用該方法總會返回惟一的一個元素，若是知足條件的元素有多個，那麼它只會返回第一個
         */
        console.log("--querySelector--")
        var qbox1 = document.querySelector(".box1")
        console.log(qbox1)
        /*
         * document.querySelectorAll()
         *  - 該方法和querySelector()用法相似，不一樣的是它會將符合條件的元素封裝到一個數組中返回
         *  - 即便符合條件的元素只有一個，它也會返回數組
         */
        console.log("--querySelectorAll--")
        var qabox1 = document.querySelectorAll(".box1")
        console.log(qabox1.length)
    }
    fun101()
</script>

<pre> 102. dom增刪改 </pre>
<div class="clearfix">
    <div id="total">
        <div class="inner">
            <p>你喜歡哪一個城市?</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li id="sh">上海</li>
                <li>東京</li>
                <li>首爾</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">建立一個"廣州"節點,添加到#city下</button></div>
        <div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
        <div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
        <div><button id="btn04">刪除#bj#sh節點</button></div>
        <div><button id="btn05">讀取#city內的HTML代碼</button></div>
        <div><button id="btn06">設置#bj內的HTML代碼</button></div>
        <div><button id="btn07">建立一個"廣州""合肥"節點,添加到#city下</button></div>
    </div>
</div>

<script type="text/javascript">
    console.log("--第102--");
    
    myClick("btn01",function(){
        var newLi = document.createElement("li")
        var nliText = document.createTextNode("廣州")
        newLi.appendChild(nliText)
        var city = document.getElementById("city")
        city.appendChild(newLi)
    })
    myClick("btn02",function(){
        var newLi = document.createElement("li")
        var nliText = document.createTextNode("廣州")
        newLi.appendChild(nliText)
        var city = document.getElementById("city")
        var bj = document.getElementById("bj")
        /*
         * insertBefore()
         *  - 能夠在指定的子節點前插入新的子節點
         *  - 語法：
         *      父節點.insertBefore(新節點,舊節點);
         */
        city.insertBefore(newLi,bj)
    })
    myClick("btn03",function(){
        var newLi = document.createElement("li")
        var nliText = document.createTextNode("廣州")
        newLi.appendChild(nliText)
        var city = document.getElementById("city")
        var bj = document.getElementById("bj")
        /*
         * replaceChild()
         *  - 能夠使用指定的子節點替換已有的子節點
         *  - 語法：父節點.replaceChild(新節點,舊節點);
         */
        city.replaceChild(newLi,bj)
    })
    myClick("btn04",function(){
        var city = document.getElementById("city")
        var bj = document.getElementById("bj")
        var sh = document.getElementById("sh")
        /*
         * removeChild()
         *  - 能夠刪除一個子節點
         *  - 語法：父節點.removeChild(子節點);
         *      子節點.parentNode.removeChild(子節點);
         */
        city.removeChild(bj)
        sh.parentNode.removeChild(sh)
    })
    myClick("btn05",function(){
        var city = document.getElementById("city")
        alert(city.innerHTML)
    })
    myClick("btn06",function(){
        var bj = document.getElementById("bj")
        bj.innerHTML = "合肥"
    })
    myClick("btn07",function(){
        var city = document.getElementById("city")
        // 使用innerHTML也能夠完成DOM的增刪改的相關操做,通常咱們會兩種方式結合使用
        //01
        city.innerHTML += "<li>廣州</li>"
        //02
        var li =document.createElement("li")
        li.innerHTML = "合肥"
        city.appendChild(li)
    })
    
    function myClick(btn,fun){
        var btn = document.getElementById(btn)
        btn.onclick = fun
    }
</script>

<pre> 103. 添加刪除記錄-刪除 </pre>
<pre> 104. 添加刪除記錄-添加 </pre>
<pre> 105. 添加刪除記錄-修改 </pre>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="javascript:;">Delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <h4>添加新員工</h4>
    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton1" value="abc">Submit1</button>
                <button id="addEmpButton2" value="abc">Submit2</button>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    console.log("--第103,104,105--");
    function deleteA(){
        console.log(this)
        var tr = this.parentNode.parentNode;
        var name = tr.children[0].innerHTML
        var flag = confirm("你肯定刪除"+ name +"嗎？")
        if(flag){
            tr.parentNode.removeChild(tr)
        }
    }
    // 刪除
    function deleteFun(){
        var allA = document.querySelectorAll("td a")
        for(var i=0,l=allA.length; i<l; i++) {
            allA[i].onclick = deleteA
        }
    }
    deleteFun()
    // 添加
    function addFun(){
        var employeeTable = document.getElementById("employeeTable")
        var addEmpButton1 = document.getElementById("addEmpButton1")
        var addEmpButton2 = document.getElementById("addEmpButton2")
        addEmpButton1.onclick = function(){
            var empName = document.getElementById("empName").value
            var email = document.getElementById("email").value
            var salary = document.getElementById("salary").value
            var tr = document.createElement("tr")
            var tdName = document.createElement("td")
            var tdEmail = document.createElement("td")
            var tdSalary = document.createElement("td")
            var tdA = document.createElement("td")
            var a = document.createElement("a")
            var nameText = document.createTextNode(empName)
            var emailText = document.createTextNode(email)
            var salaryText = document.createTextNode(salary)
            var aText = document.createTextNode("Delete")
            tdName.appendChild(nameText)
            tdEmail.appendChild(emailText)
            tdSalary.appendChild(salaryText)
            tdA.appendChild(a)
            a.href = "javascript:;"
            a.onclick = deleteA
            a.appendChild(aText)
            tr.appendChild(tdName)
            tr.appendChild(tdEmail)
            tr.appendChild(tdSalary)
            tr.appendChild(tdA)
            employeeTable.appendChild(tr)
        }
        // 修改
        addEmpButton2.onclick = function(){
            var empName = document.getElementById("empName").value
            var email = document.getElementById("email").value
            var salary = document.getElementById("salary").value
            var tr2 = document.createElement("tr")
            tr2.innerHTML = "<td>" + empName + "</td>" +
                            "<td>" + email + "</td>" +
                            "<td>" + salary + "</td>" +
                            "<td><a href='javascript:;'>Delete</a></td>"
            var a = tr2.getElementsByTagName("a")[0]
            a.onclick = deleteA
            employeeTable.appendChild(tr2)
        }
    }
    addFun()
    
</script>

<pre> 106. a的索引問題 </pre>
<ul id="ul_id">
    <li><a href="javascript:;">a的索引問題1</a></li>
    <li><a href="javascript:;">a的索引問題2</a></li>
    <li><a href="javascript:;">a的索引問題3</a></li>
    <li><a href="javascript:;">a的索引問題4</a></li>
</ul>
<script type="text/javascript">
    console.log("--第106--");
    var ul = document.getElementById("ul_id")
    var liA = ul_id.getElementsByTagName("a")
    //console.log(liA.length)
    for (var i=0,l=liA.length; i<l; i++) {
        console.log("for循環正在執行"+i);
        liA[i].onclick = function(){
            console.log("響應函數正在執行"+i);
        }
    }
</script>

<pre> 107. 操做內聯樣式
經過JS修改元素的樣式：語法：元素.style.樣式名 = 樣式值
注意：若是CSS的樣式名中含有-，這種名稱在JS中是不合法的好比background-color
須要將這種樣式名修改成駝峯命名法，去掉-，而後將-後的字母大寫
咱們經過style屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先級，因此經過JS修改的樣式每每會當即顯示
可是若是在樣式中寫了!important，則此時樣式會有最高的優先級，
即便經過JS也不能覆蓋該樣式，此時將會致使JS修改樣式失效
因此儘可能不要爲樣式添加 !important
</pre>
<style type="text/css">
    #p2{color: blue !important;}
</style>
<div class="">
    <p id="p1">段落01</p>
    <p id="p2">段落02</p>
</div>
<div class="">
    <button id="btncss01">點我一下</button>
    <button id="btncss02">點我一下2</button>
</div>
<script type="text/javascript">
    console.log("--第107--");
    var btncss01 = document.getElementById("btncss01")
    var btncss02 = document.getElementById("btncss02")
    var p1 = document.getElementById("p1")
    var p2 = document.getElementById("p2")
    btncss01.onclick = function(){
        p1.style.color = "red"
        p1.style.backgroundColor = "yellow"
        p2.style.color = "red"
    }
    //點擊按鈕2之後，讀取元素的樣式
    // 經過style屬性設置和讀取的都是內聯樣式, 沒法讀取樣式表中的樣式
    btncss02.onclick = function(){
        alert(p1.style.color)
    }
</script>

<pre> 108. 獲取元素的樣式
獲取元素的當前顯示的樣式
語法：元素.currentStyle.樣式名
它能夠用來讀取當前元素正在顯示的樣式
若是當前元素沒有設置該樣式，則獲取它的默認值
currentStyle只有IE瀏覽器支持，其餘的瀏覽器都不支持
在其餘瀏覽器中能夠使用
getComputedStyle()這個方法來獲取元素當前的樣式
這個方法是window的方法，能夠直接使用
須要兩個參數
第一個：要獲取樣式的元素
第二個：能夠傳遞一個僞元素，通常都傳null
該方法會返回一個對象，對象中封裝了當前元素對應的樣式
能夠經過對象.樣式名來讀取樣式
若是獲取的樣式沒有設置，則會獲取到真實的值，而不是默認值
好比：沒有設置width，它不會獲取到auto，而是一個長度
可是該方法不支持IE8及如下的瀏覽器
經過currentStyle和getComputedStyle()讀取到的樣式都是隻讀的，
不能修改，若是要修改必須經過style屬性
</pre>
<style type="text/css">
    #p3{color: #5197ff;height: 30px;font-size: 20px;}
    #p4{color: #112233;height: 60px;font-size: 30px;}
</style>
<div class="">
    <p id="p3">段落01</p>
    <p id="p4">段落02</p>
</div>
<div class="">
    <button id="btncss03">點我一下</button>
    <button id="btncss04">點我一下</button>
    <button id="btncss05">點我一下</button>
</div>
<script type="text/javascript">
    console.log("--第108--");
    var btncss03 = document.getElementById("btncss03")
    var btncss04 = document.getElementById("btncss04")
    var btncss05 = document.getElementById("btncss05")
    var p3 = document.getElementById("p3")
    var p4 = document.getElementById("p4")
    btncss03.onclick = function(){
        var  p3Color = p3.currentStyle.color
        console.log( p3Color)
    }
    btncss04.onclick = function(){
        var  obj = getComputedStyle(p4,null)
        console.log("p4= " + obj.color)
        console.log("p4= " + obj.fontSize)
    }
</script>

<pre> 109. getStyle()方法 </pre>
<script type="text/javascript">
    console.log("--第109--");
    function getStyle(obj,name){
        if(window.getComputedStyle){
            //正常瀏覽器的方式，具備getComputedStyle()方法
            return getComputedStyle(obj,null)[name]
        }else{
            //IE8的方式，沒有getComputedStyle()方法
            return obj.currentStyle[name]
        }
    }
    btncss05.onclick = function(){
        var gs = getStyle(p3,"color")
        alert("p3color= " + gs )
    }
</script>

<pre> 110. 其餘樣式相關屬性
clientWidth
clientHeight
- 這兩個屬性能夠獲取元素的可見寬度和高度
- 這些屬性都是不帶px的，返回都是一個數字，能夠直接進行計算
- 會獲取元素寬度和高度，包括內容區和內邊距
- 這些屬性都是隻讀的，不能修改
offsetWidth
offsetHeight
- 獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
offsetParent
- 能夠用來獲取當前元素的定位父元素
- 會獲取到離當前元素最近的開啓了定位的祖先元素
若是全部的祖先元素都沒有開啓定位，則返回body
offsetLeft
- 當前元素相對於其定位父元素的水平偏移量
offsetTop
- 當前元素相對於其定位父元素的垂直偏移量
scrollWidth
scrollHeight
- 能夠獲取元素整個滾動區域的寬度和高度
scrollLeft
- 能夠獲取水平滾動條滾動的距離
scrollTop
- 能夠獲取垂直滾動條滾動的距離
</pre>
<style type="text/css">
#other05{
    width: 200px;
    height: 300px;
    background-color: #bfa;
    overflow: auto;
}
#other06{
    width: 400px;
    height: 600px;
    background-color: yellow;
}
</style>
<div id="other_box" style="position: relative;padding: 50px;border: 1px solid red;">
    <p id="other01" style="padding: 10px;border: 5px solid;">clientWidth,clientHeight</p>
    <p id="other02" style="padding: 10px;border: 5px solid;">offsetWidth,offsetHeight</p>
    <p id="other03">offsetParent</p>
    <p id="other04">offsetLeft,offsetTop</p>
    <div id="other05">
        <div id="other06">scrollWidth,scrollHeight- 能夠獲取元素整個滾動區域的寬度和高度,scrollLeft- 能夠獲取水平滾動條滾動的距離scrollTop- 能夠獲取垂直滾動條滾動的距離</div>
    </div>

    <button id="other_btn01">client-wh</button>
    <button id="other_btn02">offset-wh</button>
    <button id="other_btn03">offsetParent</button>
    <button id="other_btn04">offset-lt</button>
    <button id="other_btn05">scroll</button>
    <button id="other_btn06">offsetTop</button>
</div>
<script type="text/javascript">
    console.log("--第110--");
    var other01 = document.getElementById("other01")
    var other02 = document.getElementById("other02")
    var other03 = document.getElementById("other03")
    var other04 = document.getElementById("other04")
    var other05 = document.getElementById("other05")
    var other06 = document.getElementById("other06")
    
    var other_btn01 = document.getElementById("other_btn01")
    var other_btn02 = document.getElementById("other_btn02")
    var other_btn03 = document.getElementById("other_btn03")
    var other_btn04 = document.getElementById("other_btn04")
    var other_btn05 = document.getElementById("other_btn05")
    var other_btn06 = document.getElementById("other_btn06")
    
    function myClick(btn,fun){
        var btn = document.getElementById(btn)
        btn.onclick = fun
    }
    myClick("other_btn01",function(){
        var clientWidth = other01.clientWidth
        var clientHeight = other01.clientHeight
        alert("clientWidth=" + clientWidth +",clientHeight=" + clientHeight)
    })
    myClick("other_btn02",function(){
        var offsetWidth = other02.offsetWidth
        var offsetHeight = other02.offsetHeight
        alert("offsetWidth=" + offsetWidth +",offsetHeight=" + offsetHeight)
    })
    myClick("other_btn03",function(){
        var offsetParent = other03.offsetParent
        alert( offsetParent.id)
    })
    myClick("other_btn04",function(){
        var offsetLeft = other04.offsetLeft
        var offsetTop = other04.offsetTop
        alert("offsetLeft=" + offsetLeft +",offsetTop=" + offsetTop)
    })
    myClick("other_btn05",function(){
        var clientWidth = other05.clientWidth
        var clientHeight = other05.clientHeight
        var scrollWidth = other05.scrollWidth
        var scrollHeight = other05.scrollHeight
        var scrollLeft = other05.scrollLeft
        var scrollTop = other05.scrollTop
        alert("clientWidth=" + clientWidth +"\n" +
              "scrollLeft=" + scrollLeft +"\n" +
              "scrollWidth=" + scrollWidth +"\n" +
              "clientHeight=" + clientHeight +"\n" +
              "scrollTop=" + scrollTop +"\n" +
              "scrollHeight=" + scrollHeight
        )
        //當知足scrollHeight - scrollTop == clientHeight
        //說明垂直滾動條滾動到底了
        //當知足scrollWidth - scrollLeft == clientWidth
        //說明水平滾動條滾動到底
    })
</script>

</body>
</html>