JSAP107

1、目标



2、

需要考虑的问题:

  1. 案例：图片随着鼠标飞兼容性代码
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>title</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         body {
  14.             height: 2000px;
  15.         }
  17.         img {
  18.             position: absolute;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  24. <img src="data:images/bird.png" alt="" id="im"/>
  25. <script src="common.js"></script>
  26. <script>
  27.     var evt = {
  28. //window.event与e的兼容问题
  29.         getEvent: function (evt) {
  30.             return window.event || evt;
  31.         },
  32.         //可视区域的横坐标
  33.         getClientX: function (evt) {
  34.             return this.getEvent(evt).clientX;
  35.         },
  36.         //可视区域的纵坐标
  37.         getClientY: function (evt) {
  38.             return this.getEvent(evt).clientY;
  39.         },
  40.         //左侧卷曲部分的距离
  41.         getScrollLeft: function () {
  42.             return window.pageXOffset || document.body.scrollLeft ||
  43.                 document.documentElement.scrollLeft || 0;
  44.         },
  45.         getScrollTop: function () {
  46.             return window.pageYOffset || document.body.scrollTop ||
  47.                 document.documentElement.scrollTop || 0;
  48.         },
  49.         getPageX: function (e) {
  50.             return this.getEvent(e).pageX ? this.getEvent(e).pageX :
  51.                 this.getClientX() + this.getScrollLeft();
  52.         },
  53.         getPageY: function (e) {
  54.             return this.getEvent(e).pageX ? this.getEvent(e).pageY :
  55.                 this.getClientY() + this.getScrollTop();
  56.         }
  57.     };
  59.     document.onmousemove = function (e) {
  60.         console.log(e);
  61.         my$("im").style.left = evt.getPageX(e) + "px";
  62.         my$("im").style.top = evt.getPageY(e) + "px";
  63.     };
  65. </script>
  67. </body>
  68. </html>
  1. //案例：拖拽对话框
  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style>
  8.     .login-header {
  9.       width: 100%;
  10.       text-align: center;
  11.       height: 30px;
  12.       font-size: 24px;
  13.       line-height: 30px;
  14.     }
  16.     ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
  17.       padding: 0px;
  18.       margin: 0px;
  19.     }
  21.     .login {
  22.       width: 512px;
  23.       position: absolute;
  24.       border: #ebebeb solid 1px;
  25.       height: 280px;
  26.       left: 50%;
  27.       right: 50%;
  28.       background: #ffffff;
  29.       box-shadow: 0px 0px 20px #ddd;
  30.       z-index: 9999;
  31.       margin-left: -250px;
  32.       margin-top: 140px;
  33.       display: none;
  34.     }
  36.     .login-title {
  37.       width: 100%;
  38.       margin: 10px 0px 0px 0px;
  39.       text-align: center;
  40.       line-height: 40px;
  41.       height: 40px;
  42.       font-size: 18px;
  43.       position: relative;
  44.       cursor: move;
  45.       -moz-user-select: none; /*火狐*/
  46.       -webkit-user-select: none; /*webkit浏览器*/
  47.       -ms-user-select: none; /*IE10*/
  48.       -khtml-user-select: none; /*早期浏览器*/
  49.       user-select: none;
  50.     }
  52.     .login-input-content {
  53.       margin-top: 20px;
  54.     }
  56.     .login-button {
  57.       width: 50%;
  58.       margin: 30px auto 0px auto;
  59.       line-height: 40px;
  60.       font-size: 14px;
  61.       border: #ebebeb 1px solid;
  62.       text-align: center;
  63.     }
  65.     .login-bg {
  66.       width: 100%;
  67.       height: 100%;
  68.       position: fixed;
  69.       top: 0px;
  70.       left: 0px;
  71.       background: #000000;
  72.       filter: alpha(opacity=30);
  73.       -moz-opacity: 0.3;
  74.       -khtml-opacity: 0.3;
  75.       opacity: 0.3;
  76.       display: none;
  77.     }
  79.     a {
  80.       text-decoration: none;
  81.       color: #000000;
  82.     }
  84.     .login-button a {
  85.       display: block;
  86.     }
  88.     .login-input input.list-input {
  89.       float: left;
  90.       line-height: 35px;
  91.       height: 35px;
  92.       width: 350px;
  93.       border: #ebebeb 1px solid;
  94.       text-indent: 5px;
  95.     }
  97.     .login-input {
  98.       overflow: hidden;
  99.       margin: 0px 0px 20px 0px;
  100.     }
  102.     .login-input label {
  103.       float: left;
  104.       width: 90px;
  105.       padding-right: 10px;
  106.       text-align: right;
  107.       line-height: 35px;
  108.       height: 35px;
  109.       font-size: 14px;
  110.     }
  112.     .login-title span {
  113.       position: absolute;
  114.       font-size: 12px;
  115.       right: -20px;
  116.       top: -30px;
  117.       background: #ffffff;
  118.       border: #ebebeb solid 1px;
  119.       width: 40px;
  120.       height: 40px;
  121.       border-radius: 20px;
  122.     }
  124.   </style>
  125. </head>
  126. <body>
  127. <div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
  128. <div id="login" class="login">
  129.   <div id="title" class="login-title">登录会员
  130.     <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div>
  131.   <div class="login-input-content">
  132.     <div class="login-input">
  133.       <label>用户名：</label>
  134.       <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
  135.     </div>
  136.     <div class="login-input">
  137.       <label>登录密码：</label>
  138.       <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
  139.     </div>
  140.   </div>
  141.   <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
  142. </div><!--登录框-->
  143. <div id="bg" class="login-bg"></div><!--遮挡层-->
  144. <script src="common.js"></script>
  146. <script>
  148.   //获取超链接,注册点击事件,显示登录框和遮挡层
  149.   my$("link").onclick = function () {
  150.     my$("login").style.display = "block";
  151.     my$("bg").style.display = "block";
  152.   };
  154.   //获取关闭,注册点击事件,隐藏登录框和遮挡层
  155.   my$("closeBtn").onclick = function () {
  156.     my$("login").style.display = "none";
  157.     my$("bg").style.display = "none";
  158.   };
  160.   //按下鼠标,移动鼠标,移动登录框
  161.   my$("title").onmousedown = function (e) {
  162.     //获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
  163.     var spaceX = e.clientX - my$("login").offsetLeft;
  164.     var spaceY = e.clientY - my$("login").offsetTop;
  165.     //移动的事件
  166.     document.onmousemove = function (e) {
  167.       //新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
  168.       var x = e.clientX - spaceX+250;
  169.       var y = e.clientY - spaceY-140;
  170.       my$("login").style.left = x + "px";
  171.       my$("login").style.top = y + "px";
  173.     }
  174.   };
  176.   document.onmouseup=function () {
  177.     document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
  178.   };
  180. </script>
  181. <script>
  183.   //点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框
  184.   //  my$("link").onclick=function (e) {
  185.   //    my$("login").style.display="block";
  186.   //    //return false;
  187.   //    //e.preventDefault();
  188.   //    //上面的两个是阻止默认事件的
  189.   //    //下面的两个是阻止事件冒泡的
  190.   //    //window.event.cancelBubble=true;
  191.   //    e.stopPropagation();
  192.   //  };
  193.   //  document.onclick=function () {
  194.   //    my$("login").style.display="none";
  195.   //    console.log("隐藏了");
  196.   //  };
  197. </script>
  199. </body>
  200. </html>

