添加删除记录-删除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <script type="text/javascript">
  6.         window.onload = function(){
  7.         //点击链接以后删除信息
  8.         var allA = document.getElementsByTagName("a");
  9.         for(var i = 0;i<allA.length;i++){
  10.           allA[i].onclick = function(){
  11.             var tr = this.parentNode.parentNode;
  12.             var name = tr.children[0].innerHTML;
  13.             var flag = confirm("sure?"+name);
  14.             if (flag){
  15.             tr.parentNode.removeChild(pr);}
  16.             return false;  //点击后不要跳转
  17.           };
  18.         }
  19.       };
  20.   </script>
  21.     <title>测试</title>
  22. </head>
  23. <body>
  24. </body>
  25. </html>

for循环会在加载完后立即执行
响应函数会在点击时执行
响应函数执行时，for早已执行完毕

添加删除记录-添加

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <script type="text/javascript">
  6.         window.onload = function(){
  7.         var addButton = document.getElementById("button");
  8.         addButton.onclick = function(){
  9.           var name = document.getElementById("addName").value;
  10.           var email = document.getElementById("addEmail").value;
  11.           var salary = document.getElementById("addSalary").value;
  13.           var tr = document.createElement("tr");
  14.           var a = document.createElement("a");
  15.           var nameTd = document.createElement("td");
  16.           var emailTd = document.createElement("td");
  17.           var salaryTd = document.createElement("td");
  18.           var aTd = document.createElement("td");
  20.           var nameText = document.createTextNode(name);
  21.           var emailText = document.createTextNode(email);
  22.           var salaryText = document.createTextNode(salary);
  23.           var deleteText = document.createTextNode("Delete");
  25.           nameTd.appendChild(nameText);
  26.           emailTd.appendChild(emailText);
  27.           salaryTd.appendChild(salaryText);
  28.           a.appendChild(deleteText);
  30.           tr.appendChild(nameTd);
  31.           tr.appendChild(emailTd);
  32.           tr.appendChild(salaryTd);
  33.           tr.appendChild(aTd);
  35.           a.href ="javascript:;"
  36.           a.onclick = dleA;
  37.           var tabel = document.getElementById("table");
  38.           table = appendchild(tr);
  39.       };
  40.   </script>
  41.     <title>测试</title>
  42. </head>
  43. <body>
  44. </body>
  45. </html>

添加删除记录-修改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <script type="text/javascript">
  6.         window.onload = function(){
  7.         var name = document.getElementById("addName").value;
  8.         var email = document.getElementById("addEmail").value;
  9.         var salary = document.getElementById("addSalary").value;
  10.         var addButton = document.getElementById("button");
  11.         addButton.onclick = function(){
  12.                   var tr = document.createElement("tr");
  13.               tr.innerHTMl = "<td>"name+"</td>"+"<td>"+email+"</td>"+
  14.               "<td>"+salary+"</td>"+"<td><a href = "javascript:;">delete</a></td>";
  15.         var a = tr.getElenemtsByTagName("a")[0];
  16.         a.onclick = delA;
  17.         var tabel = document.getElementById("table");
  18.         table = appendchild(tr);
  19.       };
  20.   </script>
  21.     <title>测试</title>
  22. </head>
  23. <body>
  24. </body>
  25. </html>

操作内联样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.       background-color:green !important;
  10.     }
  11.     </style>
  12.   <script type="text/javascript">
  13.         window.onload = function(){
  14.         //点击按钮更改大小
  15.         var box = document.getElementById("box");
  16.         var btn = document.getElementById("btn");
  17.         btn.onclick = function(){
  18.                 box.style.width = "300px";
  19.               box.style.backgroundColor="yello";
  20.           //该方法修改的是内联样式，有较高的级别
  21.         };
  22.         //读取元素的样式
  23.         var btn = document.getElementById("btn");
  24.         btn.onclick = function(){
  25.           alert(box.style.width);//只能读取内联样式
  26.           };
  27.       };
  28.   </script>
  29.     <title>测试</title>
  30. </head>
  31. <body>
  32.   <button id="btn">Button</button>
  33.   <div id="box"></div>
  34. </body>
  35. </html>

获取元素的样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.       background-color:green !important;
  10.     }
  11.     </style>
  12.   <script type="text/javascript">
  13.         window.onload = function(){
  14.         //点击按钮更改大小
  15.         var box = document.getElementById("box");
  16.         var btn = document.getElementById("btn");
  17.         btn.onclick = function(){
  18.           alert(box.currentStyle.width);//当前元素正在显示的样式 仅ie支持
  19.           var obj = getComputedStyle(box,null).width;//返回对象 如果没有设置，会实时大小
  20.         };
  21.       };
  22.     //定义函数来获取指定元素当前样式
  24.     //兼容所有
  25.     function style(obj,name){
  26.       if(window.getComputedStyle){ //将变量变为属性 找不到=》没有定义
  27.         return getComputedStyle(box,null)[name];
  28.       }
  29.       else{
  30.         return box.currentStyle.width;
  31.       }
  32.     };
  33.   </script>
  34.     <title>测试</title>
  35. </head>
  36. <body>
  37.   <button id="btn">Button</button>
  38.   <div id="box"></div>
  39. </body>
  40. </html>

