断断续续的把慕课的JavaScript基础和进阶看完了，期间不怎么应用有的都忘记了，接下来多开始写些效果，进行实际应用。

制作一个表格，显示班级的学生信息。

1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff

2. 点击添加按钮，能动态在最后添加一行

3. 点击删除按钮，则删除当前行

 <!DOCTYPE html>

 <html>

 <head>

 <title> new document </title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <script type="text/javascript">

      window.onload = function(){

         Highlight();

      }

     function Highlight(){

         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

         var tbody = document.getElementById('table').lastChild;

         var trs = tbody.getElementsByTagName("tr");

         for(var i = 1; i < trs.length; i++){

             trs[i].onmouseover = function(){

                 this.style.background = "#f2f2f2";

             }

             trs[i].onmouseout = function(){

                 this.style.background = "#fff";

             };

         };

     };

     // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

     function addOne(){

         var tbody = document.getElementById("table").lastChild;

         var tr = document.createElement("tr");

         var td = document.createElement("td");

         td.innerHTML = ("<input type='text'/>");

         tr.appendChild(td);

         var td = document.createElement("td");

         td.innerHTML = ("<input type='text'/>");

         tr.appendChild(td);

         var td = document.createElement("td");

         td.innerHTML = ("<a onclick='delet(this)' href='javascript:;' >删除</a>");

         tr.appendChild(td);

         tbody.appendChild(tr);

          Highlight();

     }

     // 创建删除函数

     function delet(ss){

         var tbody = document.getElementById("table").lastChild;

         var tr = ss.parentNode.parentNode;

         tbody.removeChild(tr);

     }

 </script>

 </head>

 <body>

     <table border="1" width="50%" id="table">

         <tr>

             <th>学号</th>

             <th>姓名</th>

             <th>操作</th>

         </tr>

         <tr>

             <td>xh001</td>

             <td>王小明</td>

             <td><a onclick="delet(this)" href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

         </tr>

         <tr>

             <td>xh002</td>

             <td>刘小芳</td>

             <td><a onclick="delet(this)" href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

         </tr>

     </table>

     <input type="button" value="添加一行" onclick="addOne()" />   <!--在添加按钮上添加点击事件  -->

 </body>

 </html>

选项卡效果：

 <!DOCTYPE html>

 <html>

 <head lang="en">

 <meta charset="UTF-8">

 <title>实践题 - 选项卡</title>

 <style type="text/css">

 /* CSS样式制作 */

     *{  padding: 0; margin: 0; }

     ul li{ list-style: none; }

     #tabs{ width: 276px; margin-left: 50px;}

     #tabs .tabs_title{ border-bottom: 2px solid #8B4513; height: 32px;}

     #tabs .tabs_title li{ float: left; display: inline-block; background: #fff; width: 80px; line-height: 30px; text-align: center; border: 1px solid #eeefef; border-bottom: none; margin-right: 10px; cursor: pointer;}

     #tabs .tabs_title .on{ border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF; }

     #tabs div{ border: 1px solid #7396b8; border-top: none; line-height: 38px; }

     #tabs .tabs_hide{ display: none; }

 </style>

 <script type="text/javascript">

 // JS实现选项卡切换

 window.onload = function(){

     var tabs = document.getElementById("tabs");

     var tabs_ul = tabs.getElementsByTagName("ul")[0];

     var tabs_li = tabs_ul.getElementsByTagName("li");

     var tabs_main = tabs.getElementsByTagName("div");

     for (var i = 0 , len = tabs_li.length; i < len; i++) {

         tabs_li[i].index = i;

         tabs_li[i].onclick = function(){

             for(var n = 0; n < len; n++){

                 tabs_li[n].className = "";

                 tabs_main[n].className = "tabs_hide";

             }

              this.className = "on";

              tabs_main[this.index].className = "";

         }

     }

 }

 </script>

 </head>

 <body>

 <!-- HTML页面布局 -->

 <div id="tabs">

     <ul class="tabs_title">

         <li class="on">房产</li>

         <li>家居</li>

         <li>二手房</li>

     </ul>

     <div>

         <p>275万购昌平邻铁三居 总价20万买一居</p>

         <p>200万内购五环三居 140万安家东三环</p>

         <p>北京首现零首付楼盘 53万购东5环50平</p>

         <p>京楼盘直降5000 中信府 公园楼王现房</p>

     </div>

     <div class="tabs_hide">

         <p>40平出租屋大改造 美少女的混搭小窝</p>

         <p>经典清新简欧爱家 90平老房焕发新生</p>

         <p>新中式的酷色温情 66平撞色活泼家居</p>

         <p>瓷砖就像选好老婆 卫生间烟道的设计</p>

     </div>

     <div class="tabs_hide">

         <p>通州豪华3居260万 二环稀缺2居250w甩</p>

         <p>西3环通透2居290万 130万2居限量抢购</p>

         <p>黄城根小学学区仅260万 121平70万抛!</p>

         <p>独家别墅280万 苏州桥2居优惠价248万</p>

     </div>

 </div>

 </body>

 </html>

