JavaScript

JavaScript 教程
JavaScript 和 HTML DOM 参考手册

简介

• 概念

  * 是一门客户端脚本语言
  * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
  * 脚本语言：不需要编译，直接就可以被浏览器解析执行了

• 功能

  可以来增强用户和html页面的交互过程，可以来控制html元素，
      让页面有一些动态的效果，增强用户的体验。

• 发展史

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C--    ，后来更名为：ScriptEase
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，微软抄袭JavaScript开发出JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
  
  * `JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)`
  * ECMAScript：客户端脚本语言的标准

基本语法

与html结合方式

1. 内部JS：
    * 定义<script>，标签体内容就是js代码
2. 外部JS：
    * 定义<script>，通过src属性引入外部的js文件

* 注意：
    1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
    2. <script>可以定义多个。

注释

1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/

数据类型

1. 原始数据类型(基本数据类型)：
    1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
    2. string：字符串。 字符串  "abc" "a" 'abc'
    3. boolean: true和false
    4. null：一个对象为空的占位符
    5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
    
2. 引用数据类型：对象

变量

* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言。
    * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
    * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
* 语法：
    * var 变量名 = 初始化值;

* typeof运算符：获取变量的类型。
    * 注：null运算后得到的是object

运算符

一元运算符

：只有一个运算数的运算符

++，-- ， +(正号)  
* ++ --: 自增(自减)
    * ++(--) 在前，先自增(自减)，再运算
    * ++(--) 在后，先运算，再自增(自减)
* +(-)：正负号
* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

* 其他类型转number：
    * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
    * boolean转number：true转为1，false转为0

算数运算符

+ - * / % ...

赋值运算符

= += -+....

比较运算符

> < >= <= == ===(全等于)
* 比较方式
  1. 类型相同：直接比较
      * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
  2. 类型不同：先进行类型转换，再比较
      * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false


document.write(3 > 4);// false

document.write("abc" < "acd");// true

document.write("123" == 123);// true "123"会类型转换为Number

document.write("123" === 123);// false 先比较类型，再比较大小

逻辑运算符

&& 与(短路)
|| 或(短路)
!  非
* 其他类型转boolean：【0，NaN，""，null，undefined】
   1. number：0或NaN为假，其他为真
   2. string：除了空字符串("")，其他都是true
   3. null&undefined:都是false
   4. 对象：所有对象都为true

三元运算符

? : 表达式
var a = 3;
var b = 4;

var c = a > b ? 1:0;
* 语法：
    * 表达式? 值1:值2;
    * 判断表达式的值，如果是true则取值1，如果是false则取值2；

流程控制语句

1. if...else...
2. switch:
    * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
        * switch(变量):
            case 值:
    * 在JS中,switch语句可以接受任意的原始数据类型
        //var a;// 输出undefined
        var a=2;// 输出default
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("true");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;
            default:
                alert("default");
                break;
        }
3. while 同java
4. do...while 同java
5. for【循环遍历】
    ① 同java
    for (var i = 1; i <= 100; i ++){
    }

    ② 循环数组：这里的n为下标index
    var list=[11,22,33,44];
    for (var n in list) 
    {
        // list[n]表示当前循环的元素
        document.write(n+",");// 0,1,2,3,
    }
    
    ③ 循环对象：这里的k为键的字符串 "name" "age" "gender"
    var person = {"name": "张三", age: 23, 'gender': true};
    for (var k in person)
    {
        // alert(person.k);// 错误用法，会被解析成 person."name"
        alert(k+"---"+person[k]);
    }
    输出结果：
        name---张三
        age---23
        gender---true

JS特殊语法

1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
    * 用：  定义的变量是局部变量
    * 不用：定义的变量是全局变量(不建议)

基本对象

Function

：函数(方法)对象

1. 创建：
    1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
    2. 
        function 方法名称(形式参数列表){
            方法体
        }

    3. 
       var 方法名 = function(形式参数列表){
            方法体
       }
2. 方法：

3. 属性：
    length:代表形参的个数
