定时器
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->拦截