DOM
文章平均质量分 67
错言语
这个作者很懒,什么都没留下…
展开
-
跟随鼠标的天使
天使图片跟随鼠标移动而移动鼠标不断的移动,使用鼠标移动事件: mousemove在页面中移动,给document注册事件图片要移动距离,而且不占位置,我们使用绝对定位即可核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标, 把这个x和y坐标做为图片的top和left 值就可以移动图片核心代码:var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x原创 2021-11-06 02:32:04 · 152 阅读 · 0 评论 -
DOM(三)
事件高级注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式传统注册方法:利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></button>btn.onclick = function() {}特点: 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c 标准 推荐方式-add原创 2021-11-03 06:15:00 · 220 阅读 · 0 评论 -
动态生成表格
动态生成表格因为里面的学生数据都是动态的,我们需要js 动态生成。 这里我们模拟数据,自己定义好数据。 数据我们采取对象形式存储。所有的数据都是放到tbody里面的行里面。因为行很多,我们需要循环创建多个行(对应多少人)每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格,并且把数据存入里面(双重for循环)最后一列单元格是删除,需要单独创建单元格。最后添加删除操作,单击删除,可以删除当前行。href="javascript:;’'阻止链接跳转效果图:<!原创 2021-11-03 05:45:00 · 200 阅读 · 0 评论 -
简单版发布留言
简单版发布留言核心思路: 点击按钮之后,就动态创建一个li,添加到ul 里面。创建li 的同时,把文本域里面的值通过li.innerHTML 赋值给 li如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore当我们把文本域里面的值赋值给li 的时候,多添加一个删除的链接需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的li阻止链接跳转需要添加 javascript:void(0); 或者 javascri原创 2021-11-03 01:25:06 · 250 阅读 · 0 评论 -
新浪下拉菜单
新浪下拉菜单导航栏里面的li 都要有鼠标经过效果,所以需要循环注册鼠标事件核心原理: 当鼠标经过li 里面的 第二个孩子 ul 显示, 当鼠标离开,则ul 隐藏效果图参考新浪下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2021-11-03 01:23:17 · 118 阅读 · 0 评论 -
tab栏切换(十分好用)
tab栏切换布局效果当鼠标点击上面相应的选项卡(tab),下面内容跟随变化分析:Tab栏切换有2个大的模块上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。核心思路: 给上面的tab_list 里面的所有小li 添加自定义属性,属性值从0开始编号。当我们点击tab_list 里面的某个小li,让tab_con 里面对应序号的原创 2021-10-31 17:21:24 · 972 阅读 · 1 评论 -
排他思想(十分常用)
排他思想首先先排除其他人,然后才设置自己的样式 这种排除其他人的思想我们成为排他思想<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl原创 2021-10-31 21:30:00 · 255 阅读 · 0 评论 -
DOM(二)
自定义属性的操作1.获取属性值element.属性 获取属性值(元素本身自带的属性)console.log(div.id);element.getArrtibute('属性')get获得attribute属性的意思console.log(div.getAttribute('id')); console.log(div.getAttribute('index'));2.设置元素属性值element.属性='值'div.id = 'test';div.classN原创 2021-10-31 17:18:20 · 68 阅读 · 0 评论 -
循环精灵图
循环精灵图背景首先精灵图图片排列有规律的核心思路: 利用for循环 修改精灵图片的 背景位置 background-position让循环里面的 i 索引号 * 44 就是每个图片的y坐标效果图:实现代码:<style> * { margin: 0; padding: 0; } li { list-style-type: non原创 2021-10-29 09:00:00 · 216 阅读 · 0 评论 -
分时间显示问候图片
分时间显示问候图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t原创 2021-10-29 01:48:32 · 135 阅读 · 0 评论 -
点击按钮显示明文密码
点击按钮将密码切换成文本框,并可以查看密码明文核心思路: 点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如果是0 就切换为密码框,flag设置为1 <style> .box { position: relative; width: 40原创 2021-10-29 01:46:57 · 1187 阅读 · 0 评论 -
案例---点击获得当前时间
点击按钮会获得当前时间<!DOCTYPE html><html lang="en"><head> <title>点击按钮会获得当前时间</title> <style> div, p { width: 250px; height: 25px; line-height: 25px; colo原创 2021-10-29 01:45:29 · 350 阅读 · 0 评论 -
案例----点击按钮更换图片
点击按钮更换图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti原创 2021-10-29 01:44:14 · 236 阅读 · 0 评论 -
DOM(一)
DOM什么是DOM?文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM的作用获取页面元素给元素注册事件操作DOM元素的属性创建元素操作DOM元素DOM树文档:一个页面就是一个文档,DOM 中使用 document 表示元素:页面中的所有标签都是元素,DOM 中使用 eleme原创 2021-10-29 01:42:15 · 96 阅读 · 0 评论