4. 特点：
    1. 方法定义是，形参的类型不用写,返回值类型也不写。
    2. 方法是一个对象，如果定义名称相同的方法，会覆盖
    3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关，不传形参就是undefined
    4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5. 调用：
    方法名称(实际参数列表);

/**
 * arguments的使用：求任意个数的和
 */
function add (){
   var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        /*
          如果越界，arguments[i]的值就为undefined。
          以下效果相同
          var x=arguments[i]; 
          var x=undefined; 
          var x;
        */
        sum += arguments[i];
    }
    return sum;
}

var sum = add(1,2,3,4);
alert(sum);// 10

Array

:数组对象
更多方法参考
JavaScript Array（数组）对象
JavaScript Array 对象方法

1. 创建：
    1. var arr = new Array(列表);
        列表个数=0 定义空数组
        列表个数=1 定义长度数组
        列表个数>1 定义数组并赋值
    2. var arr = [元素列表];
2. 方法
    join(参数):将数组中的元素按照指定的分隔符拼接为字符串
    push()  向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
    length:数组的长度
4. 特点：
    1. JS中，数组元素的类型可变的。var arr = [1,"abc",true];
    2. JS中，数组长度可变的。
    var arr = [11,"abc",true];
    document.write(arr +"。");// 11,abc,true。
    document.write(arr[0] +"。");// 11。
    document.write(arr[1] +"。");// abc。
    document.write(arr[2] +"。");// true。
    document.write(arr[10] +"。");// undefined。
    arr[10] = "hehe";
    document.write(arr[10] +"。");// hehe。
    document.write(arr[9] +"。");// undefined。
    document.write(arr.length);// 11

Date

：日期对象
JavaScript Date 对象方法

1. 创建：
    var date = new Date();

2. 方法：
    toLocaleString()：返回当前date对象对应的时间本地字符串格式
    getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
    getFullYear() 获取四位年份
    getMonth()+1 月份
    getDate()
    getDay() 0123456 周日 周一 ... 周六

Math

：数学对象

1. 创建：
    * 特点：Math对象不用创建，直接使用。  Math.方法名();

2. 方法：
    random():返回[0,1)随机数。
    ceil(x)：对数进行上取整。1.4=2
    floor(x)：对数进行下取整。1.6=1
    round(x)：把数四舍五入为最接近的整数。1.5=2
    
    Math.ceil(Math.random()*100);// [0,100]
    Math.floor(Math.random()*100)+1;// [1,100]
3. 属性：
    PI

String

方法参考

RegExp

：正则表达式对象，可参考
JavaScript RegExp 对象
W3C 正则表达式
正则表达式

• 正则对象

  1. 创建
      1. var reg = new RegExp("正则表达式");
      2. var reg = /正则表达式/;
      3. var reg = /正则表达式/i;忽略大小写
  2. 方法   
      1. test(参数):验证指定的字符串是否符合正则定义的规范

Global

1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。  方法名();
2. 属性：
    Infinity  代表正的无穷大的数值。
    NaN       指示某个值是不是数字值。
    undefined 指示未定义的值。
3. 方法：
    encodeURI(String):url编码【冒号:问号?不会编码】
    decodeURI(String):url解码【不可以对: ？解码】

    encodeURIComponent(String):url编码【冒号:问号?也编码】
    decodeURIComponent(String):url解码【可以对: ？解码】

    parseInt():将字符串转为数字
        * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
            parseInt("123");// 123
            parseInt("123abc");// 123
            parseInt("a123bc");// NaN
            parseInt("12a123");// 12
    isNaN():判断一个值是否是NaN
        * NaN的== ===比较都为false
            var x=NaN;
            document.write(isNaN(x));// true

    eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
                var jscode = "alert(123)";
                eval(jscode);
4. URL编码
   陶攀峰 =  %E9%99%B6%E6%94%80%E5%B3%B0

BOM

概念

Browser Object Model 浏览器对象模型
【将浏览器的各个组成部分封装成对象】

• BOM组成

  * Window：窗口对象
  * Navigator：浏览器对象
  * Screen：显示器屏幕对象
  * History：历史记录对象
  * Location：地址栏对象

Window

：窗口对象
参考Window 对象

