断断续续的把慕课的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. （转）回车 执行button点击

    功能说明:当我们注册或者执行搜索时,输入内容后,不用单击按钮来执行按钮单击事件,而直接通过回车来执行按钮单击事件.只要在text框中onkeydown事件中加入执行按钮的onclick事件就OK了 代 ...

  2. 【nodejs学习】0.nodejs学习第一天

    1.模块 大一点的程序都需要模块化,nodejs也不例外,代码放到不同的文件中,每一个文件就可以是一个模块,文件路径名就是一个模块名.每个模块中包含三个预先定义的变量: 1.require:用于在当前 ...

  3. POJ3662 Telephone Lines( dijkstral + 二分 )

    POJ3662 Telephone Lines 题目大意:要在顶点1到顶点n之间建一条路径,假设这条路径有m条边,其中有k条边是免费的,剩余m-k条边是要收费的, 求这m-k条边中花费最大的一条边的最 ...

  4. 对于js原型和原型链继承的简单理解（第一种，原型链继承）

    原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解.来判断被面试者对js的熟悉程度. 原型的定义 Js所有的函数都有一个prototype属性,这个属性引 ...

  5. android 巧用finish方法

    在android应用开发中,我们从一个activity跳到另一个activity时,我么要用到Intent: eg:Intent intent = new Intent(A.this,B.class) ...

  6. 解决gradle:download特别慢的问题

    使用AndroidStudio 2.2.2 新增加了一个dependencies,需要下载jar包,此时就会卡在 gradle:download https://….. 这个状态中. 原因就是因为我们 ...

  7. android 数据存储的几种方式

    总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.其中文件和数据库可能用的稍多一些,文件用起来较为方便,程序可以自己定义格式:数据库用起稍烦锁一些,但它有它的优点,比如在海量数 ...

  8. Windows脚本 - %~dp0的含义

    含义是:更改当前目录为批处理本身的目录,有些晕吧?不急,我举例 比如你有个批处理a.bat在D:\qq文件夹下  a.bat内容为 cd /d %~dp0 在这里,cd /d %~dp0的意思就是cd ...

  9. Cmake 脚本对预处理器的宏定义

    我们有些时候会在#if   #ifndef   等预编译命令里面看到_WIN32等定义的宏.但是有些宏定义,你即使通过Visual Studio右键的go to definitions 和go to ...

  10. logstash 通过type判断

    [elk@zjtest7-frontend type]$ cat input.conf input { file { type => "type_a" path => ...