JS后续深入!!!接上文

定时器

   BOM : 浏览器对象模型
       BOM的核心对象是window,它表示浏览器的一个实例。
        在全局定义的 属性与函数,相当于为window对象定义的属性与函数
 
   定时器:
        延迟执行定时器
            setTimeOut(回调函数,ms时间)
            延迟指定时间,调用回调函数,指定内部代码
        重复执行定时器
            setInterval(回调函数,ms时间)
            每隔指定的ms数,执行一个函数的代码
 
        停止结束定时器 : clearInterval(定时器任务编号)

事件

  js事件
    当做某件事情触发一些js代码的事情
 
  事件的分类:
    焦点事件
    键盘事件
    鼠标事件
        单击事件
        双击事件
        移入
        移出
        移动
    文档事件
    表单事件
 
  常用的为元素绑定事件的方式:
                1) 在标签在添加 onclick = ""
                2) 选中元素,在js代码中为元素绑定事件

DOM

DOM :Document Object Model 文档对象模型
   作用: 赋予了我们操作页面中元素的能力
         实现对元素的新增,创建,修改,删除...

   加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成,组成一个节点树。
   节点的分类:
        文档节点    文档本身整个文档 document
        元素节点    所有的HTML元素<a>、<div>、<p>
        属性节点    HTML元素内的属性id、href、name、class
        文本节点    元素内的文本hello
        注释节点    HTML中的注释

    节点的操作 :
        1)获取节点
            直接获取
            间接获取
        2)创建节点
        3)插入节点
        4)删除节点
        5)修改节点
        6)克隆节点

直接获取节点:
    getElementById  根据元素的id属性值获取一个节点
        主语: 只能为document
    getElementsByClassName  根据元素的class属性值获取一组节点
        主语: document,父节点
    getElementsByTagName 根据元素的标签名获取一组节点
        主语: document,父节点
    getElementsByName 根据元素的name属性值获取到一组节点
        主语: 只能为document

节点

间接查找获取节点

| childNodes      | 返回元素的一个子节点的数组 
| firstChild      | 返回元素的第一个子节点     
| lastChild       | 返回元素的最后一个子节点   
| nextSibling     | 返回元素的下一个兄弟节点   
| parentNode      | 返回元素的父节点          
| previousSibling | 返回元素的上一个兄弟节点   
创建节点 
        document.createElement("标签名") 创建元素节点
        createTextNode 创建文本节点

插入节点
        父节点.appendChild(子节点)
        把子节点追加到父节点的最后

        父节点.insertBefore(要插入的子节点,参考节点)
        把新节点插入到父节点中的参考节点之前
点击子节点隐藏父节点
        结构:
            列表
            后去到所有span
            绑定点击事件
            获取到当前点击的span
            获取span的父节点
            通过display隐藏
操作节点:
    替换节点
        父节点.replaceChild(新子节点,原子节点)
        返回被替换的节点
        如果新节点是页面中原有的节点,实现了移动覆盖的效果
    删除节点
        父节点.removeChild(子节点)
        返回被删除的节点
    克隆节点
        节点.cloneNode(boolean)
            true : 深拷贝  拷贝当前节点以及子元素
            false : 浅拷贝 拷贝当前节点不拷贝字内容

表单

    1.如何通过jsDom获取表单节点
      1)通过id,class,tagName...
      2)document.form标签的name属性值获取
 
    2.获取表单元素节点
      1)通过id,class,tagName...
      2)通过表单节点.表单元素的name属性值
 
    3.获取表单元素的值  表单元素节点.value
      获取标签对中的内容  元素节点.innerHTML|innerText
 
    4.表单提交方式
      1) buttom按钮 + submit() buttom按钮绑定一个点击事件,触发函数校验表单元素的数据是否满足要求,满足调用submit()提交表单
      2) submit提交按钮 + 点击事件 onclock = "return func_submit()"->通过函数的返回值,实现提交请求的拦截  返回true->提交  返回false->拦截
      3) 表单的onsubmit事件+  "return func_submit()"  ->通过函数的返回值,实现提交请求的拦截  返回true->提交  返回false->拦截

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值