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教程