Javascript进阶篇——总结--DOM案例+选项卡效果的更多相关文章

  1. ＃笔记＃JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  2. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  3. javascript进阶教程第一章案例实战

    javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...

  4. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  5. 慕课网javascript 进阶篇 第九章 编程练习

    把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...

  6. JavaScript进阶篇 - -第1章 系好安全带

    第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  9. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

随机推荐

  1. ReportViewer导出功能筛选

    ReportViewer只能导出Excel,把导出Word和PDF功能去掉 <rsweb:ReportViewer ID="ReportViewer1" runat=&quo ...

  2. Android Log日志文件的分析、查看

    Log 在android中的地位非常重要,要是作为一个android程序员不能过分析log这关,算是android没有入门吧 . 下面我们就来说说如何处理log文件 什么时候会产生log文件呢 ?一般 ...

  3. mysql用户修改密码

    1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 2:用mysq ...

  4. 将含有父ID的列表转成树

    我们知道数据库一般是以一个列表(id,pid)的形式保存树的.如何提取这棵树呢?最简单的方法就是根据pid循环查表.但是毫无疑问,这会产生巨大的数据库查询开销. 那么一般建议的方法是一次性将全部相关数 ...

  5. UC/OS操作系统 （转）

    1.和其他一些著名的嵌入式操作系统不同,uC/OS-II在单片机系统中的启动过程比较简单,不像有些操作系统那样,需要把内核编译成一个映像文件写入ROM中,上电复位后,再从ROM中把文件加载到RAM中去 ...

  6. 总结 xib

    总结 其实,你完全不需要做一个 “艰难的决定”,你可以像 QQ 和微信那样,根据具体情况来选择性的使用 xib 和 storyboard.这里有我的一些建议: 对于复杂的.动态生成的界面,建议使用手工 ...

  7. IOS内存nil与release的区别

      IOS内存nil与release的区别   分类: IOS内存管理 nil和release的作用: nil就是把一个对象的指针置为空,只是切断了指针与内存中对象的联系:而release才是真正通知 ...

  8. Unity3d有关图形尺寸大小的注意事项

    主要参考了官方文档,然后根据个人的理解撰写该文.Unity3D支持的图形文件格式有 PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, PICT(但根据本人的亲手测试,U ...

  9. 常用的Windows批处理

      切换执行路径 如果不换盘的话:cd xxx换盘:cd /d xxx   获取当前日期 编写Windows批处理时经常会需要使用到日期和时间作为文件名,所以是非常重要的. 如何获取日期呢?格式:  ...

  10. 新闻:型牌男装：网上订服装，如何将返修率降到5个点以下 | IT桔子

    新闻:型牌男装:网上订服装,如何将返修率降到5个点以下 | IT桔子 型牌男装:网上订服装,如何将返修率降到5个点以下