使用JS完成表格的隔行换色

  • 新标签的学习

  1.   <thead>
  2.     <tr>
  3.       <th></th>
  4.     </tr>
  5.   </thead>
  6.   <tbody>
  7.     <tr>
  8.       <td></td>
  9.     </tr>
  10.   </tbody>

  • 确定事件(页面加载事件onload)

  • 获取元素: 获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)

    • Tbody里面的行数(rows.length)

    • JS的遍历(for 循环)

    • 获取奇数行和偶数行(对遍历中角标对2取余)

    • 设置背景颜色(.style.backgroundColor)

  • 步骤分析

第一步: 确定事件(onload)，并为其绑定一个函数

第二步: 书写函数(获取表格)

第三步: 获取tbody里面的行数

第四步: 对tbody里面的行数进行遍历

第五步: 获取奇偶行和偶数行(角标对2取余)

第六步: 分别对奇数行和偶数行设置背景颜色

  • 代码实现

  1.    <script>
  2.       //无名函数
  3.       window.onload = function() {
  4.         //1.获取表格
  5.         var tbEle = document.getElementById("tbl");
  6.         //2.获取表格中tbody里面的行数(长度)
  7.         var len = tbEle.tBodies[0].rows.length;
  8.         // alert(len);
  9.         //3.对tbody里面的行进行遍历
  10.         for(var i = 0; i < len; i++) {
  11.           if (i % 2 == 0) {
  12.             //4.对偶数行设置背景颜色
  13.             tbEle.tBodies[0].rows[i].style.backgroundColor = "pink";
  14.           } else {
  15.             //5.对奇数行设置背景颜色
  16.             tbEle.tBodies[0].rows[i].style.backgroundColor = "yellow";
  17.           }
  18.         }
  19.       }
  20.    </script>

实现一个表格的高亮显示

分析：

第一步: 确定事件(onmouseover 和 onmouseout)并分别为其绑定一个函数

第二步: 获取鼠标移上去的那行，对其设置背景颜色

第三步：移出鼠标，对其设置背景颜色

  1. <script>
  2.       function changeColor(id, flag) {
  3.         if (flag == 'over') {
  4.           document.getElementById(id).style.backgroundColor="red";
  5.         } else if (flag == 'out') {
  6.           document.getElementById(id).style.backgroundColor="white";
  7.         }
  8.       }
  9.   </script>
  10.   ​
  11.   <body>
  12.       <table border="1" width="500" height="50" align="center" id="trl">
  13.         <thead>
  14.           <tr>
  15.             <th>编号</th>
  16.             <th>姓名</th>
  17.             <th>年龄</th>
  18.           </tr>
  19.         </thead>
  20.         <tbody>
  21.           <tr onmouseover="changeColor('tr1', 'over')" id="tr1" onmouseout="changeColor('tr1', 'out')">
  22.             <td>1</td>
  23.             <td>张三</td>
  24.             <td>22</td>
  25.           </tr >
  26.         </tbody>
  27.       </table>
  28.   </body>

  • 总结

之前使用过的事件(onsubmit/onclick/onload/ onfocus/onblur /onmouseover/onmouseout)

onfocus/onblur :

聚焦离焦事件，用于表单校验的时候比较合适

Onclick/ondblclick:

鼠标单击和双击事件

onkeydown/onkeypress:

搜索引擎使用较多

onload: 页面加载,就访问的代码，其他所有的操作(匿名方式)都可以放到这个绑定的函数里

onmouserover/onmouseout/onmousemove: 购物网站商品详情页

onsubmit: : 单提交事件

onchange: 当用户改变内容的时候使用这个事件(二级联动)

  • 技术分析

确定事件(鼠标单击事件 onclick), 事件绑定到前面的复选框

获取编号前面的复选框的专题(是否选中)

​ 获取复选框: var checkAllEle = document.getElementById("id")​ 获取复选框的状态: checkAllEle.checked?