1. 属性：

   1. 获取其他BOM对象：
       history
       location
       navigator
       screen
   2. 获取DOM对象
       document

2. 方法
   2.1. 与弹出框有关的方法：

   alert(String)   显示带有一段消息和一个确认按钮的警告框。
   confirm(String) 显示带有一段消息以及确认按钮和取消按钮的对话框。
       * 如果用户点击确定按钮，则方法返回true
       * 如果用户点击取消按钮，则方法返回false
   prompt(提示，defaultText)  显示可提示用户输入的对话框。
       * 返回值：获取用户输入的值

   2.2. 与打开关闭有关的方法：

   open()  打开一个新的浏览器窗口
       * 返回新的Window对象
   close() 关闭浏览器窗口。
       * 谁调用我 ，我关谁
   
       //打开新窗口
       var openBtn = document.getElementById("openBtn");
       var newWindow;
       openBtn.onclick = function(){
           // open();//打开新的空标签页
           newWindow = open("https://www.baidu.com");
       }
   
       //关闭新窗口
       var closeBtn = document.getElementById("closeBtn");
       closeBtn.onclick = function(){
          // 关闭新窗口，直接调用会关闭自己
           //close();//关闭自己
           newWindow.close();//关闭新窗口
       }

   2.3. 与定时器有关的方式

       setTimeout()    在指定的毫秒数后调用函数或计算表达式。
           * 参数：
               1. js代码或者方法对象
               2. 毫秒值
           * 返回值：唯一标识，用于取消定时器
       clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
   
       setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
       clearInterval() 取消由 setInterval() 设置的 timeout。
   
   * 示例
       // 执行了这行代码之后，直接执行下一行。
       // 执行了这行代码2秒后执行function。一次性。
       var id = setTimeout(function(){},2000);
       clearTimeout(id);// 取消定时器
       
       // 执行了这行代码之后，直接执行下一行。
       // 执行了这行代码3秒后执行function。再过3秒再执行function。重复性。
       var id = setInterval(function(){},3000);
       clearInterval(id);// 取消定时器

3. 特点

   * Window对象不需要创建可以直接使用 window使用。 window.方法名();
   * window引用可以省略。  方法名();

Location

：地址栏对象

1. 创建(获取)：
    1. window.location
    2. location

2. 方法：
    * reload()  刷新 【类似于Ctrl+R】
3. 属性
    * href  设置或返回完整的 URL。
    
    var href = location.href ;获取地址栏 可使用decodeURI(String)解码
    location.href = "https://www.baidu.com";跳转

History

：历史记录对象

1. 创建(获取)：
    1. window.history
    2. history
2. 属性：
    * length    返回当前窗口历史列表中的 URL 数量。
3. 方法：
    * back()    【左箭头】后退
    * forward() 【右箭头】前进
    * go(n) 加载 history 列表中的某个具体页面。
        * n>0：前进几个历史记录 go(1)=forward()
        * n<0：后退几个历史记录 go(-1)=back()

DOM

简介

• 概念

  `Document Object Model` 文档对象模型
  
  将标记语言文档的各个组成部分，封装为对象。
  可以使用这些对象，对标记语言文档进行CRUD的动态操作

  
• DOM标准三部分

  1. 核心 DOM - 针对任何结构化文档的标准模型
      * Document：文档对象
      * Element：元素对象
      * Attribute：属性对象
      * Text：文本对象
      * Comment:注释对象
  
      * Node：节点对象，其他5个的父对象
  2. XML DOM - 针对 XML 文档的标准模型
  3. HTML DOM - 针对 HTML 文档的标准模型

核心DOM

Document

：文档对象
参考HTML DOM Document 对象

1. 创建(获取)：在html dom模型中可以使用window对象来获取
    1. window.document
    2. document
2. 方法：
    1. 获取Element对象：
        1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
        2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
        3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
        4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
    2. 创建其他DOM对象：
        createAttribute(name)
        createComment()
        createElement()
        createTextNode()
3. 属性

Element

：元素对象
参考HTML DOM 元素对象