其他样式相关属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.       padding:10px;
  10.       background-color:green !important;
  11.     }
  12.     #box2{
  13.       width:150px;
  14.       height:300px;
  15.       background-color:yello;
  16.     }
  17.     </style>
  18.   //以下只读不能改
  19.   <script type="text/javascript">
  20.         window.onload = function(){
  21.         //点击按钮更改大小
  22.         var box = document.getElementById("box");
  23.         var btn = document.getElementById("btn");
  24.         btn.onclick = function(){
  25.           alert(box.clientWidth);//不带px，返回数字,包括内容区和内边距
  26.           alert(box.offsetWidth);//获取整个大小 包括多一个边框
  27.         var op = box.offsetParent;
  28.           //会获取到离当前元素最近开启了定位的祖先元素
  29.           //如果都没开启，则是body
  30.             alert(box.offsetleft);
  32.             var box = document.getElementById("box");   
  33.             alert(box.clientHeigth);//可见的高度
  34.           alert(box.scrollHeight);//滚动的高度
  35.           alert(box.scrollLeft);
  36.           //当满足scrollHeight-scrollTop=clientHeigth说明滚动到底
  37.         };
  38.       };
  40.         //阅读到底才能注册
  41.         window.onload = function(){
  42.             var info = document.getElementById("info");//获取info的p元素
  43.         var inputs = document.getElementByTagName("input");
  44.         info.onscroll = function(){ //绑定滚动事件
  45.               if(scrollHeight-scrollTop=clientHeigth){
  46.               inputs[0].disable = false;
  47.               inputs[1].disable = false;//设置是否禁用
  48.             }
  49.         };
  50.       };
  53.   </script>
  54.     <title>测试</title>
  55. </head>
  56. <body>
  57.   <button id="btn">Button</button>
  58.   <div id="box">
  59.     <div id= "box2"></box>
  60.           </div>
  61.   <input type="checkbox" disable = "disable" />我已经阅读
  62.   <input type="submit" value = "注册" disable = "disable" />
  63. </body>
  64. </html>

事件对象

事件对象：
当事件的响应函数触发时，浏览器每次会将一个事件对象作为实参传递进影响函数】
在事件对象中封装当前事件一切信息 比如 鼠标坐标 比如键盘输入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #areaDiv,#showMsg{
  7.       width:200px;
  8.       height:200px;
  9.     }
  10.     </style>
  11.   <script type="text/javascript">
  12.         window.onload = function(){
  13.             var areaDiv = document.getElementById("areaDiv");
  14.           var showMsg = document.getElementById("showMsg");
  15.             areaDiv.onmousemove = function(event){ //鼠标在元素内移动触发 定一个形参，默认传入事件对象
  16.             event = event || window.event;
  17.             var x = (window).event.clientX;//通过窗口来算坐标的
  18.             var y = (window).event.clientY;
  19.             shouMsg.innerHTMl = "x="+x+"y="+y;
  20.          };
  21.       };
  22.   </script>
  23.     <title>测试</title>
  24. </head>
  25. <body>
  26.   <div id="areaDiv"></div>
  27.   <div id="showMsg"></div>
  28. </body>
  29. </html>

