主要学习了MOD模型:
先是改变HTML内容:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>MOD_改变HTML内容</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 11 </head> 12 <body> 13 <h1 id = "_header">Old Header</h1> 14 <p id = "p1">Hellow World</p> 15 <script type="text/javascript"> 16 //修改 HTML 内容的最简单的方法时使用 innerHTML 属性。 17 document.getElementById("p1").innerHTML="New Text."; 18 var _element = document.getElementById("_header"); 19 _element.innerHTML = "New Header"; 20 </script> 21 </body> 22 </html>
效果如图:
=========================================
接下来学习了DOM改变HTML属性:
1 <body> 2 <img id = "image" src = "Images/00.jpeg"> 3 <script type="text/javascript"> 4 document.getElementById("image").src = "Images/2.jpg"; 5 </script> 6 </body>
效果如图:
============================
接下来是置换效果
1 <head> 2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 3 <title>网页标题</title> 4 <meta name="keywords" content="关键字列表" /> 5 <meta name="description" content="网页描述" /> 6 <link rel="stylesheet" type="text/css" href="" /> 7 <style type="text/css"> 8 *{ 9 margin:0;padding:0; 10 } 11 ul li{ 12 list-style:none; 13 height:40px; 14 line-height:40px; 15 padding-left:40px; 16 17 } 18 19 ul{ 20 height:40px; 21 line-height:40px; 22 overflow:hidden; 23 border-bottom:1px solid #444; 24 } 25 </style> 26 </head> 27 <body> 28 <ul id="ullist"> 29 <li>平青海考察说了这些事</li> 30 <li>让良好生态成民生福祉</li> 31 <li>回家生二胎？百万计生人员该往哪里去</li> 32 <li>飞机上使用手机会影响飞行安全吗？</li> 33 <li>姑娘，整不整容，先整整姿态吧！</li> 34 </ul> 35 <script type="text/javascript"> 36 setInterval("changLi()",3000); 37 38 function changLi(){ 39 //要替换的位置的下标 40 var li_obj = document.getElementsByTagName("li")[0]; 41 //要替换的目标的下标 42 var li_obj_0 = document.getElementsByTagName("li")[4]; 43 //父对象 44 var ul_obj = document.getElementsByTagName("ul")[0]; 45 46 47 ul_obj.insertBefore(li_obj_0,li_obj); 48 } 49 </script> 50 </body>
效果3秒换一内容;
====================================
接下来是用JS代码改变网页背景
1 <body> 2 <!--range 滑动条 设置最小值 设置最大值 设置ID 默认值--> 3 红 :<input type = "range" min = '0' max = '255' id = 'red' value = '255'><span id = 'res_red'>255</span></br> 4 绿 :<input type = 'range' min = '0' max = "255" id = 'green' value = '255'><span id = 'res_green'>255</span></br> 5 蓝 :<input type = 'range' min = '0' max = '255' id = 'blue' value = '255'><span id = "res_blue">255</span></br> 6 7 <script type="text/javascript"> 8 //页面加载完成后时运行一匿名函数代码; 9 window.onload = function(){ 10 11 //定义三原色变量; 12 var red,blue,green; 13 14 //通过元素名字获取值; 15 var input_obj = document.getElementsByTagName("input"); 16 17 //每当数值发生变化时修改相关颜色值; 18 for(var i = 0;i<input_obj.length;i++) 19 { 20 //onchange 当数值发生改变的时候 21 input_obj[i].onchange = function(){ 22 23 //通过ID获取已经改变的值; 24 var red = document.getElementById("red").value; 25 var green = document.getElementById("green").value; 26 var blue = document.getElementById("blue").value; 27 28 //innerHTML 改变HTML内容 通过ID修改显示的值 29 document.getElementById("res_red").innerHTML = red; 30 document.getElementById("res_green").innerHTML=green; 31 document.getElementById("res_blue").innerHTML=blue; 32 33 //修改背景颜色; 34 document.body.style.background = "rgb("+red+","+green+","+blue+")"; 35 } 36 } 37 } 38 </script> 39 </body>
效果如图:
通过调整三原色的值改变背景的颜色
===================================
动态删除行案例:
代码如下:
1 <script type="text/javascript"> 2 //当界面运行完毕; 3 window.onload = function(){ 4 //通过ID获取值; 5 var buttObj = document.getElementById("enter"); 6 var content = document.getElementById("content"); 7 var tabObj = document.getElementById("tab"); 8 ////获取表格下面的所有子元素 返回一个集合; 9 var tbodyObj = tabObj.children[1]; 10 //获取所有的行; 11 var trs = tbodyObj.rows; 12 //给button添加点击事件; 13 buttObj.onclick = function(){ 14 //获取content的值; 15 var text = content.value; 16 //当文本内容不为空时 创建5行3列的表格; 17 if(text != ""){ 18 //遍历行; 19 for(var j = 0;j<5;j++){ 20 var trObj = document.createElement("tr");//创建tr; 21 //添加到表格 22 tbodyObj.appendChild(trObj);//将tr添加到tbody; 23 //遍历列; 24 for(var i = 1;i<4;i++){ 25 //创建td; 26 var tdObj = document.createElement("td"); 27 //添加到表格; 28 trObj.appendChild(tdObj); 29 //在表格中修改第一列的长度值并显示; 30 if(i==1){ 31 tdObj.innerHTML = trs.length; 32 } 33 //在第二列显示内容; 34 if(i==2){ 35 tdObj.innerHTML = text; 36 } 37 //在第三列添加删除的函数; 38 if(i==3){ 39 //removes(this) 删除当前对象; 40 var str = "<a href = '#' onclick = 'removes(this)'>删除</a>"; 41 tdObj.innerHTML = str; 42 } 43 } 44 } 45 } 46 } 47 } 48 //删除 49 function removes(th){ 50 th.parentNode.parentNode.parentNode.removeChild(th.parentNode.parentNode); 51 sorting(); 52 } 53 //实现删除后重新排序 54 function sorting(){ 55 var trsObj = document.getElementById("tab").tBodies[0].rows; 56 for(var i = 0;i<trsObj.lebgth;i++){ 57 trsObj[i].cells[0].innerHTML = i+1; 58 } 59 } 60 </script> 61 </head> 62 <body> 63 <input id = "content" type = "text"/><input id = "enter" type = "button" value = "添加"/> 64 <table id = 'tab' border = '2' width = '300'> 65 <thead><td>学号</td><td>姓名</td><td>操作</td></thead> 66 <tbody> 67 <tr><td>1</td><td>zhangsan</td><td> </td></tr> 68 <tr><td>2</td><td>zhangsan</td><td> </td></tr> 69 <tr><td>3</td><td>lisi</td><td> </td></tr> 70 <tr><td>4</td><td>zhangsan</td><td> </td></tr> 71 <tr><td>5</td><td>zhangsan</td><td> </td></tr> 72 <tbody> 73 </table> 74 </body>