zoukankan      html  css  js  c++  java
  • JavaScript高级

    JavaScript高级

    内容

    JavaScript:
    1. ECMAScript:
    2. BOM:
    3. DOM:
    1. 事件

    第一节 DOM简单学习:为了满足案例要求

    1.功能:

    控制HTML文档内容

    2.获取页面标签(元素)对象:Element

    如:document.getElementById("id值"):通过元素的id获取元素对象

    3.操作Element对象:

    1.修改属性值

    1. 明确获取对象
    2. 查看API文档,找其中有那些属性可以设置

    2.修改标签体内容:

    • 属性:innerHTML
      1. 获取元素对象
      2. 使用innerHTML属性修改标签内容
    <h1 id = "title">
        阿里巴巴
    </h1>
    var title = document.getElementById("title");
    alter("更换内容");
    title.innerHTML = "京东";
    

    案例一 电灯开关

    <body>
        <img id = "light" src = "img/off.gif">
        <script>
        	// 1.获取图片对象
            var light = document.getElememtById("light");
            // 2.绑定单击事件
            light.onclick = function(){
                if(flag){
                    // 判断如果灯是开的,则灭掉
                    light.src = "img/off.gif";
                    flag = false;
                }else{
                    // 如果灯是灭的,则打开
                    light.src = "img/on.fig";
                    flag = true;
                }
            }
        </script>
    </body>
    

    第二节 BOM

    1.概念

    Browser Object Model 浏览器对象模型

    • 将浏览器的各个组成部分封装成对象。

    2.组成

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

    3.window:窗口对象

    1.创建

    2.方法

    1.与弹出框有关的方法
    • alert() 显示一段消息和一个确认按钮的警告框

    • confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

      • 如果用户点击确认按钮,返回true
      • 如果用户点击取消按钮,则返回false
      <script>
      	var flag = confirm("拜拜");
          if(flag){
              alter("慢走不送");
          }else{
              alter("怎么又回来了");
          }
      </script>
      
    • prompt() 显示可提示用户输入的对话框

    <script>
    	let result = prompt("来玩啊");
        alert("欢迎"+result);
    </script>
    
    2.与打开关闭浏览器窗口有关的方法

    close() 关闭浏览器窗口

    • 谁调用 关谁

    open() 打开一个新的浏览器窗口

    • 返回新的window对象
    示例代码
    <body>
        <input id = "openBtn" type = "butten" value = "打开窗口">
        <input id = "closeBtn" type = "butten" value = "关闭窗口">
        
        <script>
            // 打开窗口
        	var openBtn = document.getElementById("openBtn");
            var newWindow;
            openBtn.onclick = function (){
                newWindow.open();
            }
            // 关闭窗口(关闭上一个openBtn打开的窗口)
            var closeBtn = document.getElementById("closeBtn");
            closeBtn.onclick = function(){
                newWindow.close();
            }
        </script>
    </body>
    
    3.与定时器有关的方法
    1.setTimeout()

    在指定的毫秒值后调用函数或计算表达式。

    • 参数:
      1. js代码或者方法对象
      2. 毫秒值
    • 返回值:唯一标识,用于取消定时器
    2.clearTimeout()

    取消由 setTimeout() 方法设置的定时器

    3.setInterval()

    按照指定的周期(以毫秒计)来调用函数或者计算表达式

    4.clearInterval()

    ​ 取消由setInterval() 设置的timeout

    示例案例

    轮播图

    <body>
    	<img id = "img" src = "img/banner_1.jpg" width = "100%">
        
        <script>
            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>
    

    3.属性:

    ​ 1. 获取其他BOM对象:
    ​ history
    ​ location
    ​ Navigator
    ​ Screen:
    ​ 2. 获取DOM对象
    ​ document

    4.特点

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

    4. Location:地址栏对象

    1. 创建(获取):

      1. window.location
        2. location
    2. 方法:

    • reload() 重新加载当前文档。刷新
    1. 属性
    • href 设置或返回完整的 URL。

    示例代码

    <body>
        <input id="btn" type="button" value="刷新">
        <input id="gobaidu" type="button" value="百度">
        <script>
          // 1.获取按钮
          var btn = document.getElementById("btn");
          // 2.绑定单击事件
          btn.onclick = function () {
    
            // 3.刷新页面
            location.reload();
          }
    
          // 获取href
          var href = location.href;
          alert(href);
          // 1.获取按钮
          var baidu = document.getElementById("gobaidu");
          // 2.绑定单击事件
          baidu.onclick = function () {
            // 3.去访问百度官网
            location.href = "https://www.baidu.com";
          }
        </script>
      </body>
    

    案例:自动跳转页面

    <head>
        <meta charset="UTF-8">
        <title>自动跳转页面</title>
        <style>
          p{
            text-align: center;
          }
          span{
            color: red;
          }
        </style>
      </head>
      <body>
        <p>
          <span id = "time">5</span>后自动跳转...
        </p>
    
        <script>
          var second = 5;
          var time = document.getElementById("time")
    
          // 定义一个方法,获取span标签,修改span标签内容,时间--
          function showTime() {
            second--;
            // 判断时间如果等 <=0,则跳转到首页
            if (second <= 0){
              // 跳转到首页
              location.href = "https://www.baidu.com";
            }
            time.innerHTML = second+" ";
          }
          // 设置定时器,1秒执行一次
          setInterval(showTime,1000);
        </script>
      </body>
    </html>
    

    5.History:历史记录

    1.创建(获取):

    1. window.history
    2. history

    2.方法:

    • back() 加载 history 列表中的前一个 URL。

    • forward() 加载 history 列表中的下一个 URL。

    • go(参数) 加载 history 列表中的某个具体页面。

      • 参数:

        • 正数:前进几个历史记录

        • 负数:后退几个历史记录

    3.属性:

    • length 返回当前窗口历史列表中的 URL 数量。

    第三节 DOM

    1.概念

    Document Object Model 文档对象模型

    • 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

    2.W3C DOM 标准被分为 3 个不同的部分

    • 核心 DOM - 针对任何结构化文档的标准模型
      • Document:文档对象
        • Element:元素对象

        • Attribute:属性对象

        • Text:文本对象

        • Comment:注释对象

        • Node:节点对象,其他5个的父对象

    • XML DOM - 针对 XML 文档的标准模型
    • HTML DOM - 针对 HTML 文档的标准模型

    3.核心DOM模型:

    1.Document:文档对象

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

    示例代码

    <body>
        <div id = "div1"> div1</div>
        <div id = "div2"> div2</div>
        <div id = "div3"> div3</div>
    
        <div class="cls1"> div4</div>
        <div class="cls2"> div5</div>
    
        <input type="text" name="username">
    
        <script>
          var divs = document.getElementsByTagName("div");
          alert(divs.length);
          var div_cls = document.getElementsByClassName("cls1");
          alert(div_cls.length);
          var ele_username = document.getElementsByName("username");
          alert(ele_username.length);
        </script>
      </body>
    
    2.创建其他DOM对象
    • createAttribute(name)
    • createComment()
    • createElement()
    • createTextNode()
    3.属性

    2.Element:元素对象

    1.获取/创建

    通过document来获取和创建

    2.方法
    1. removeAttribute():删除属性
    2. setAttribute():设置属性

    示例代码

      <body>
        <a>动我一下试试</a>
        <input id="button" type="button" value="设置属性">
        <input id="btn_remove" type="button" value="删除属性">
        <script>
          // 获取btn
          var btn_set = document.getElementById("button");
          btn_set.onclick = function () {
            // 获取a标签
            var element_a = document.getElementsByTagName("a")[0];
            element_a.setAttribute("href","https://www.baidu.com");
          }
    
          // 获取btn_remove
          var btn_remove = document.getElementById("btn_remove");
          btn_remove.onclick = function () {
    
            // 获取a标签
            var remove = document.getElementsByTagName("a")[0];
            remove.removeAttribute("href");
          }
        </script>
      </body>
    

    3.Node:节点对象

    1.特点

    所有dom对象都可以被认为是一个节点

    2.方法
    • CRUD dom树:
      • appendChild():向节点的子节点列表的结尾添加新的子节点。
      • removeChild() :删除(并返回)当前节点的指定子节点。
      • replaceChild():用新节点替换一个子节点。
    • 属性
      • parentNode 返回节点的父节点

    示例代码

        <style>
          div{
            border: 1px solid red;
          }
          #div1{
             200px;
            height: 200px;
          }
          #div2{
             100px;
            height: 100px;
          }
        </style>
      </head>
      <body>
          <div id="div1">
            <div id="div2">div2</div>
            div1
          </div>
         <a href="javascript:void(0)" id="de1">删除节点</a>
          <!--input type="button" id="de1" value="删除节点"-->
    
        <script>
         // 1.获取超链接
         var element_a = document.getElementById("de1");
         // 2.绑定单击事件
          element_a.onclick = function () {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.removeChild(div2);
          }
    
          var div2 = document.getElementById("div2");
          var div1 = div2.parentNode;
          alert(div1);
        </script>
      </body>
    

    案例_动态表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格</title>
    
        <style>
            table{
                border: 1px solid;
                margin: auto;
                 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 id="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.获取btn
        var btn_add = document.getElementById("btn_add");
        //2.绑定单击事件
        btn_add.onclick = function(){
            //获取每一个输入框内容
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;
    
            //获取表格
            var table = document.getElementById("table");
            
            //创建tr
            var tr = document.createElement("tr");
            //创建td
            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);
            tr.appendChild(td_id);
    
            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);
            tr.appendChild(td_name);
    
            var td_gender = document.createElement("td");
            var text_gender = document.createTextNode(gender);
            td_gender.appendChild(text_gender);
            tr.appendChild(td_gender);
    
            var td_option = document.createElement("td");
    
            var a = document.createElement("a");
            a.setAttribute("href","javascript:void(0);");
            a.setAttribute("onclick","delTr(this)");
            var text_a = document.createTextNode("删除");
            a.appendChild(text_a);
            td_option.appendChild(a);
            tr.appendChild(td_option);
    
            table.appendChild(tr);
    
        }
    
        function delTr(obj){
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    
    </script>
    </body>
    </html>
    

    4.HTML DOM

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

    2. 使用html元素对象的属性

    3. 控制元素样式

      1. 使用元素的style属性来设置
        如:

        <body>
            <div id="div1">
              姓名:
            </div>
        
            <script>
                var div = document.getElementById("div1");
                var innerHTML = div.innerHTML;
                // alert(innerHTML);
              // div标签中替换一个文本输入框
              // div.innerHTML = "<input type='text'>";
              // div标签中追加一个文本输入框
              div.innerHTML+="<input type='text'>";
            </script>
          </body>
        
      2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

        <style>
          .d1{
            border: 1px solid red;
             100px;
            height: 100px;
          }
          .d2{
            border: 1px solid blue;
             200px;
            height: 200px;
          }
        </style>
      </head>
      <body>
        <div id="div1">
          div1
        </div>
        <div id="div2">
          div2
        </div>
    
        <script>
          var div1 = document.getElementById("div1");
          div1.onclick = function () {
            // 修改样式方法1
            div1.style.border = "1px solid red";
            // font--size --> fontSize
            div1.style.fontSize="20px";
          }
    
          var div2 = document.getElementById("div2");
          div2.onclick = function () {
            // 修改样式方法2
            div2.className= "d1";
    
          }
        </script>
      </body>
    

    第三节 事件监听机制

    1.概念

    某些组件被执行了某些操作后,触发某些代码的执行。

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

    2.常见的事件

    1.点击事件:

    1. onclick:单击事件
    2. ondblclick:双击事件

    2.焦点事件

    1. onblur:失去焦点
    2. onfocus:元素获得焦点。

    3.加载事件:

    1. onload:一张页面或一幅图像完成加载。

    4.鼠标事件:

    1. onmousedown 鼠标按钮被按下。
    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 重置按钮被点击。

    案例:表格全选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格全选</title>
        <style>
            table{
                border: 1px solid;
                 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>
    
            window.onload  = function(){
                document.getElementById("selectAll").onclick = function(){
                    var cbs = document.getElementsByName("cb");
                    for (var i = 0; i < cbs.length; i++) {
                        cbs[i].checked = true;
                    }
    
                }
    
                document.getElementById("unSelectAll").onclick = function(){
                    var cbs = document.getElementsByName("cb");
                    for (var i = 0; i < cbs.length; i++) {
                        cbs[i].checked = false;
                    }
    
                }
    
                document.getElementById("selectRev").onclick = function(){
                    var cbs = document.getElementsByName("cb");
                    for (var i = 0; i < cbs.length; i++) {
                        cbs[i].checked = !cbs[i].checked
                    }
    
                }
    
    
                document.getElementById("firstcb").onclick = function(){
                    var cbs = document.getElementsByName("cb");
                    var firstcb = document.getElementById("firstcb");
                    for (var i = 0; i < cbs.length; i++) {
                        cbs[i].checked = firstcb.checked;
                    }
    
                }
    
                var trs = document.getElementsByTagName("tr");
                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>
    

    案例 :表单验证

     <style>
            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
    
            body {
                background: url("img/register_bg.png") no-repeat center;
                padding-top: 25px;
            }
    
            .rg_layout {
                 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 {
                 100px;
                text-align: right;
                height: 45px;
            }
    
            .td_right {
                padding-left: 50px;
            }
    
            #username, #password, #email, #name, #tel, #birthday, #checkcode {
                 251px;
                height: 32px;
                border: 1px solid #A6A6A6;
                /*设置边框圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }
    
            #checkcode {
                 110px;
            }
    
            #img_check {
                height: 32px;
                vertical-align: middle;
            }
    
            #btn_sub {
                 150px;
                height: 40px;
                background-color: #FFD026;
                border: 1px solid #FFD026;
            }
    
            #td_sub{
                padding-left: 150px;
            }
    
            .error{
                color:red;
                vertical-align: middle;
            }
        </style>
    <script>
        window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                //验证用户名
                //验证密码
                //...
                //都成功则返回true
                //
                return checkUsername() && checkPassword();
            }
    
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
        }
    
        function checkUsername(){
            var username = document.getElementById("username").value;
            var reg_username = /^w{6,12}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
            }else{
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }
    
        function checkPassword(){
            var password = document.getElementById("password").value;
            var reg_password = /^w{6,12}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag){
                s_password.innerHTML = "<img height='25' width='35' 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"> 男
                                <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>
    
  • 相关阅读:
    小数的编程
    小数的编程
    硬币趣味题
    硬币趣味题
    好玩的 emoji
    ThreadPoolExecutor使用介绍
    希尔排序
    OpenCms创建站点过程图解——献给OpenCms的刚開始学习的人们
    Linux C 编程内存泄露检測工具(二):memwatch
    C++封装、继承、多态
  • 原文地址:https://www.cnblogs.com/anke-z/p/12920020.html
Copyright © 2011-2022 走看看