javaWeb-day04--javascript高级

最新推荐文章于 2025-03-25 21:58:09 发布

grilla1024

最新推荐文章于 2025-03-25 21:58:09 发布

阅读量251

点赞数

分类专栏： javaWeb 文章标签： html css js javascript

本文链接：https://blog.youkuaiyun.com/xingxing_LM/article/details/113406847

版权

javaWeb 专栏收录该内容

11 篇文章

订阅专栏

1.DOM获取元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="img" src="img/off.gif">
    <h1 id="title">奥力给</h1>

<script>
    //1.更改对象属性  图片内容
    //2.更改对象内容  标签内容


    //通过元素id获取元素对象
    var light = document.getElementById("img");
    alert("换图片");
    //更改对象属性
    light.src = "img/on.gif";

    var title = document.getElementById("title");
    alert("更换内容");
    //更改对象内容
    title.innerHTML = "奥力给的猛";
</script>
</body>
</html>

2.事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--将onclick事件直接绑定到标签-->
<img src="img/off.gif" onclick="alert('点啊')">
<!--在标签中调用外部的函数-->
<img src="img/off.gif" onclick="fun()">
<!--在外部根据id绑定事件-->
<img id="light" src="img/off.gif">

<script>
    function fun(){
        alert("点啊1");
    }

    function fun1(){
        alert("点啊2");
    }

  //获取元素对象
  var light = document.getElementById("light");
  //绑定事件  后边绑定的只是函数名称
  light.onclick = fun1;
</script>
</body>
</html>

3.案例1_开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
    //获取元素对象
    var light = document.getElementById("light");
    var flag = false;//false 为关 true  为开
    light.onclick = function(){
        if(flag){
            //如果是开的就关上  更换照片
            light.src = "img/off.gif";
            flag = false;
        }else{
            //如果是关的就打开  更换照片
            light.src = "img/on.gif";
            flag = true;
        }
    }
</script>
</body>
</html>

在这里插入图片描述

4.window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象</title>

</head>
<body>
<input id="openbtn" type="button" value="打开窗口">
<input id="closebtn" type="button" value="关闭窗口">
 <script>
     /*
     window对象
     1.创建
     2.方法
        1.与弹出框有关的方法
         alert() 显示带有一个消息一个确认按钮的警告框
         confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
           *点击确认    返回true
           *点击取消按钮 返回false
          prompt（） 显示可提示用户输入的对话框

        2.与打开关闭有关的方法
            open()  打开一个新窗口----返回一个新打开窗口的对象
            close() 关闭浏览器窗口----哪个对象调用关哪个
        3.与定时器有关的方法
            setTimeout()   在指定的毫秒数后调用函数或计算表达式
                参数：1.js代码或者方法对象  2.毫秒值
            cleanTimeout()  取消由setTimeout方法设定timeout
            setInterval()   按照指定周期来调用函数或计算表达式
            cleanInterval()  取消setInterval()设定的执行周期
      3.属性
        1.获取其他BOM对象
            histor
            location
        2.获取DOM对象
            document


      4.特点
        window对象不需要创建直接使用，  window.方法名（）  window可省略
      */


     // alert("奥力给");
     // var flag = confirm("确定退出？");
     // if (flag){
     //     alert(flag);
     // }else{
     //     alert(flag);
     // }
     //
     //
     // var name = prompt("输入用户名");
     //    alert(name);

     var openbtn = document.getElementById("openbtn");
        var win;
     openbtn.onclick=function (){
         win = open("https://www.baidu.com/");
     }

     var closebtn = document.getElementById("closebtn");
     closebtn.onclick=function (){
         win.close();
     }



    var timeout = setTimeout(fun,200);

     clearTimeout(timeout);
     function fun() {
         alert("boom----");
     }


     var interval = setInterval(fun,2000);
     clearInterval(interval);


     var history = window.history;
     alert(history);

     var document1 = window.document;
     alert(document1);
     
 </script>
</body>
</html>