e.preventDefault();阻止浏览器的默认事件，例如跳转,ie8不支持该方法，要用return false;

  1. //案例：滚动条
  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         .box {
  14.             width: 300px;
  15.             height: 500px;
  16.             border: 1px solid red;
  17.             margin: 100px;
  18.             position: relative;
  19.             overflow: hidden;
  20.         }
  22.         .content {
  23.             padding: 5px 18px 5px 5px;
  24.             position: absolute;
  25.             top: 0;
  26.             left: 0;
  28.         }
  30.         .scroll {
  31.             width: 18px;
  32.             height: 100%;
  33.             position: absolute;
  34.             top: 0;
  35.             right: 0;
  36.             background-color: #eee;
  37.         }
  39.         .bar {
  40.             height: 100px;
  41.             width: 100%;
  42.             position: absolute;
  43.             top: 0;
  44.             left: 0;
  45.             background-color: red;
  46.             border-radius: 10px;
  47.             cursor: pointer;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52. <div class="box" id="box">
  53.     <div class="content" id="content">
  54.         床前明月光啊，明月光，疑是地上霜啊，举头
  55.         床前明月光啊，明月光，疑是地上霜啊，举头
  56.         床前明月光啊，明月光，疑是地上霜啊，举头
  57.         床前明月光啊，明月光，疑是地上霜啊，举头
  58.         床前明月光啊，明月光，疑是地上霜啊，举头
  59.         床前明月光啊，明月光，疑是地上霜啊，举头
  60.         床前明月光啊，明月光，疑是地上霜啊，举头
  61.         床前明月光啊，明月光，疑是地上霜啊，举头
  62.         床前明月光啊，明月光，疑是地上霜啊，举头
  63.         床前明月光啊，明月光，疑是地上霜啊，举头
  64.         床前明月光啊，明月光，疑是地上霜啊，举头
  65.         床前明月光啊，明月光，疑是地上霜啊，举头
  66.         床前明月光啊，明月光，疑是地上霜啊，举头
  67.         床前明月光啊，明月光，疑是地上霜啊，举头
  68.         床前明月光啊，明月光，疑是地上霜啊，举头
  69.         床前明月光啊，明月光，疑是地上霜啊，举头
  70.         床前明月光啊，明月光，疑是地上霜啊，举头
  71.         床前明月光啊，明月光，疑是地上霜啊，举头
  72.         床前明月光啊，明月光，疑是地上霜啊，举头
  73.         床前明月光啊，明月光，疑是地上霜啊，举头
  74.         床前明月光啊，明月光，疑是地上霜啊，举头
  75.         床前明月光啊，明月光，疑是地上霜啊，举头
  76.         床前明月光啊，明月光，疑是地上霜啊，举头
  77.         床前明月光啊，明月光，疑是地上霜啊，举头
  78.         床前明月光啊，明月光，疑是地上霜啊，举头
  79.         床前明月光啊，明月光，疑是地上霜啊，举头
  80.         床前明月光啊，明月光，疑是地上霜啊，举头
  81.         床前明月光啊，明月光，疑是地上霜啊，举头
  82.         床前明月光啊，明月光，疑是地上霜啊，举头
  83.         床前明月光啊，明月光，疑是地上霜啊，举头
  84.         床前明月光啊，明月光，疑是地上霜啊，举头
  85.         床前明月光啊，明月光，疑是地上霜啊，举头
  86.         床前明月光啊，明月光，疑是地上霜啊，举头
  87.         床前明月光啊，明月光，疑是地上霜啊，举头
  88.         床前明月光啊，明月光，疑是地上霜啊，举头
  89.         床前明月光啊，明月光，疑是地上霜啊，举头
  90.         床前明月光啊，明月光，疑是地上霜啊，举头
  91.         床前明月光啊，明月光，疑是地上霜啊，举头
  92.         床前明月光啊，明月光，疑是地上霜啊，举头
  93.         床前明月光啊，明月光，疑是地上霜啊，举头
  94.         床前明月光啊，明月光，疑是地上霜啊，举头
  95.         床前明月光啊，明月光，疑是地上霜啊，举头
  96.         床前明月光啊，明月光，疑是地上霜啊，举头
  97.         床前明月光啊，明月光，疑是地上霜啊，举头
  98.         床前明月光啊，明月光，疑是地上霜啊，举头
  99.         床前明月光啊，明月光，疑是地上霜啊，举头
  100.         床前明月光啊，明月光，疑是地上霜啊，举头
  101.         床前明月光啊，明月光，疑是地上霜啊，举头
  102.         床前明月光啊，明月光，疑是地上霜啊，举头
  103.         床前明月光啊，明月光，疑是地上霜啊，举头
  104.         床前明月光啊，明月光，疑是地上霜啊，举头
  105.         床前明月光啊，明月光，疑是地上霜啊，举头
  106.         床前明月光啊，明月光，疑是地上霜啊，举头
  107.         床前明月光啊，明月光，疑是地上霜啊，举头
  108.         床前明月光啊，明月光，疑是地上霜啊，举头
  109.         床前明月光啊，明月光，疑是地上霜啊，举头
  110.         床前明月光啊，明月光，疑是地上霜啊，举头
  111.         床前明月光啊，明月光，疑是地上霜啊，举头
  112.         床前明月光啊，明月光，疑是地上霜啊，举头
  113.         床前明月光啊，明月光，疑是地上霜啊，举头
  114.         床前明月光啊，明月光，疑是地上霜啊，举头
  115.         床前明月光啊，明月光，疑是地上霜啊，举头
  116.         床前明月光啊，明月光，疑是地上霜啊，举头
  117.         床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿
  119.     </div><!--文字内容-->
  120.     <div id="scroll" class="scroll"><!--装滚动条的层-->
  121.         <div class="bar" id="bar"></div><!--滚动条-->
  122.     </div>
  123. </div>
  124. <script src="common.js"></script>
  125. <script>
  126.     //获取需要的元素
  127.     var box = my$("box");
  128.     var content = my$("content");
  129.     var scroll = my$("scroll");
  130.     var bar = my$("bar");
  132.     bar.style.height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight + "px";
  134.     bar.onmousedown = function (e) {
  135.         var spaceY = e.clientY - bar.offsetTop;
  136.         document.onmousemove = function (e) {
  137.             var y = e.clientY - spaceY;
  138.             y = y < 0 ? 0 : y;
  139.             y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;
  140.             bar.style.top = y + "px";
  141.             window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  142.             var moveY = -y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);
  143.             content.style.marginTop = moveY + "px";
  144.         };
  146.     };
  147.     document.onmouseup = function (e) {
  148.         document.onmousemove = null;
  149.     };
  151.     var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);
  152.     content.style.marginTop = moveY + "px";
  154.     //
  155. </script>
  157. </body>
  158. </html>

