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

時間  2020-05-22
標籤 javascript 基礎 視頻 教程 總結 欄目 JavaScript 简体版
原文   原文鏈接 
<!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>

全部基礎課程連接：javascript

 1.JavaScript基礎視頻教程總結（001-010章）           2.JavaScript基礎視頻教程總結（011-020章）          3. JavaScript基礎視頻教程總結（021-030章）        4. JavaScript基礎視頻教程總結（031-040章）css

5. JavaScript基礎視頻教程總結（041-050章）           6. JavaScript基礎視頻教程總結（051-060章）         7. JavaScript基礎視頻教程總結（061-070章）        8. JavaScript基礎視頻教程總結（071-080章）html

9. JavaScript基礎視頻教程總結（081-090章）          10. JavaScript基礎視頻教程總結（091-100章）        11. JavaScript基礎視頻教程總結（101-110章）      12. JavaScript基礎視頻教程總結（111-120章）java

13. JavaScript基礎視頻教程總結（121-130章）        14. JavaScript基礎視頻教程總結（131-140章）數組

 另外，歡迎關注個人新浪微博瀏覽器

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程