day 52 dom 事件

本文转载自cnblog.liwenzhou.com

官网资料:

http://www.w3school.com.cn/htmldom/dom_methods.asp

事件的内容很重要的,基本概念有点类似于我们的mysql里面的触发器,我们通过给html增加一些关联,让js代码可以与之关联上,然后跟用户实现交互,让用户有更好的体验效果,让页面的功能更加强大,这里需要用到函数的用法,来与之进行关联,然后实现触发的效果.就是写好一个功能封装到一个函数里面然后一旦用户触发了页面上的一些按钮就会调用函数然后呈现出我们后台代码设计的一些效果.这里就是事件的大概功能以及概念.

day53

1.前情回顾

    1. BOM
        window
            location.href = "https://www.sogo.com"
            location.reload()  // 重新加载当前页
            location.href
        DOM
            document

                1. 节点分为：
                    文档节点 document
                    文本节点 标签的文本
                    属性节点 id, class ...
                    标签节点 div,span, h1 ...

                2. 寻找节点
                    1. 基本查找
                        标签名：document.getElementsByTagName
                        ID：    document.getElementByID
                        class名: document.getElementsByClassName
                    2. 间接查找
                        我的上一个标签： previousElementSibling
                        我的下一个标签： nextElementSibling
                        我的父标签：     parentElement
                        我的子标签：     children
                        我的第一个子标签：firstElementChild
                        我的最后一个子标签：lastElementChild

                2. 修改标签属性或样式

                    1. 修改文本信息
                        ele.innerText               获取文本节点的内容（包括子标签的文本）
                        ele.innerText="字符串"      修改标签的文本信息
                    2. 文档内容（HTML内容）
                        ele.innerHTML               获取文档内容
                        ele.innerHTML=“<h1>好</h1>” 赋值HTML内容
                    3. 修改样式
                        1. classList
                            ele.className               获取所有的class类名（字符串类型）
                            ele.classList               获取所有的class类名
                            ele.classList.contains(cls) 判断有没有某个class
                            ele.classList.add(cls)      添加一个class类名
                            ele.classList.remove(cls)   删除class类名
                            ele.classList.toggle(cls)   切换（有就删除，没有就添加）
                        2. ele.style.样式=""
                            注意：有中横线的CSS样式要转成驼峰形式
                            ele.style.backgroundColor="red"

                    4. 属性
                        ele.attributes  获取所有的属性信息

2. RegExp（正则） 求学要严谨

    1. 正则表达式不能加空格
    2. 当你设置了全局的g标志位，需要注意lastIndex  --> 每一次匹配上之后会把lastIndex设置为下一位索引值
    3. undefined他帮你转成"undefined"来做正则校验

3. 今日内容
    1. 作业讲解+自定义模态框练习
    2. 事件
        常用事件：
            onfocus()
            onblur()
            onchange()事件 --> select联动的例子
                                        1. selectEle.selectedIndex       --> 获取当前选中的option的索引值
                                        2. selectEle.options             --> 获取所有的option选项
                                        3. selectEle.options.length=0    --> 清空所有的option选项

            键盘事件 --> jQuery讲个示例

        绑定事件的方式：  *****
            1. 在标签里面直接写on动作=func();
            2. 通过JS代码绑定事件 ele.click=function(){alert(123);}
            3. 基于已经存在的父标签来给子标签绑定事件，  --> 事件委托的方式

    3. 文档标签的创建

        引申出来的：
            script标签一般写在body标签的最下面，除非是文档加载之前就要运行的代码要放在head标签里 *****

4. 今日作业

    1. 模态框里面的提交按钮要绑定事件
        1. 取值（通过 input标签.value 就能取值）
        2。 拿到值之后 拼接处一个tr标签
        3. tbody.appendChild(上面创建的tr标签)
    2. 删除按钮的事件
        1. 根据删除按钮找到当前行的tr
        2. 从tbody里面删掉这个tr (removeChild())

抽屉作业

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

innerText  文本
innerHTML  HTML内容
value  值

createElement(name) 创建节点（标签）

appendChild() 末尾添加节点，并返回新增节点
insertBefore() 参照节点之前插入节点，两个参数：要插入的节点和参照节点

删

查找到要删除的元素
获取它的父元素
使用removeChild()方法删除

改

第一种方式:

使用上面增和删结合完成修改

第二种方式:

使用setAttribute();方法修改属性

使用innerHTML属性修改元素的内容