获取下面所有的复选框:

document.getElementByName("name")

  • 步骤分析

第一步: 确定事件(onclick)并为其绑定一个函数

第二步: 书写函数(获取编号前面的复选框, 获取其状态)

第三步: 判断编号前面复选框的状态(如果为选中, 获取下面所有的复选框, 并将其状态置为选中)

第四步: 判断编号前面的复选框的状态(如果未选中, 获取下面所有的复选框, 并将其状态置为未选中)

  1. <script>
  2.       function checkAll() {
  3.           //1.获取编号前面的复选框
  4.           var checkAllEle = document.getElementById("checkAll");
  5.           //2.对编号前面的复选框的状态进行判断
  6.           if (checkAllEle.checked == true) {
  7.               //3.后去下面所有的复选框
  8.               var checkOnes = document.getElementsByName("checkOne");
  9.               for (var i = 0; i < checkOnes.length; i++) {
  10.                   //5.拿到每一个复选框,并将其状态置为选中
  11.                   checkOnes[i].checked = true;
  12.               }
  13.           } else {
  14.               //6.获取下面所有的复选框
  15.               var checkOnes = document.getElementsByName("checkOne");
  16.               //7.对获取的所有复选框进行遍历
  17.               for (var i = 0; i < checkOnes.length; i++) {
  18.                   //8.拿到每一个复选框,并将其状态置为未选中
  19.                   checkOnes[i].checked = false;
  20.               }
  21.           }
  22.       }
  23.   </script>
  25.   <html>
  26.       <head>
  27.             <title></title>
  28.             <style></style>
  29.             <link/>
  30.       </head>
  31.       <body>
  32.             <span></span>
  33.             <div>
  34.                 <img src='' />
  35.             </div>
  36.             <p></p>
  37.       </body>
  38.   </html>

Document对象

Document: 整个html文件都成为一个document文档

Element: 所有的标签都是Element元素

Attribute: 标签里面的属性

Text: 标签中间夹着的内容为 text文本

Node: document，element、attribute、text统称为结点node

(getElementsByName(), getElementsByTagName() ) 后面两个方法获取之后需要遍历!

Element 对象

我们所认知的HTML页面中所有的标签都是element元素

element.appendChild() 向元素添加新的子节点，作为最后一个子节点

element.firstChild() 返回元素的首个子节点

element.getAttribute() 获得指定属性值

element.innerHTML 设置或返回元素的内容

element.insetBefore() 在指定的已有的子节点之前插入新节点.

element.setAtrribute()

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

attr.value 设置或返回属性的值

DOM练习

  1.   在页面中使用列表显示一些城市
      <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
      </ul>
      我们希望点击一个按钮实现动态添加城市
      ​
      分析:
          事件(onclick)
          获取ul元素节点
          创建一个城市的文本节点
          创建一个li元素节点
          使用element里面的方法appendChild()来添加子节点

代码

  1.   <!DOCTYPE html>
  2.   <html>
  3.       <head>
  4.           <meta charset="UTF-8">
  5.           <title>动态添加城市</title>
  6.           <script>
  7.               window.onload = function() {
  8.                   document.getElementById("btn").onclick = function() {
  9.                       //1.获取ul元素节点
  10.                       var ulEle = document.getElementById("ul1");
  11.                       //2.创建城市文本结点
  12.                       var textNode = document.createTextNode("深圳");  //深圳
  13.                       //3.创建li元素节点
  14.                       var liEle = document.createElement("li");  // <li></li>
  15.                       //4.将城市文本结点添加到li元素中去
  16.                       liEle.appendChild(textNode);
  17.                       //5.讲li添加到ui中去
  18.                       ulEle.appendChild(liEle);
  19.                   }
  20.               }
  21.           </script>
  22.       </head>
  23.       <body>
  24.           <input type="button" value="添加新城市" id="btn" />
  25.           <ul id="ul1">
  26.               <li>北京</li>
  27.               <li>上海</li>
  28.               <li>广州</li>
  29.           </ul>
  30.       </body>
  31.   </html>

