断断续续的把慕课的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. 【转】 LINQ To SQL 语法及实例大全

    LINQ to SQL语句(1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子 ...

  2. javascript sort 用法

    <html> <head> <title></title> <script type="text/javascript" sr ...

  3. jquery中attr与pror

  4. 打开较大存储量的.sql文件时，出现SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问

    1. “消息 15281,级别 16,状态 1,过程 xp_cmdshell,第 1 行SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访 ...

  5. 使用DataSet数据集删除记录

    使用DataSet删除记录和使用DataSet更新记录非常的相似,DataSet删除记录的步骤如下所示. q  创建一个Connection对象. q  创建一个DataAdapter对象. q  初 ...

  6. C#ArrayList对象集合

    ArrayList alist = new ArrayList(); //集合对像 长度可以改变,类型不限 //添加单个元素可以Add() alist.Add("在在的"); al ...

  7. PHP中取出字符串中的空格 逗号

    preg_replace("/\s| |,|,/","",$_str) PHP中取出字符串中的空格 逗号 (包括中文状态下)

  8. 怎样使用pyinstaller打包

    安装好pyinstaller后 cd 到pyinstaller.py目录,在命令行输入:python pyinstaller.py 参数 主文件所在目录 如:python pyinstaller.py ...

  9. python 解决递归调用栈溢出

    递归函数 2578次阅读 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact ...

  10. Swift数据类型之整型和浮点型－备

    Swift提供8.16.32.64位形式的有符号及无符号整数.这些整数类型遵循C语言的命名规约,我归纳了Swift中的整型: 整型示例: print("UInt8 range: \(UInt ...