JavaScript基础视频教程总结（101-110章）
<!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> </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>
所有基础课程链接：
1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）
5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）
9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）
13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）
另外，欢迎关注我的新浪微博