用JS完成省市二级联动

  1. 需求分析

    希望在注册页面中添加一个字段(籍贯), 当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市,显示效果如下

  2. 技术分析:

    事件(onchange)

    使用一个二维数组来存储省份和城市(二维数组的创建?)

    获取用户选择的省份(使用方法传参的方式: this.value)

    遍历数组 (获取省份与用户选择的省份比较, 如果相同了, 继续遍历该省份下所有的城市)

    创建文本结点和元素结点，并进行添加操作

    createTextNode / createElement appendChild()

  3. 步骤分析

    第一步: 确定事件(onchange)并为其绑定一个函数

    第二步: 创建一个二维数组用于存储省份和城市

    第三步: 获取用户选择的省份

    第四步: 遍历二维数组中的省份

    第五步: 将遍历的与用户选择的省份比较

    第六步: 如果相同，遍历该省份下的所有城市

    第七步: 创建城市文本结点

    第八步: 创建option元素结点

    第九步: 将城市文本结点添加到option元素结点中去

    第十步: 获取第二个下拉列表，讲option元素结点添加进去

    第十一步: 每次操作前清空下拉列表的option内容

代码:

  1.   <script>
  2.   ​
  3.       //1.创建一个二维数组用于存储省份和城市
  4.       var cities = new Array(4);
  5.       for (var i = 0; i < cities.length; i++) {
  6.         cities[i] = new Array("武汉市" + i, "黄冈市" + i, "荆州市" + i);
  7.       }
  8.       function changeCity(val) {
  9.   ​
  10.         //7.获取第二个下拉列表
  11.         var cityEle = document.getElementById("city");
  12.   ​
  13.         //9.清空第二个下拉列表的option内容
  14.         cityEle.options.length = 0;
  15.   ​
  16.         //2.遍历二维数组中的省份
  17.         for (var i = 0; i < cities.length; i++) {
  18.           if (val == i) {
  19.             //3.遍历用户选择省份下的城市
  20.             for (var j = 0; j < cities[i].length; j++) {
  21.               //4.创建城市的文本操作
  22.               var textNode = document.createTextNode(cities[i][j]);
  23.               //5.创建option元素结点
  24.               var opEle = document.createElement("option");
  25.               //6.将城市的文本结点添加到option元素结点
  26.               opEle.appendChild(textNode);
  27.               //8.将option元素结点添加到第二个下拉列表中去
  28.               cityEle.appendChild(opEle);
  29.             }
  30.           }
  31.         }
  32.       }
  33.   </script>
  34.   ​
  35.   <tr>
  36.       <td>籍贯</td>
  37.       <td>
  38.         <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
  39.         <select onchange="changeCity(this.value)">
  40.           <option>--请选择--</option>
  41.           <option value="0">湖北</option>
  42.           <option value="1">湖南</option>
  43.           <option value="2">河南</option>
  44.           <option value="3">河北</option>
  45.         </select>
  46.         <select id="city">
  47.   ​
  48.         </select>
  49.       </td>
  50.   </tr>

JS的内置对象

  • JS Array

  • JS Boolean

  • JS Date

  • JS Math

  • JS Number

  • JS String

  • JS RegExp