1. 获取/创建：通过document来获取和创建
2. 方法：
    1. removeAttribute()：删除属性
    2. setAttribute()：设置属性
    
        var element_a = document.getElementsByTagName("a")[0];
        //设置属性
        element_a.setAttribute("href","https://www.baidu.com");
        //删除属性
        element_a.removeAttribute("href");

Node

：节点对象，其他5个的父对象

* 特点：所有dom对象都可以被认为是一个节点
    * 文档本身就是一个文档对象
    * 所有 HTML 元素都是元素节点
    * 所有 HTML 属性都是属性节点
    * 插入到 HTML 元素文本是文本节点
    * 注释是注释节点
* 方法：
    * CRUD dom树：
        * appendChild(node)：向节点的子节点列表的结尾添加新的子节点。
        * removeChild(node) ：删除（并返回）当前节点的指定子节点。
        * replaceChild(newnode,oldnode)：用新节点替换一个子节点。
* 属性：
    * parentNode 返回节点的父节点。

HTML DOM

1. 标签体的设置和获取：innerHTML

   1. 获取
       document.getElementById("abc").innerHTML;// <font>内容</font>
   2. 修改
       document.getElementById("abc").innerHTML="bbb";// bbb
   3. 追加
       document.getElementById("abc").innerHTML+="aaa";// bbbaaa
   4. 追加HTML标签
       document.getElementById("abc").innerHTML+="<input>";// bbbaaa<input> 标签也会生效

2. 使用html元素对象的属性
3. 控制元素样式

   1. 使用元素的style属性来设置
       如：
           var div1 = document.getElementById("div1");
            //修改样式方式1
           div1.style.border = "1px solid red";
           div1.style.width = "200px";
           //font-size--> fontSize
           div1.style.fontSize = "20px";
   2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
       如：
           <style>
               .d1{
                   border: 1px solid red;
                   width: 100px;
                   height: 100px;
               }
           </style>
       
           var div2 = document.getElementById("div2");
           div2.className = "d1";// 注意这是控制class的

案例_动态表格

案例_动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>


</table>


<script>
    /*
        分析：
            1.添加：
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td，设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
                2.怎么删除？
                    removeChild():通过父节点删除子节点

     */

    //1.获取按钮
   /* document.getElementById("btn_add").onclick = function(){
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3.创建td，赋值td的标签体
        //id 的 td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        //name 的 td
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 td
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4.创建tr
        var tr = document.createElement("tr");
        //5.添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }*/

   //使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取table
        var table = document.getElementsByTagName("table")[0];

        //追加一行
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    }


    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }


</script>

</body>
</html>

事件

概念

某些组件被执行了某些操作后，触发某些代码的执行。    
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。如： 按钮 文本输入框...
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。 
            当事件源上发生了某个事件，则触发执行某个监听器代码。

绑定方式

<img id="light" src="img/off.gif"  onclick="fun();">

<img id="light2" src="img/off.gif">

<script>

    function fun(){
        alert('我被点了');
        alert('我又被点了');
    }

    function fun2(){
        alert('咋老点我？');
    }

    var light2 = document.getElementById("light2");
    light2.onclick = fun2;


</script>

鼠标事件

+ onclick       单击事件
+ ondblclick    双击事件

+ onmousedown   鼠标按钮被按下。
+ onmouseup     鼠标按键被松开。

+ onmousemove   鼠标被移动。

+ onmouseover   鼠标移到某元素之上。
+ onmouseout    鼠标从某元素移开。

焦点事件

+ onblur    失去焦点【一般用于表单验证】
+ onfocus   元素获得焦点

加载事件

• onload 一张页面或一幅图像完成加载。【一般用于window.onload】

键盘事件

+ onkeydown     某个键盘按键被按下。  
+ onkeyup       某个键盘按键被松开。
+ onkeypress    某个键盘按键被按下并松开。


    * 定义方法时，定义一个形参，接受event对象。
    * event对象的button属性可以获取鼠标按钮键被点击了。
    document.getElementById("username").onkeydown = function (event)
    {
        // alert("鼠标点击了....");
        // alert(event.button);// 获取键对应的数字
        if (event.keyCode == 13)// 对应Unicode
        {
            alert("提交表单");
        }
    }

表单事件