设置鼠标按下时不选中文本

window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();

元素隐藏的不同方式：

  1. 案例：表格隔行变色
  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style>
  8.     * {
  9.       padding: 0;
  10.       margin: 0;
  11.     }
  13.     .wrap {
  14.       width: 500px;
  15.       margin: 100px auto 0;
  16.     }
  18.     table {
  19.       border-collapse: collapse;
  20.       border-spacing: 0;
  21.       border: 1px solid #c0c0c0;
  22.       width: 500px;
  23.       cursor: pointer;
  24.     }
  26.     th,
  27.     td {
  28.       border: 1px solid #d0d0d0;
  29.       color: #404060;
  30.       padding: 10px;
  31.     }
  33.     th {
  34.       background-color: #09c;
  35.       font: bold 16px "微软雅黑";
  36.       color: #fff;
  37.     }
  39.     td {
  40.       font: 14px "微软雅黑";
  41.     }
  43.     tbody tr {
  44.       background-color: pink;
  45.     }
  46.   </style>
  47. </head>
  48. <body>
  49. <div class="wrap">
  50.   <table>
  51.     <thead>
  52.     <tr>
  53.       <th>序号</th>
  54.       <th>姓名</th>
  55.       <th>课程</th>
  56.       <th>成绩</th>
  57.     </tr>
  58.     </thead>
  59.     <tbody id="j_tb">
  60.     <tr>
  61.       <td>
  62.         1
  63.       </td>
  64.       <td>柳岩</td>
  65.       <td>语文</td>
  66.       <td>100</td>
  68.     </tr>
  69.     <tr>
  70.       <td>
  71.         2
  72.       </td>
  73.       <td>苍老师</td>
  74.       <td>日语</td>
  75.       <td>100</td>
  76.     </tr>
  77.     <tr>
  78.       <td>
  79.         3
  80.       </td>
  81.       <td>凤姐</td>
  82.       <td>营销学</td>
  83.       <td>100</td>
  84.     </tr>
  85.     <tr>
  86.       <td>
  87.         4
  88.       </td>
  89.       <td>芙蓉姐姐</td>
  90.       <td>数学</td>
  91.       <td>10</td>
  92.     </tr>
  93.     <tr>
  94.       <td>
  95.         5
  96.       </td>
  97.       <td>佐助</td>
  98.       <td>英语</td>
  99.       <td>100</td>
  100.     </tr>
  101.     <tr>
  102.       <td>
  103.         6
  104.       </td>
  105.       <td>卡卡西</td>
  106.       <td>体育</td>
  107.       <td>100</td>
  108.     </tr>
  109.     <tr>
  110.       <td>
  111.         7
  112.       </td>
  113.       <td>乔峰</td>
  114.       <td>体育</td>
  115.       <td>100</td>
  116.     </tr>
  117.     </tbody>
  118.   </table>
  119. </div>
  120. <script src="common.js"></script>
  121. <script>
  123.   //先获取所有的行
  124.   var trs = my$("j_tb").getElementsByTagName("tr");
  125.   for (var i = 0; i < trs.length; i++) {
  126.     trs[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
  127.     //鼠标进入
  128.     trs[i].onmouseover = mouseoverHandle;
  129.     //鼠标离开
  130.     trs[i].onmouseout = mouseoutHandle;
  131.   }
  132.   //当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开再恢复即可
  133.   var lastColor = "";
  134.   function mouseoverHandle() {//鼠标进入
  135.     lastColor = this.style.backgroundColor;
  136.     this.style.backgroundColor = "green";
  137.   }
  138.   function mouseoutHandle() {//鼠标离开
  139.     this.style.backgroundColor = lastColor;
  140.   }
  141. </script>
  143. </body>
  144. </html>
  1. 案例：tab切换效果
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Title</title>
  7.   <style>
  8.     #list li {
  9.       list-style-type: none;
  10.       width: 80px;
  11.       height: 30px;
  12.       line-height: 30px;
  13.       background-color: beige;
  14.       text-align: center;
  15.       float: left;
  16.       margin-left: 5px;
  17.     }
  19.     #list li.current {
  20.       background-color: burlywood;
  21.     }
  23.     #list li a {
  24.       text-decoration: none;
  25.     }
  26.   </style>
  28. </head>
  29. <body>
  30. <div id="menu">
  31.   <ul id="list">
  32.     <li class="current"><a href="http://www.baidu.com">首页</a>
  33.     </li>
  34.     <li><a href="javascript:void(0)">播客</a></li>
  35.     <li><a href="javascript:void(0)">博客</a></li>
  36.     <li><a href="javascript:void(0)">相册</a></li>
  37.     <li><a href="javascript:void(0)">关于</a></li>
  38.     <li><a href="javascript:void(0)">帮助</a></li>
  39.   </ul>
  40. </div>
  41. <script src="common.js"></script>
  42. <script>
  44.   //获取所有的li标签,
  45.   var liObjs=my$("list").getElementsByTagName("li");
  46.   //循环遍历,找到每个li中的a,注册点击事件
  47.   for(var i=0;i<liObjs.length;i++){
  48.     //每个li中的a
  49.     var aObj=getFirstElement(liObjs[i]);
  51.     aObj.onclick=function () {
  52.       //第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
  53.       for(var j=0;j<liObjs.length;j++){
  54.         liObjs[j].removeAttribute("class");
  55.       }
  56.       //第二件事:
  57.       //当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
  58.       this.parentNode.className="current";
  60.       return false;//阻止超链接跳转
  61.     };
  62.   }
  63. </script>
  65. </body>
  66. </html>
  1. //案例：大量字符串拼接
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>title</title>
  8. </head>
  9. <body>
  10. <input type="button" value="拼接吧" id="btn"/><br/>
  11. <input type="text" value=""/><br/>
  12. <input type="text" value=""/><br/>
  13. <input type="text" value=""/><br/>
  14. <input type="text" value=""/><br/>
  15. <input type="text" value=""/><br/>
  16. <script src="common.js"></script>
  17. <script>
  19.   //  var str="abcef";
  20.   //  console.log(str[2]);
  21.   //  str[2]="H";
  22.   //  console.log(str);
  24.   //字符串特性:不可变性
  25.   //点击按钮实现拼接
  26.   //  document.getElementById("btn").onclick=function () {
  27.   //    var str="";
  28.   //    //获取所有的文本框
  29.   //    var inputs=document.getElementsByTagName("input");
  30.   //    //每个文本框的value属性值
  31.   //    for(var i=0;i<inputs.length-1;i++){
  32.   //      if(inputs[i].type!="button"){
  33.   //        str+=inputs[i].value+"|";
  34.   //      }
  35.   //    }
  36.   //    console.log(str+inputs[inputs.length-1].value);
  37.   //  };
  39.   //推荐使用数组的方式拼接大量的字符串
  40.   document.getElementById("btn").onclick = function () {
  41.     var str = [];
  42.     //获取所有的文本框
  43.     var inputs = document.getElementsByTagName("input");
  44.     //每个文本框的value属性值
  45.     for (var i = 0; i < inputs.length; i++) {
  46.       if (inputs[i].type != "button") {
  47.         str.push(inputs[i].value);
  48.       }
  49.     }
  50.     console.log(str.join("|"));//字符串
  51.   };
  52. </script>
  54. </body>
  55. </html>

