DOM,BOM
知识点
ES6
这个作者很懒,什么都没留下…
展开
-
本地存储(window.sessionStorage与window.localStroage)
一、window.sessionStorage 1、介绍 1、周期:关闭浏览器窗口 2、在同一页面下,数据共享 3、以键值对形式存储(Application->Storage->Session Storage) 2、方法 1、存储 localStorage.setItem('username',val); 2、获取 localStorage.getItem('username') 3、删除 localStorage.removeItem('username'); 4、删.原创 2020-09-28 19:22:30 · 523 阅读 · 0 评论 -
事件委托(事件代理)
事件委托(事件代理) 原理:不要给每个子节点单独设置事件监听,而是把事件监听设置在父节点上,利用事件冒泡的原理影响至每个子节点 例如: 我们用for循环的方式为每个li添加事件监听太麻烦,效率低 因此,我们可以为父节点注册事件,然后在函数中通过e.target可以找到当前点击的li,利用事件冒泡到父节点上,触发事件 <ul> <li>知否知否,点我应有弹框在手!</li> <li>知否知否,点我应有弹框在手!<原创 2020-09-22 18:35:22 · 311 阅读 · 0 评论 -
常用的鼠标事件
常用的鼠标事件 2、其他事件 contextmenu我们可以禁用右键菜单 selectstart 禁止选中文字 // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart ...原创 2020-09-22 18:39:44 · 221 阅读 · 0 评论 -
鼠标事件对象
鼠标事件对象 1、e.clientX和e.clientY 可视区的x,y坐标 不论页面滚动多长,返回的值都是相对可视区的坐标 2、e.pageX和e.pageY 鼠标相对文档的x,y坐标(常用) 随着页面滚动,返回的值是鼠标相对于页面头部或者最左侧的距离 3、e.screenX和e.screenY 相对于电脑屏幕的坐标 不论浏览器在哪个位置,返回的都是鼠标相对于电脑屏幕的坐标 例:跟随鼠标移动的天使 1、为document添加mousemove事件,并且获得鼠标相对文档的坐标 2...原创 2020-09-22 19:10:17 · 516 阅读 · 0 评论 -
键盘事件、键盘事件对象
键盘事件、键盘事件对象 一、键盘事件 1、keyup 按键弹起触发 2、keydown 按键按下触发,一直按着一直触发 3、keypress 按键按下触发,一直按着一直触发 (不识别功能键,例如crtl、shift、左右箭头) 4、如果三个事件都有,则触发顺序为 keydown->keypress->keyup 二、键盘事件对象 1、e.keyCode 对应建的ASCII码值 A-Z 65-90 a-z 97-122 2、我们的keyup和keydown事件...原创 2020-09-23 08:25:51 · 840 阅读 · 0 评论 -
什么是DOM和BOM
DOM和BOM原创 2020-09-23 08:43:25 · 204 阅读 · 0 评论 -
Location、history对象方法
Location(window)对象 1、href属性 获取整个URL地址 2、search属性 获取地址栏中的参数(?之后以及包括?) 例:我们在一个页面上利用表单的get方式发送数据到另一个页面上 <body> <form action="index.html"> 用户名: <input type="text" name="uname"> <input type="submit" value="登录"&.原创 2020-09-23 14:56:44 · 1008 阅读 · 0 评论 -
元素偏移量offset系列(获取该元素的偏移或大小)(包含拖拽模态框的案例)
元素偏移量offset系列(获取该元素的偏移或大小)(都没有单位) 一、常用属性 1、offsetTop、offsetLeft获取该元素的偏移 可以得到元素的偏移位置,它以带有定位的父亲为准如果没有父亲或者父亲没有定位,则以body为准,返回不带单位的数值 2、offsetWidth、offsetHeight获取该元素的大小 可以得到元素的大小宽度和高度是包含padding+border+width 3、offsetParent 返回带有定位的父亲否则返回的...原创 2020-09-25 17:53:40 · 703 阅读 · 0 评论 -
client属性(返回元素大小,与offset相比不包含边框,也没单位)
原创 2020-09-27 15:18:24 · 263 阅读 · 0 评论 -
scroll属性(与client相似,但是它返回的是自身实际的宽高)pageYOffset表示页面被卷去的头部
1、 scroll属性 2、与client的区别 3、页面被卷去的头部 window.pageYOffset表示页面被卷去的头部 window.pageXOffset表示页面被卷去的左部原创 2020-09-27 15:55:30 · 106 阅读 · 0 评论 -
offsetWeight、clientWidth、scrollWidth区别
offsetWeight 返回自身宽度,padding+边框+内容区域 clientWidth padding+内容区域,不包含边框 scrollWidth padding+内容区域,不包含边框,而且包括文字超出的部分 常用情景原创 2020-09-27 19:25:27 · 434 阅读 · 0 评论 -
鼠标事件(mouseover和mouseenter的区别)
mouseover和mouseenter都是鼠标移到元素身上就触发,区别是 1、mouseover经过自身盒子触发,经过子盒子也触发,拥有冒泡特性 2、mouseenter只经过自身盒子触发,没有冒泡特性 mouseenter不会冒泡,搭配鼠标离开事件mouseleave同样不会冒泡 ...原创 2020-09-28 08:44:17 · 16852 阅读 · 0 评论 -
js动态创建表格
js动态创建表格 1、循环数据条数,来生成行 2、循环对象中的属性,来生成列,再把对应的值放入列中,再添加到行上 3、再创建删除按钮 // 1.先去准备好学生的数据 var datas = [{ name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'Ja.原创 2020-09-22 16:18:10 · 389 阅读 · 0 评论 -
Tab栏切换
Tab栏切换 先循环给每个小li添加点击事件,并且在点击事件里,循环每个小li,让其他小li为未选中状态(排他),把自己为选中状态;但是在循环小li,没添加点击事件之前,先为小li添加自定义属性,方便之后为一一对应的模块做显示 for (var i = 0; i < li.length; i++) { //循环给每个li添加自定义属性,方便一会显示对应的模块 li[i].setAttribute('index', i) .原创 2020-09-22 13:25:40 · 149 阅读 · 0 评论