美文网首页
前端JS学习(三)

前端JS学习(三)

作者: ALEX朱先生 | 来源:发表于2019-04-17 21:36 被阅读0次

    一、时间函数|定时器

    1.重复执行定时器

    方法名 : setInterval()

    作用 : 每隔多长时间执行一次函数,重复执行

    参考语法:

    setInterval(function(){

    },时间)

    2.延迟执行定时器

    方法名 : setTimeOut()

    作用 : 延迟多长时间以后执行一次

    参考语法:

    setTime(function(){

        ...要执行的代码..

    },时间)

    时间:毫秒数

    2.1流程方法

    1. 获取div节点

    2. 添加一个点击事件

    3. 延迟执行定时器 div中显示

    3.清除定时器

    3.1 clearInterval

    3.2 clearTimeOut


    二、history对象

    1.forwar

    2.go

    3.back


    三、loction对象


    四、JS-DOM对象

    1.DOM文档对象模型

    DOM赋予我们可以操作页面的能力

    可以创建,插入,修改,删除元素等等

    2.节点

    HTML中任何元素,都是一个节点,DOM就是能够操作这些节点

    2.1节点的分类

    2.1.1 文档节点 : 

    文档本身,整个文档document

    2.1.2 元素节点 : 

    所有HTML元素

    2.1.3 属性节点 :

    2.1.4 文本节点 :

    2.1.5 注释节点 :

    2.2获取节点

    2.2.1 根据id值获取节点

    方法名 : document.getElementById("id值")

    作用 : 根据元素的id属性值,获取到唯一一个元素节点

    参考语法 : 

        var div1=document.getElementById("div1");

    2.2.2 根据元素名获取节点

    方法名 : 主语.getElementsByTagName("元素名")

    作用 : 根据元素名字获取一组元素

    注意 : 这种方式获取的节点为数组,所以要利用数组的方式进行操作

    主语:document|父节点

        var ps=document.getElementsByTagName("p");

        ps[0].style.color="blue";

    2.2.3 根据属性值获取节点

    方法名 : 主语.getElementsByClassName("class属性值")

    作用 : 根据class属性值获取一组元素

    2.2.4 根据名称获取节点

    方法名 : getElementsbyName()

    2.3 创建节点

    2.3.1创建节点

    方法名 : creatElement()

    输入参数 : 元素标签名

    主语 : document

    返回值 : 新节点

    2.3.2 插入节点

    方法名 : appendChild()

    输入参数 : 要插入的节点

    主语 : 父节点

    返回值 : 追加的节点

    注意 : 这种创建是追加元素,在父节点中的最后位置追加

    2.3.3插入节点,不追加

    方法名 : insertBefore(childNode1,ChildNode2)

    输入参数:

        ChildNode1 要插入的节点

        ChildNode2 父节点中的指定子节点

    主语 : 父节点

    返回值 : 返回第一个参数,要插入的节点

    注意,如果ChildNode2位null或undefind,效果同与appendChild(),必须给2个参数

    五、间接查找

    1. 方法名firstChild

    作用 : 返回元素的第一个子节点

    2. 方法名lastChild

    作用 : 返回元素的最后一个子节点

    3. 方法名nextSibling

    作用 : 返回元素的下一个兄弟节点

    4. 方法名parentNode

    作用 : 返回元素的父节点

    5. 方法名previousSibling

    作用 : 返回元素的上一个兄弟节点

    六、操作节点

    1.替换节点

    方法名 : 替换节点 replaceChild(child1,child2)

    作用 : 使用参数1替换参数2

    输入参数:

        child1:要替换的节点

        child2:被替换的节点

    主语:父节点

    返回值:被替换的节点

    2.克隆节点

    方法名 : 克隆节点 cloneNode(boolean)

    作用 : 克隆某个节点

    输入参数:

        true:子节点也被克隆

        false:只克隆当前节点的结构,不包括子节点 默认为false

    主语:要克隆的节点

    返回值:返回克隆的节点

    注意 : JS代码不会被克隆,如果JS效果已运行,那么会克隆已经完成效果后的代码

    注意2 : 克隆的代码会存在id属性,如果原节点存在id属性,手动修改新节点的id

    3.删除节点

    方法名 : removeChild()

    输入参数 : 要移除的节点

    主语 : 父节点

    返回值 : 被删除的节点

    七、操作表单

    1.表单元素

    表单元素都可以根据dom获取节点的方式获取

    特殊获取方式:form节点.name

    2.表单元素事件

    onchange 内容有改变触发事件

    oninput 内容有输入触发事件

    3.form事件

    onsubmit() 表单提交时

    onreset() 表单重置时

    4.form方法

    submit() 表单提交

    reset() 表单重置

    相关文章

      网友评论

          本文标题:前端JS学习(三)

          本文链接:https://www.haomeiwen.com/subject/lmkowqtx.html