推荐使用数组的方式拼接大量字符串

  1. 案例：评论
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>title</title>
  7. </head>
  8. <body>
  9. <table id="tb" border="1">
  10.   <tbody id="tbd">
  11.   <tr>
  12.     <td>猪猪:</td>
  13.     <td>我喜欢吃肉</td>
  14.   </tr>
  15.   </tbody>
  16. </table>
  17. <div>
  18.   昵称:<input type="text" value="" id="userName"/><br/>
  19.   <textarea name="" id="tt" cols="30" rows="10"></textarea><br/>
  20.   <input type="button" value="评论一下" id="btn"/><br/>
  21. </div>
  22. <script src="common.js"></script>
  23. <script>
  24.   //获取按钮,注册点击事件
  25.   document.getElementById("btn").onclick = function () {
  26.     //获取昵称的元素
  27.     var userName = my$("userName");
  28.     //获取评论的元素
  29.     var tt = my$("tt");
  30.     //创建行
  31.     var tr = document.createElement("tr");
  32.     //行加到tbody中
  33.     my$("tbd").appendChild(tr);
  34.     //创建列
  35.     var td1 = document.createElement("td");
  36.     tr.appendChild(td1);
  37.     td1.innerHTML = userName.value;
  38.     //创建列
  39.     var td2 = document.createElement("td");
  40.     tr.appendChild(td2);
  41.     td2.innerHTML = tt.value;
  42.     //清空
  43.     userName.value = "";
  44.     tt.value = "";
  45.   };