5.案例2_轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script>
    /*
    1.在页面上展示一个图片
    2.定义一个方法，更换src的属性
    3.定义一个计时器，3s更换一个图片
     */
    //定义一个方法
    var number = 1;
    function fun() {
        number++;
        if (number>3){
            number = 1;
        }
        var img = document.getElementById("img");
        img.src = "img/banner_"+number+".jpg";
    }

    setInterval(fun,3000);
</script>
</body>
</html>

6.location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>locati对象</title>
</head>
<body>
<input id="but" type="button" value="百度">
<input id="but1" type="button" value="刷新">
<script>
    /*
    location对象
    1.创建
    window.location
    location
    2.方法
    reload（）刷新当前页面
    3.属性
    href   设置或返回完整的URL
     */



    //reload（）刷新页面
    //1.获取按钮
    var elementById = document.getElementById("but1");
    //2.绑定事件
    elementById.onclick = function (){
        location.reload();
    }

    //href 返回完整的url
    var href = location.href;
    alert(href);

    //href  设置URl
    //1.获取按钮
    var e = document.getElementById("but");
    //2.绑定事件
    e.onclick = function (){
        location.href = "https://www.baidu.com";
    }
</script>
</body>
</html>

7.案例3_自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
<!--    1.显示页面效果 <p>-->
<!--    2.定义方法，获取span标签 span标签自减  time--  -->
<!--    3.设置定时器1s执行一次-->
    <STYLE>
        /*通过css设置标签*/
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </STYLE>
</head>
<body>
<!--显示标签内容-->
<p><span id="time">5</span>秒后自动跳转...</p>

<script>
    var num =5;
    //获取需要修改内容的span标签对象
    var time = document.getElementById("time");
    function fun(){
        num--;
        if (num<=0){
            //跳转网页
            location.href = "https://www.baidu.com";
        }
        //修改标签span内容
        time.innerHTML = num+"";
    }
    // 定时器 执行函数
    setInterval(fun,1000);
</script>
</body>
</html>

8.history对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
<input id="btn" type="button" value="查看访问记录数">
<a href="9.history对象--test.html">test页面</a>
<input id="btn1" type="button" value="前进">
<SCRIPT>
    /*
    history 历史记录对象
    1.创建
    window.history
    history
    2.方法
    back（）   加载 history 列表前的一个URL
    forword（）加载 history 列表的下一个URL
    go（）     加载 history 列表中的某个具体页面
        *正数 前进几个历史记录
        *负数 后退几个历史记录
    3.属性
    length  当前窗口中的url数量
      */
    //1.获取按钮对象
    var btn = document.getElementById("btn");
    //2.绑定事件
    btn.onclick = function (){
        var length = history.length;
        alert(length);
    }

    //1.获取按钮对象
    var btn1 = document.getElementById("btn1");
    //2.绑定事件
    btn1.onclick = function (){
        //前进一个页面
        //history.forward();
        history.go(1);
    }

</SCRIPT>
</body>
</html>

9.history对象–test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<input id="back" type="button" value="返回">
<script>
    /*
    1.在页面上展示一个图片
    2.定义一个方法，更换src的属性
    3.定义一个计时器，3s更换一个图片
     */
    //定义一个方法
    var number = 1;
    function fun() {
        number++;
        if (number>3){
            number = 1;
        }
        var img = document.getElementById("img");
        img.src = "img/banner_"+number+".jpg";
    }
    //定时器
    setInterval(fun,3000);

    //1.获取按钮对象
    var back = document.getElementById("back");
    //2.绑定事件
    back.onclick = function (){
        //后退一个页面
        //history.back();
        history.go(-1);
    }
</script>
</body>
</html>

10.document对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">

<script>
    /*
    Document 文档对象
    1.创建
    window.ducument
    documen
    2.方法
            1.获取Element对象
            *getElementById(): 根据id属性
            *getElementByTagName():根据元素名称获取元素们，返回值是一个数组
            *getElementByClassName（）：根据class属性值获取对象们，返回值是一个数组
            *getElementByName（）：根据name属性值获取元素对象们。返回值是一个数组
            2.创建其他Dom对象
            creatAttribute(name)
            createComment()
            createElement()
            createTextnode()
     3.属性
       */
    //*getElementByTagName():根据元素名称获取元素们，返回值是一个数组
    var ele_tag = document.getElementsByTagName("div");
    var length = ele_tag.length;
    alert(length);

    //getElementByClassName（）：根据class属性值获取对象们，返回值是一个数组
    var ele_class = document.getElementsByClassName("cls1");
    var length1 = ele_class.length;
    alert(length1);

    //getElementByName（）：根据name属性值获取元素对象们。返回值是一个数组
    var ele_name = document.getElementsByName("username");
    var length2 = ele_name.length;
    alert(length2);

    var table = document.createElement("tab");
    alert(table);