JavaScrip入门笔记（二）的更多相关文章

  1. Shader 入门笔记(二) CPU和GPU之间的通信,渲染流水线

    渲染流水线 1)应用阶段(CPU处理) 首先,准备好场景数据(摄像机位置,视锥体,模型和光源等) 接着,做粗粒度剔除工作. 最后,设置好每个模型的渲染状态(使用的材质,纹理,shader等) 这一阶段 ...

  2. onethink入门笔记(二)

    5.onethink页面端获得后台服务器传值的方法 1:一般后台通过assign的值前台通过{$value}显示出来; 2:如果需要在js中使用 则可以通过 在js中写 var m = "{ ...

  3. OpenGLES入门笔记二

    #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> #import <OpenGLES/ES2/gl.h& ...

  4. Redis入门笔记(二)-配置及运行

    转自: http://gly199.iteye.com/blog/1056424 1.redis基本参数 redis的配置文件中的常见参数如下: daemonize   是否以后台进程运行,默认为no ...

  5. nodeJs入门笔记(二)

    js中window通常是全局变量 global 是node.js里的全局变量 node中能访问的对象一般都是 global的 属性 global 对象属性 process 用于描述当前Node 进程状 ...

  6. Scala入门笔记二

    [TOC] 标识符 可用的字符 处理括号类字符,分隔符之外,其他所有的可打印的ASCII字符,如字母,数字,下划线和美元符号($)均可出现在Scala标识符中 插入符包括了(,) [,] {,and} ...

  7. Shader 入门笔记(二) CPU和GPU之间的通信

    渲染流水线的起点是CPU,即应用阶段. 1)把数据加载到显存中 2)设置渲染状态,通俗说这些状态定义了场景中的网格是怎样被渲染的. 3)调用DrawCall,一个命令,CPU通知GPU.(这个命令仅仅 ...

  8. SpringBoot入门笔记(二)、使用fastjson

    1.添加fastjson配置 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastj ...

  9. JS高度融合入门笔记(二)

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS ...

随机推荐

  1. Python：集合操作总结

    集合是一组无序排列的不重复元素集 [注]:集合的最大作用是对一个序列进行去重操作 一.集合的分类 在Python中集合分为两类,为可变集合(set)和不可变集合(frozenset).对于可变集合(s ...

  2. U盘安装OSX

    1.插入U盘,磁盘工具,格式化U盘为Mac OS X拓展 (日志式): 2.去网站搜索recovery disk assistant,此文件大约1.1M,直接打开使用它制作启动盘,进度条完毕就完成了. ...

  3. mysql 设置远程登录

    1.本机登录进mysql,并切换到本机mysql数据库下 2. GRANT ALL PRIVILEGES ON *.* TO 'tigase'@'%' IDENTIFIED BY '123456' W ...

  4. Eclipse的黑色主题背景(github)

    MoonRise UI Theme   An early version of a dark UI theme for Eclipse 4+. Requirements Eclipse 4.2+ In ...

  5. 设计 Azure SQL 数据库，并使用 C# 和 ADO.NET 进行连接

    标题:设计 Azure SQL 数据库,并使用 C# 和 ADO.NET 进行连接 里面有使用C#使用SqlServer的例子.

  6. 可以从Jar外部加载JDBC.properties的Spring-mybatis配置文件

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  7. C++变量内存分配及类型修饰符

    前言 了解C++程序内存分配,有助于深刻理解变量的初始化值以及其生存周期.另外,变量类型修饰符也会影响到变量的初始化值及其生存周期.掌握了不同类型变量的初始化值及其生存周期,能够让我们设计程序时定义变 ...

  8. sublime text3 php开发必要的插件

    一.安装Sublime Text 3 官网 http://www.sublimetext.com/3 一定要选择ST3,而不是ST2,3比2好用,真的,后面你就知道了. 选择对应的版本安装.完事后,要 ...

  9. MachineLearning ---- lesson 2 Linear Regression with One Variable

    Linear Regression with One Variable model Representation 以上篇博文中的房价预测为例,从图中依次来看,m表示训练集的大小,此处即房价样本数量:x ...

  10. Contest 7

    A:搜索好难啊根本不会啊. B:原题都能写挂没救了啊.考虑求出每个数作为最小值时能向左向右扩展到的最远位置,那么这段区间里的所有数就不可能作为唯一的最小值成为最优解了,否则假设可以的话这段区间里的数都 ...