JSAP107的更多相关文章

随机推荐

  1. Tomcat模型结构

    一.请求过程 Tomca的两大组件:Connecter和Container Connecter组件 1.Connecter将在某个指定的端口上侦听客户请求,接收浏览器的发过来的 tcp 连接请求,创建 ...

  2. js/jquery如何获取获取父窗口的元素

    1.$("#父窗口元素ID",window.parent.document); 对应javascript版本为 window.parent.document.getElementB ...

  3. python全栈开发day66-视图系统、路由系统

    一.昨日内容回顾 1. tags 1. for循环 {% for name in name_list %} {{ name }} {% endfor %} {% for name in name_li ...

  4. window下面的守护进程,redis守护进程,RunHiddenConsole免费下载

    redis版本 在redis的目录下新建start_redis.bat 写入一下代码: D:/redis/RunHiddenConsole/RunHiddenConsole.exe redis-ser ...

  5. windows快速进入安装目录

    ctrl+R 输入%LOCALAPPDATA%\+应用名字 %LOCALAPPDATA%\composer

  6. ASP.NET MVC 路由篇二

    轉載 http://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_route_2.html 7.解决与物理路径的冲突 当发送一个请求至ASP.NET MVC时,其实会 ...

  7. scrapy 手动编写模板

    import scrapy class Tzspider(scrapy.Spider): # spider的名字,唯一 name = 'tz' # 初始url列表 start_urls = ['htt ...

  8. Codeforces gym 101291 M (最长交替子序列)【DP】

    <题目链接> 题目大意:给你一段序列,要求你求出该序列的最长交替子序列,所谓最长交替子序列就是,这段序列的相邻三项必须是先递增再递减或者先递减再递增这样交替下去. 解题分析: 这与一道dp ...

  9. hdu3038

    hdu3038带权并查集这种问题不仅仅要处理不同的点的是否在同一个集合里之类的问题,点与点之间存在连线,其带有权值,在路径压缩的时候也要对权值进行操作这道题就是带权并查集+向量去做 #include& ...

  10. python 词云小demo

    词云小demo jiebawordcloud 一 什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...