Day04 JS 事件 BOM DOM 表单操作

一  事件

1.三要素

(1)、事件源
(2)、事件名称
(3)、处理函数

2.常用事件

(1)、点击事件   onclick
(2)、失焦事件   onBlur
(3)、聚焦事件  onfocus
(4)、改变域对象  onchange
(5)、鼠标悬停事件  onmouserover
(6)、鼠标移开事件   onmouseout
(7)、键盘按下事件 onkeydown
(8)、键盘弹起事件 onkeyup

3.事件处理程序

(1)DOM0 级事件处理程序
                    不能绑定同一个元素同一个事件多次

function test(){
            alert("我又被点了");
        }
        
        // 得到按钮对象
        var btn = document.getElementById("btn3"); //通过ID获取元素
        console.log(btn);
        // 给按钮绑定鼠标悬停事件
        btn.onmouseover = function() {
            alert("我再次被点击了");
        }
        btn.onmouseover = function() {
            alert("我再次被点击了.....");
        }
                
(2)DOM2级事件程序
                    可以绑定一个元素的内容多次
                addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且
                他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布
                尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段
                调用事件处理程序。

// 获取元素
        var btn4 = document.getElementById("btn4");
        // 绑定事件
        btn4.addEventListener("click",function(){
            console.log("这是第4个按钮...");
        });
        btn4.addEventListener("click",function(){
            console.log("这是第4个按钮。。。。");
        });
        
        btn4.addEventListener("mouseout",function(){
            console.log("离开第4个按钮...");
            
            // 移除事件
            btn4.removeEventListener("click",tt,true)
            
        });
        
        btn4.addEventListener("click",tt);
        
        function tt() {
            console.log("第三次被打印...");
        }

二  BOM

1.window对象

(1)系统对话框
                浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用对话框向用户显示消息。
            1）消息框:alert， 常用。
                  alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
            2）输入框:prompt，返回提示框中的值。
                prompt() 方法用于显示可提示用户进行输入的对话框。
                参数（可选）：
                  第一个参数：要在对话框中显示的纯文本。
                  第二个参数：默认的输入文本。
           3）确认框:confirm，返回 true/false.
              confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

(2)打开窗口
                window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口
                _self、_parent、_top、_blank

function openPage () {
            //window.open();// 打开新的空白页(新开的)
            // window.open("http://www.baidu.com");
            // window.open("http://www.baidu.com",'_self');
            // window.open("index.html");
            window.open("01-window对象.html","_self");
        }
(3)关闭窗口
                window.close()：关闭窗口。
                只能关闭被open打开的窗口

2.时间函数

setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以cliearTimeout(id) 来清除指定函数的执行在 times 毫秒后执行 function 指定的方法，执行之前也可以取消
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

function openBaidu(){
            alert("3秒钟跳转到百度...");
            setTimeout(function(){
                // 打开到百度
                window.open("http://www.baidu.com");
            },3000);
        }

//停止函数

function stopPrint() {
            clearTimeout(id);
        }

 

function getDate() {
            // 通过id属性获取dom元素对象
            var mydate = document.getElementById("mydate");
            //console.log(mydate);
            // 获取元素的值（非表单元素）  innerHTML或innerText
            //var value = mydate.innerHTML;
            //console.log(value);
            // 给元素赋值
            //mydate.innerHTML = "你好";
            
            // 得到系统当前时间
            var currentDate = new Date();
            var localDate = currentDate.toLocaleString();
            console.log(localDate);
            
            // 当秒数为0时，字体颜色变红
            // 得到时间的秒数
            var seconds = currentDate.getSeconds();
            console.log(seconds);
            if (seconds == 0) {
                // 将时间赋值给h2标签
                mydate.innerHTML = "当前时间：<span style='color:red'>" + localDate + "</span>";
            } else {
                // 将时间赋值给h2标签
                mydate.innerHTML = "当前时间：" + localDate;
            }
            
        }

3.history对象

history 对象的属性：

      length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
            back()：加载 history 列表中的前一个 URL。
            forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
            go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

4.location对象

location 对象的属性

             href：设置或返回完整的 URL