div跟随鼠标移动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.       position:absolute;
  10.     }
  11.     </style>
  12.   <script type="text/javascript">
  13.         window.onload = function(){
  14.         var box = document.getElementById("box");
  15.         document.onmousemove = function(event){ 
  16.           event = event || window.event;
  17.             var x = (window).event.pageX;//通过页面来算的
  18.             var y = (window).event.pageY;
  19.               box.style.left = left + "px";
  20.               box.style.top = top + "px";
  21.         };
  22.       };
  23.   </script>
  24.     <title>测试</title>
  25. </head>
  26. <body>
  27.   <div id= "box"></box>
  28. </body>
  29. </html>

事件的冒泡

事件的向上传导，当后代的元素事件被触发时，其祖先元素的相同事件也会被触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.     }
  10.     #s1{
  11.       background-color:yello;
  12.     }
  13.     </style>
  14.   <script type="text/javascript">
  15.         window.onload = function(){
  16.         var s1 = document.getElementById("s1");
  17.         s1.onclick = function(event){
  18.           alert("1");
  19.           event.cancelBubble = true;//取消冒泡
  20.         };
  22.         var box = document.getElementById("box");
  23.         box.onclick = function(){
  24.         };
  26.         var body = document.getElementById("body");
  27.         body.onclick = function(){
  28.         };
  29.       };
  31.   </script>
  32.     <title>测试</title>
  33. </head>
  34. <body>
  35.   <div id= "box">box<span id="s1">span</span></box>
  36. </body>
  37. </html>

事件的委派

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.     }
  10.     #s1{
  11.       background-color:yello;
  12.     }
  13.     </style>
  14.   <script type="text/javascript">
  15.         window.onload = function(){
  16.         var btn = document.getElementById("btn");
  17.         var ul = document.getElementById("ul");
  18.             btn.onclick = function(){
  19.             var li = document.creatElement("li");
  20.             li.innerHTML = "<a href='Javascript:;'>超链接</a>";
  21.             ul.appendChild(li);
  22.           };
  24.         allA = document.getElementsByTagName("a");
  25.         for(var i = 0;i<allA.length;i++){
  26.           allA[i].onclick = function(){
  27.                   };//只能给原来的
  29.         ul.onclick = function(event){
  30.           if(event.target.className == "link"{
  31.           alert(1);}//事件的委派，相当于利用了冒泡
  32.         };
  34.       };
  37.   </script>
  38.     <title>测试</title>
  39. </head>
  40. <body>
  41.   ...
  42. </body>
  43. </html>

事件的绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <style type="text/css">
  6.     #box{
  7.       width:200px;
  8.       height:200px;
  9.     }
  10.     #s1{
  11.       background-color:yello;
  12.     }
  13.     </style>
  14.   <script type="text/javascript">
  15.         window.onload = function(){
  16.         var btn = document.getElementById("btn");
  17.             btn.onclick = function(){
  18.            alert(1);//始终只能是一个
  19.           };
  21.         //可以同时绑定多个响应元素
  22.         btn.addEventListener("click",function(){alert(1);},false);
  23.         btn.addEventListener("click",function(){alert(2);},false);
  25.         //兼容所有
  26.         //正常的this为button
  27.         //ie为window
  28.         function bind(obj,eventStr,callback){
  29.           if(obj.addEventListener){
  30.             obj.addEventListener(eventStr,callback,false);
  31.           }else{
  32.             obj.attachEvent("on"+eventStr,function(){callback.call(obj)});//匿名函数中调用回调函数来this为
  33.          };
  34.       };
  37.   </script>
  38.     <title>测试</title>
  39. </head>
  40. <body>
  41.   ...
  42. </body>
  43. </html>