+ onchange  该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
+ onselect  文本被选中。 ( <input> 和 <textarea>)
+ onsubmit  表单提交时触发【等同于onclick】
    * 方法返回false则表单被阻止提交。
    * 不返回 或 返回true 正常提交。
+ onreset   表单重置时触发

<script>
    document.getElementById("form").onsubmit = function(){
        return false;
    };

    function checkForm()
    {
        return false;
    }
</script>

/*
    form标签的 onsubmit 与 onclick 同义。对于表单提交一般用 onsubmit
    onsubmit="return checkForm();" 不可以省略return，省略就不会提交表单
    【onsubmit="checkForm();" 错误写法】
*/
<form action="#" id="form" onsubmit="return checkForm();">
    <input name="username" id="username">
    <input type="submit" value="提交">
</form>

拖动事件

+ ondragstart   该事件在用户【开始拖动】元素时触发   
+ ondrag        该事件在元素【正在拖动】时触发  
+ ondragend     该事件在用户【完成拖动】元素时触发    

+ ondragenter   该事件在拖动的元素【进入】放置目标时触发     
+ ondragleave   该事件在拖动元素【离开】放置目标时触发  
+ ondragover    该事件在拖动元素在放置目标上时触发    
+ ondrop        该事件在拖动元素放置在目标区域时触发

案例

全选&全不选

案例_全选&全不选&反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>

  <script>
      /*
        分析：
            1.全选：
                * 获取所有的checkbox
                * 遍历cb，设置每一个cb的状态为选中  checked

       */


      //1.在页面加载完后绑定事件
      window.onload = function(){
          //2.给全选按钮绑定单击事件
          document.getElementById("selectAll").onclick = function(){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                  for (var i = 0; i < cbs.length; i++) {
                      //3.设置每一个cb的状态为选中  checked
                      cbs[i].checked = true;
                  }
          }

          document.getElementById("unSelectAll").onclick = function(){
              //全不选
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为未选中  checked
                  cbs[i].checked = false;
              }
          }

          document.getElementById("selectRev").onclick = function(){
              //反选
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为相反
                  cbs[i].checked = !cbs[i].checked;
              }
          }

          document.getElementById("firstCb").onclick = function(){
              //第一个cb点击
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //获取第一个cb

              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态和第一个cb的状态一样
                  cbs[i].checked =  this.checked;
              }
          }

          //给所有tr绑定鼠标移到元素之上和移出元素事件
          var trs = document.getElementsByTagName("tr");
          //2.遍历
          for (var i = 0; i < trs.length; i++) {
              //移到元素之上
              trs[i].onmouseover = function(){
                    this.className = "over";
              }

              //移出元素
              trs[i].onmouseout = function(){
                     this.className = "out";
              }

          }

      }



  </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

表单校验

案例_表单校验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }
    .error{
        color:red;
    }
    #td_sub{
        padding-left: 150px;
    }

</style>
<script>

    /*
        分析：
            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                如果都为true，则监听器方法返回true
                如果有一个为false，则监听器方法返回false

            2.定义一些方法分别校验各个表单项。
            3.给各个表单项绑定onblur事件。



     */

    window.onload = function(){
        //1.给表单绑定onsubmit事件
        document.getElementById("form").onsubmit = function(){
            //调用用户校验方法   chekUsername();
            //调用密码校验方法   chekPassword();
            //return checkUsername() && checkPassword();

            return checkUsername() && checkPassword();
        }

        //给用户名和密码框分别绑定离焦事件
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
    }

    //校验用户名
    function checkUsername(){
        //1.获取用户名的值
        var username = document.getElementById("username").value;
        //2.定义正则表达式
        var reg_username = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_username.test(username);
        //4.提示信息
        var s_username = document.getElementById("s_username");

        if(flag){
            //提示绿色对勾
            s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    //校验密码
    function checkPassword(){
        //1.获取用户名的值
        var password = document.getElementById("password").value;
        //2.定义正则表达式
        var reg_password = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_password.test(password);
        //4.提示信息
        var s_password = document.getElementById("s_password");

        if(flag){
            //提示绿色对勾
            s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }



</script>
</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" id="form" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male" checked> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>