location 对象的方法
            reload()：重新加载当前文档。
            replace()：用新的文档替换当前文档。

        // 得到当前的url
        var url = window.location.href;
        console.log(url);
        
        // 跳转到指定页面
        //window.location.href = "03-history对象.html";
        // window.location.href = "http://www.baidu.com";
        
        function reload1() {
            // 刷新页面
            //window.location.reload();
            // 用指定页面替换当前页面
            window.location.replace("http://www.baidu.com");

5.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。document 对象的 body 属性，提供对<body>元素的直接访问，

cookie 属性，用来设置或返回与当前文档有关的所有 cookie，

write()方法，向文档写 HTML 表达式或 JavaScript 代码。还有其他属性和方法

        // 向浏览器窗口写数据
        document.write("Hello");
        
        // 设置cookie
        document.cookie = "zhangsan-123456";
        
        var cook = document.cookie;
        console.log(cook);
        
        // 分隔字符串
        var user = cook.split("-");
        
        // 给表单元素赋值  value
        document.getElementById("uname").value=user[0];
        document.getElementById("upwd").value=user[1];

 

三   DOM

1.预加载事件

等文档中的元素及资源加载完毕后才执行的事件

(1)、window.οnlοad=function(){
                    
                }
(2)、在body标签上写onload事件
                
                html代码从上往下执行，当获取的元素写在dom元素之前时，代码还未走到dom元素，此时无法找到dom对象，会返回null；

2.获取节点

方法                                             描述
getElementById()                         根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName()           根据标签名获取 dom 对象数组
getElementsByClassName()        根据样式名获取 dom 对象数组
getElementsByName()                 根据 name 属性值获取 dom 对象数组，常用于多选获取值
        
        
javascript:  void(0); 伪协议，表示a标签不执行href属性的跳转行为，而去执行点击事件
javascript:  函数名();    不执行跳转，执行函数

 

      <body>

<button id="btn">按钮</button>
        <div id="div1">
            DOM对象
        </div>
        
        <br /><hr />
        
        <p id="p1" class="para">这是一个段落<span>文本</span></p>
        <p id="p1" class="para">这又是一个段落</p>
        <input type="text" name="txt" class="para" />
        <input type="checkbox" name="hobby" value="swimming" checked />游泳
        <input type="checkbox" name="hobby" value="basketball" />篮球
        <input type="checkbox" name="hobby" value="football" />足球
        <hr />
        
        <a href="javascript:testById();" >按照 id获取元素</a>
        <a href="javascript:void(0);" οnclick="testByName();">按照 name获取元素</a>
        <a href="javascript:void(0);" οnclick="testByTagName();">按照标签名获取元素</a>
        <a href="javascript:void(0);" οnclick="testByClass();">按照class获取元素</a>
        
        
    </body>
    
    <script type="text/javascript">
        // 按照 id获取元素  只会获取一个dom对象，如果出现多个同名Id，则以第一个id的元素为准
        function testById (){
            var p1 = document.getElementById("p1");
            console.log(p1);
        }
        
        // 按照 name获取元素
        function testByName() {
            var hobbys = document.getElementsByName("hobby");
            console.log(hobbys);
            
        }
        
        // 按照标签名获取元素
        function testByTagName() {
            var inputs = document.getElementsByTagName("input");
            console.log(inputs.length);
            
            // 定义变量，接收被选中的复选框的值
            var cks = "";
            
            // 获取元素的类型 （input中有text、button、radio、checkbox等）
            for (var i = 0; i < inputs.length; i++) {
                
                var ty = inputs[i].type;
                console.log(ty);
                if (ty == "text") { // 获取文本框
                    // 给文本赋值
                    inputs[i].value = "admin";
                    
                } else if (ty == "checkbox") { // 获取复选框
                    //console.log(inputs[i].checked);
                    // 判断复选框是否被选中
                    if (inputs[i].checked) {
                        cks += inputs[i].value + ",";
                    }
                }
            }
            console.log(cks);
            // 截取字符串
            cks = cks.substring(0,cks.length -1);
            console.log(cks);
            
        }
        
        // 按照class获取元素
        function testByClass() {
            var cls = document.getElementsByClassName("para");
            console.log(cls);
        }

    </script>

3.创建节点,插入节点

创建节点
方法                            描述
createElement()          创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()         创建一个文本节点，可以传入文本内容
innerHTML                   给元素赋值,也能达到创建节点的效果，直接添加到指定位置了
            
插入节点
方法                         描述
write()                       将任意的字符串插入到文档中
document.write()   在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会显示在原来的内容之后；
document.write()   在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
不要在使用document.write()方法之后去获取元素节点
appendChild()             向元素中添加新的子节点，作为最后一个子节点
insertBefore()             向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点

 

// 得到div元素  （获取容器）
        var mydiv = document.getElementById("container");
        
        /**
         * 添加 段落
         */
        function addPara() {
            /* 方式一： */
            // 创建p元素
            var p = document.createElement("p");
            // 创建文本节点
            var ptxt = document.createTextNode("哈哈哈哈");
            // 将文本节点追加到p元素节点里面的最后
            p.appendChild(ptxt);
            console.log(p);
            // 将p元素节点追击到指定容器中
            mydiv.appendChild(p);
            
            
            /*方式二*/
            // 创建p元素
            var p2 = document.createElement("p");
            // 给p标签赋值
            p2.innerHTML = "嘻嘻嘻嘻嘻";
            // 将p标签追击到指定容器中    appendChild(节点)
            mydiv.appendChild(p2);
            
            /*方式三*/
            var p3 = "<p>嘿嘿嘿嘿</p>";
            mydiv.innerHTML += p3;
        }

4.间接查找节点

            方法|属性                 描述

            children:                 获取指定元素的所有子元素(不包含文本节点)
            childNodes ()         返回元素的一个子节点的数组 （包括文本节点）
            firstChild()         返回元素的第一个子节点
            lastChild()         返回元素的最后一个子节点
            nextSibling         返回元素的下一个兄弟节点
            parentNode             返回元素的父节点
            previousSibling     返回元素的上一个兄弟节点

        //  nextSibling         返回元素的下一个兄弟节点
        console.log(div1.nextElementSibling); // 下一个元素节点（元素）
        console.log(div1.nextSibling); // 下一个节点（包含文本节点）
        
        //    previousSibling     返回元素的上一个兄弟节点
        console.log(div1.previousElementSibling); // 上一个元素节点（元素）
        console.log(div1.previousSibling); // 上一个节点（包含文本节点）

5.替换节点,克隆节点

替换节点
            方法|属性                             描述
            replaceChild(newNode,oldNode)     用新的节点替换旧的节点
            oldNode.parentNode.replaceChild(newNode,oldNode)
                首先通过旧节点定位到父节点，然后用新的节点替换旧节点
克隆节点
              方法|属性                 描述
                cloneNode()         复制节点
                var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
                true：深度克隆，可以克隆结构和内容
                false(默认值)：只克隆结构

//替换元素

function replaceNode() {
            // oldNode.parentNode.replaceChild(newNode,oldNode)
            // 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
            var cxy = document.getElementById("test");
            // 创建新节点
            var span = document.createElement("span");
            span.innerHTML = "攻城狮";
            cxy.parentNode.replaceChild(span,cxy);
        }

//克隆节点

function cloneValue() {
            // 得到被克隆的对象
            var cloneValue = document.getElementById("music");
            var newValue = cloneValue.cloneNode(false); // 浅度克隆，只克隆结构
            console.log(newValue);
            var deepValue = cloneValue.cloneNode(true); // 克隆结构及内容
            console.log(deepValue);
            
            // 将克隆好的结果追加到div中
            document.getElementById("mydiv").appendChild(deepValue);
        }

6.删除节点

             方法|属性             描述
            removeChild()     从元素中移除子节点
            
            从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象

function removeNode() {
            // 得到被删除的节点的对象
            var del = document.getElementById("test");
            // 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
            del.parentNode.removeChild(del);
        }

四   表单操作

1.获取表单

(1)、document.表单名称
(2)、document.getElementById(表单 id);
(3)、document.forms[表单名称]
(4)、document.forms[索引]; //从 0 开始

        // 1、document.表单名称
        console.log(document.myform);
        
        // 2、document.getElementById(表单 id);
        console.log(document.getElementById("myform"));
        
        // 获取文档做所有的表单集合
        console.log(document.forms);
        
        // 3、document.forms[表单名称]
        console.log(document.forms["myform2"]);
        
        // 4、document.forms[索引]; //从 0 开始
        console.log(document.forms[1]);

2.获取input元素

如 text password hidden textarea 等，前两种常用。
(1)、通过 id 获取：document.getElementById(元素 id);
(2)、通过 form.名称形式获取: myform.元素名称;    name 属性值
(3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
(4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
function getTxt() {
            // 获取表单对象
            var myform = document.myform; // document.表单的name属性值
            // 获取表单元素
            // 1)、通过 id 获取：document.getElementById(元素 id);
            console.log(document.getElementById("uname"));
            console.log(document.getElementById("uname").value);
            
            // 2)、通过 form.名称形式获取: myform.元素名称;  name 属性值
            console.log(myform.upwd);
            console.log(myform.upwd.value);
            
            // 3)、通过 name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
            console.log(document.getElementsByName("uno")[0]);
            console.log(document.getElementsByName("uno")[0].value);
            
            // 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] //从 0 开始
            console.log(document.getElementsByTagName("textarea")[0]);
            console.log(document.getElementsByTagName("textarea")[0].value);
        }       

3.获取单选按钮

            前提：将一组单选按钮设置相同的 name 属性值
            (1)获取单选按钮组：
            document.getElementsByName("name 属性值");
            (2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性
            若属性值为 true 表示被选中，否则未被选中
            选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
            未选中状态设定： 没有 checked 属性 或 checked=’false’

// 获取一组单选按钮
        var radios = document.getElementsByName("sex");
        // 遍历数组，得到选中项的值
        for (var i = 0; i < radios.length; i++) {
            // 判断是否被选中
            if (radios[i].checked) {
                console.log("选中的值是：" + radios[i].value);
            } else {
                console.log("未选中的值是：" + radios[i].value);
            }
        }

4.获取多选按钮

           前提：将一组多选按钮设置相同的 name 属性值
            (1)获取多选按钮组：
                document.getElementsByName("name 属性值");
            (2)遍历每个多选按钮，并查看多选按钮元素的 checked 属性
            若属性值为 true 表示被选中，否则未被选中
            选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked
            未选中状态设定： 没有 checked 属性 或 checked=’false’

// 获取一组多选按钮
        var checkboxs = document.getElementsByName("hobby");
        
        var cks = "";
        // 遍历数组，得到选中项的值
        for (var i = 0; i < checkboxs.length; i++) {
            // 判断是否被选中
            if (checkboxs[i].checked) {
                console.log("选中的值是：" + checkboxs[i].value);
                cks += checkboxs[i].value+ ",";
            } else {
                console.log("未选中的值是：" + checkboxs[i].value);
            }
        }
        // 截取字符串
        cks = cks.substring(0,cks.length - 1);
        console.log("选中的值为：" + cks);

5.获取下拉框

           （1）获取 select 对象：
            var ufrom = document.getElementById("ufrom");
            （2）获取选中项的索引：
            var idx=ufrom.selectedIndex ;
            （3）获取选中项 options 的 value 属性值：
            var val = ufrom.options[idx].value;
            注意：当通过 options 获取选中项的 value 属性值时，
            若没有 value 属性，则取 option 标签的内容
            若存在 value 属性，则取 value 属性的值
            （4）获取选中项 options 的 text：
            var txt = ufrom.options[idx].text;
            选中状态设定：selected='selected'、selected=true、selected
            未选中状态设定：不设 selected 属性

// （1）获取 select 对象
        var sel = document.getElementById("ufrom");
        
        // （2）获取选中项的索引
        var selectIndex = sel.selectedIndex;
        console.log("当前选中项的索引：" + selectIndex);
        
        // （3）获取选中项 options 的 value 属性值
        var value1 = sel.value;
        var value2 = sel.options[selectIndex].value;
        console.log("当前选中项的值：" + value1 + "," + value2);
        
        // （4）获取选中项 options 的 text
        var text1 = sel.options[selectIndex].innerHTML;
        var text2 = sel.options[selectIndex].text;
        console.log("当前选中项的文本：" + text1 + "," + text2);

6.提交表单

注：提交表单时，表单元素必须设置name属性值
            
提交类型：
                get请求
                    参数会直接跟在地址栏后面显示，请求参数的长度有限，相对post而言不安全，不会自动刷新缓存；每次访问时优先获取缓存中的数据，所以请求速度快。
                post请求 （需要服务器的支持）
                    参数不会跟在地址栏后面显示，请求参数长度不限（其实是有长度限制，与服务器相关），相对而言安全，会自动刷新缓存；请求速度相对而言慢。
                
                通常做查询操作，使用GET请求；增删改使用POST请求。

提交表单
            （1）使用普通 button 按钮+onclick 事件+事件中编写代码:
            获取表单.submit();
            （2）使用 submit 按钮 + οnclick="return 函数()" +函数编写代码:
            最后必须返回：return true|false;
            （3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit="return 函数();" +函数编写代码:
            最后必须返回：return true|false;

/*提交方式一：submit按钮 + onclick事件*/
        // 给submit按钮绑定点击事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
        //如果return true，则提交表单；return false不提交；若直接return也会提交表单
        function checkForm1() {
            //return true; // 提交表单
            return false; // 不提交表单
            //return; // 无效，不会阻止表单提交
        }
        
        
        /*提交方式二：submit按钮 + onsubmit事件*/
        // 给表单对象绑定onsubmit事件，调用时需要使用"return 函数名()"，定义的函数中需要return true或false；
        //如果return true，则提交表单；return false不提交；若直接return也会提交表单
        function checkForm2() {
            return true; // 提交表单
            //return false; // 不提交表单
            //return; // 无效，不会阻止表单提交
        }
        
        /*提交方式三：button按钮+点击事件*/
        // 给button按钮绑定点击事件，调用时需要使用"函数名()"，如果满足要求则手动提交表单，否则return
        function checkForm3() {
            var uname = document.getElementsByName("uname1")[0].value;
            if ( uname == null || uname.trim() == "") {
                console.log("用户名不能为空！");
                document.getElementById("msg").innerHTML = "用户名不能为空！";
                return;
            }
            
            // 手动提交表单
            document.forms[2].submit();
        }