</script>
</body>
</html>

11.element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element对象</title>
</head>
<body>
<a>点啊</a>
<input id="set" type="button" value="设置属性">
<input id="remove" type="button" value="删除属性">
<script>
    //给element元素对象 单独设置和删除属性值

    //1.获取元素对象
    var ele_set = document.getElementById("set");
    //2.事件绑定
    ele_set.onclick = function (){
        var set_but = document.getElementsByTagName("a")[0];
        set_but.setAttribute("href","https://www.baidu.com");

    }
    //1.获取元素对象
    var ele_remove = document.getElementById("remove");
    //2.事件绑定
    ele_remove.onclick = function (){
        var remove_but = document.getElementsByTagName("a")[0];
        remove_but.removeAttribute("href");

    }
</script>
</body>
</html>```
## 12.node对象

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        div2
    </div>
    div1
</div>
<!--超链接可以点击，但是不跳转到某个页面  javascript:void(0) -->
<a href="javascript:void(0)" id="del">删除节点</a>
<a href="javascript:void(0)" id="app">添加节点</a>
<script>
    //获取超链接元素对象
    var ele_del = document.getElementById("del");
    //事件绑定
    ele_del.onclick = function (){
        var ele_div1 = document.getElementById("div1");
        var ele_div2 = document.getElementById("div2");
        ele_div1.removeChild(ele_div2);
    }

    //获取超链接元素对象
    var ele_app = document.getElementById("app");
    //事件绑定
    ele_app.onclick = function (){
        var ele_div1 = document.getElementById("div1");
       //创建一个元素节点对象  div3
        var ele_div3 = document.createElement("div");
        ele_div3.setAttribute("id","div3");
        ele_div1.append(ele_div3);
    }

    //获取节点的父节点
    var ele_div2 = document.getElementById("div2");
    var a = ele_div2.parentNode;
    alert(a);
</script>
</body>
</html>

13.案例4_动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        table{
            border: 1px solid;
            width: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div>
    <input id="id" type="text" placeholder="请输入编号">
    <input id="name" type="text" placeholder="请输入姓名">
    <input id="gender" type="text" placeholder="请输入性别">
    <input id="but" type="button" value="添加">

</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>
</table>
<script>
    /*
    1.给按钮绑定单击事件
    2.获取文本框内容
    3.创建td，设置td的文本为文本框内容
    4.创建tr
    5.将td添加到tr中
    6.获取table，将tr添加到table中

     */
    //1.给按钮绑定单击事件
    document.getElementById("but").onclick = function (){
    //2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
    //3.创建td，设置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);

        //删除的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 textNode = document.createTextNode("删除");

        ele_a.appendChild(textNode);
        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，将tr添加到table中
        var ele_table = document.getElementsByTagName("table")[0];
        ele_table.appendChild(tr);
    }
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

在这里插入图片描述

14.HTMLDOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="div1">
    奥力给
</div>
<script>
    //获取标签对象
    var ele_div1 = document.getElementById("div1");
    //获取标签内容
    var html = ele_div1.innerHTML;
    alert(html);

    //修改标签内容
    ele_div1.innerHTML = "奥力给的猛";
    var html = ele_div1.innerHTML;
    alert(html);

    //将标签替换为一个文本输入框
    //ele_div1.innerHTML =" <input type='text'>";

    //将标签追加一个文本框
    ele_div1.innerHTML +="<input type = 'text'>";
</script>
</body>
</html>

14.HTMLDOM_表格追加_动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        table{
            border: 1px solid;
            width: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div>
    <input id="id" type="text" placeholder="请输入编号">
    <input id="name" type="text" placeholder="请输入姓名">
    <input id="gender" type="text" placeholder="请输入性别">
    <input id="but" type="button" value="添加">

</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>
</table>
<script>
    /*
    1.给按钮绑定单击事件
    2.获取文本框内容
    3.创建td，设置td的文本为文本框内容
    4.创建tr
    5.将td添加到tr中
    6.获取table，将tr添加到table中

     */
    /*//1.给按钮绑定单击事件
    document.getElementById("but").onclick = function (){
    //2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
    //3.创建td，设置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);

        //删除的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 textNode = document.createTextNode("删除");

        ele_a.appendChild(textNode);
        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，将tr添加到table中
        var ele_table = document.getElementsByTagName("table")[0];
        ele_table.appendChild(tr);
    }
     */

    //1.给按钮绑定单击事件
    document.getElementById("but").onclick = function () {
        //2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //3.获取table标签对象
        var ele_table = document.getElementsByTagName("table")[0];
        ele_table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" οnclick=\"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>

15.HTMLDOM_样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .d1{
            border: 1px solid yellowgreen;
            width: 300px;
            font-size: 300px;
        }
        .d2{
            border: 2px solid green;
            width: 250px;
            font-size: 200px;
        }
    </style>
</head>
<body>
<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>
<script>
    //在script中修改样式
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function (){
        ele_div1.style.border = "1px solid red";
        ele_div1.style.width = "200px";

        ele_div1.style.fontSize="50px";
    }

    //提前定义好类选择器的样式，通过元素的classname属性值来设置其class属性值
    var ele_div2 = document.getElementById("div2");
    ele_div2.onclick = function (){
        ele_div2.className= "d1";
    }


</script>
</body>
</html>

16.常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        /*
        常见事件：
         1.点击事件：
            1.onclick:单击事件
            2.ondblclick:双击事件
         2.焦点事件
            1.onblur:失去焦点
            用于表单校验
            2.onfocus:元素获得焦点
         3.加载事件
            1.onload：一张页面或一幅图像完成加载
         4.鼠标事件
            1.onmousedwon：鼠标按钮被按下
            2.onmouseup：鼠标案件被松开
            3.onmousemove：鼠标移动
            4.onmouseover：鼠标移到某元素上
            5.onmouseout：鼠标从某元素移动开
         5.键盘事件
            1.onkeydown：某个键盘按键被按下
            2.onkeyup某个键盘按键被松开
            3.onkeypress 某个键盘按键被按下并松开
         6.选择和改变
            1.onchange 域的内容被改变
            2.onselect  文本被选中
         7.表单事件
            1.onsubmit 确认按钮被点击
                可以阻止表单提交
            2.onreset  重置按钮被点击

         */

        window.onload = function () {//html加载完成才会再加载该函数
            //1.失去焦点事件
            document.getElementById("username").onblur = function () {
                alert("失去焦点。。。")
            }

            //2.鼠标移到某元素上
            document.getElementById("username").onmouseover = function () {
                alert("鼠标来了。。。")
            }
            //3.鼠标的点击事件
            document.getElementById("username").onmousedown = function (event) {
                alert(event.button);//返回值为左键0  滚轮1 右键2
            }
            //4.键盘事件
            document.getElementById("username").onkeydown = function (event) {
               // alert(event.keyCode);  //event.keyCode  返回数值
                if(event.keyCode==13){
                    alert("表单提交");
                }
            }

            //onchange 域的内容被改变  当文本框内容发生该表触发事件
            document.getElementById("username").onchange = function (event) {
                alert("表单被改变了");
            }


            // //onsubmit事件   控制提交事件
            // document.getElementById("form").onsubmit = function () {
            //     var flag = false;
            //     return flag;
            // }

            function check(){ //控制提交事件的另一种方法

                return true;
            }
        }
    </script>
</head>
<body>
<form action="#" id="form" onclick="return check">
<input name="username" id="username">
<input type="submit" value="提交">
</form>
</body>
</html>

17.案例5_表格全选

<!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%;
        }
        .over{
            background-color: pink;
        }
        .out{
            background-color: white;
        }
    </style>
<script>
    //在加载完html后加载script
    window.onload = function () {
        //1.给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick = function () {
        //2.获取所有cb对象
            var ele_cb = document.getElementsByName("cb");
        //3.遍历ele_cb都选择 设置checked为true
            for (var i = 0;ele_cb.length;i++){
                ele_cb[i].checked = true;
            }
        }
        //1.给全选按钮绑定单击事件
        document.getElementById("unSelectAll").onclick = function () {
            //2.获取所有cb对象
            var ele_cb = document.getElementsByName("cb");
            //3.遍历ele_cb都不选择 设置checked为false
            for (var i = 0; ele_cb.length; i++) {
                ele_cb[i].checked = false;
            }
        }
        //1.给全选按钮绑定单击事件
        document.getElementById("selectRev").onclick = function () {
            //2.获取所有cb对象
            var ele_cb = document.getElementsByName("cb");
            //3.遍历ele_cb都反选 设置checked为相反
            for (var i = 0; ele_cb.length; i++) {
                ele_cb[i].checked =  !ele_cb[i].checked;
            }
        }

        //1.给第1个框框绑定事件
        document.getElementById("firstCb").onclick = function () {
            //2.获取所有cb对象
            var ele_cb = document.getElementsByName("cb");
            //3.遍历ele_cb 设置checked与第一个框框相同
            for (var i = 0; ele_cb.length; i++) {
                ele_cb[i].checked =  this.checked;
            }
        }


        //给所有tr标签绑定移到元素上和移出元素事件
        var ele_tr = document.getElementsByTagName("tr");
        for (var i =0;ele_tr.length;i++){
            //移到元素上
            ele_tr[i].onmouseover = function () {
                this.className = "over";
            }
            //移出元素上
            ele_tr[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>

18.案例6_注册页面CSS_校验

<!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;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*水平居中*/
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border:1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left p[id="p1"]{
            color: #ffd026;
            font-size: 20px;
        }
        .rg_left p[id="p2"]{
            color: #A6A6A6;
            font-size: 20px;
        }
        .rg_center{
            /*border:1px solid red;*/
            float: left;

        }
        .rg_right{
            /*border:1px solid red;*/
            float: right;
            margin: 15px;
        }
        .rg_right a{
            color: pink;
            font-size: 15px;
        }
        .rg_right{
            font-size: 15px;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#birthday,#phone,#yan{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #yan{
            width: 110px;
        }
        #imag_yan{
            height: 32px;
            vertical-align: middle;

        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #ffd026;
            border: 1px solid #ffd026;

        }
        #td_sub{
            padding-left: 150px;
        }
        .error{
           color: red;
        }
    </style>
<script>
    window.onload = function () {
        //1.给表单绑定onsubmit事件
        document.getElementById("form").onsubmit = function () {
            //调用用户名校验方法 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 b = reg_username.test(username);
        //4.提示信息
        var s_username = document.getElementById("s_username");
        if (b) {
            //提示绿色对勾
            s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'>";
        } else {
            //提示错误用户名有误
            s_username.innerHTML = "用户名格式有误";
        }
        return b;
    }
        function checkPassword() {
            //1.获密码
            var password = document.getElementById("password").value;
            //2.定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //3.校验密码是否符合正则表达式
            var b = reg_password.test(password);
            //4.提示信息
            var s_password = document.getElementById("s_password");
            if (b) {
                //提示绿色对勾
                s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'>";
            } else {
                //提示错误用户名有误
                s_password.innerHTML = "密码格式有误";
            }
            return b;
    }
</script>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_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">邮箱</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="phone">手机号</label></td>
                        <td class="td_right"><input type="number" name="phone" id="phone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</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"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="yan">验证码</label></td>
                        <td class="td_right"><input type="text" name="yan" id="yan" placeholder="请输入验证码"><img src="img/verify_code.jpg" id="imag_yan"></img></td>
                    </tr>
                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" value="注册" id="btn_sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号<a href="#">立即登录</a></p>
    </div>
</div>
</body>
</html>在这里插入图片描述

在这里插入图片描述