DOM操作
文章平均质量分 75
DOM操作
cjx177187
这个作者很懒,什么都没留下…
展开
-
信息划动进入案例
/每次开始前都清楚一次计时器,防止多个计时器工作。利用缓动动画将图片下方的盒子缓慢显示出来。//目标值为父盒子与要滑动出来盒子的高度差。//设定值=当前+(目标值-当前)*百分比。//要将盒子收回其目标值为父盒子高度。...原创 2022-07-21 22:10:59 · 54 阅读 · 0 评论 -
事件(重点)
事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能。movementX,movementY返回一个位移值,单位为像素,表示当前位置与上一个mousemove事件之间的距离,从左往右为正,从右往左为负。1、keydown输入框的键盘按下了,按下不松手会一直触发,监听键盘不一定可以绑定输入框,表格也可以、事件对象上存储着事件发生时的相关信息,就是事件触发时handler函数内部会传入数据,就是触发时的信息。===>行内和属性绑定方式解绑。...原创 2022-07-18 16:34:04 · 279 阅读 · 0 评论 -
DOM操作----换肤案例
获取页面上的所有图片,给每个图片添加点击事件,将点击的图片地址复制给body的背景地址中,从而达到换肤的目的。再将地址复制给body时外层和内层都有引号,这时就可以使用反引号,更加方便。注意取img的地址可以用点语法===>imgs[i].src。若干小图片,点击任意一个图片,这个图片将铺满整个屏幕。...原创 2022-07-14 22:32:07 · 193 阅读 · 0 评论 -
切换元素的属性值特效操作
不能这样使用。id是box的元素,可以把box直接看作一个全局变量,他引用的是#box元素,在项目中这样使用,容易导致程序混乱。获取元素的方法:系统提供的方法:H5之前的技术:document.getElementById( "" )====>通过Id来获取页面上的元素。括号里面加引号是Id名,不加引号是标签。如果没有就返回null.Id要独一无二。document.getElementsByClassName( "" )====>通过类名来获取元素。将所有类名为box2的节点都获取,并将其装入数组中。do原创 2022-07-14 17:15:55 · 137 阅读 · 0 评论 -
table标签选项切换
获取下面所有的板块,并添加点击事件,利用派他思想完成点击板块及换色的功能;将上面的板块与下面的板块联系起来,用什么来联系呢?利用函数查找点击的下面板块的是哪一个,然后即将相对应得上面的板块更改背景颜色及文字,这里也要用到排他思想。//获取自己是父元素中的第几个子元素/节点。需求点击下面的板块上面的板块进行相应得变化。......原创 2022-07-14 23:31:36 · 164 阅读 · 0 评论 -
新浪微博(真数据)案例
/4.添加底部条(点赞数attitudes_count,分享数reposts_count,评论数comments_count)//2.在contentbox中添加顶部的盒子,用来装头像和昵称。//1.在mainbox中添加contentbox。//b.给头像盒子添加img标签并添加src的值。//e.根据数据中的图片数添加img的盒子。//c.添加装昵称和介绍的盒子。//3.添加微博内容部分得盒子。//a.添加微博内容文字部分。//a.添加装头像的盒子。//导入新浪微博的数据。//b.添加图片部分。...原创 2022-07-16 17:20:28 · 136 阅读 · 0 评论 -
模态弹窗案例
前三个参数是颜色,后一个是透明度,效果为白色背景透明。利用background中的透明度的大小从而实现半透明的弹窗。2,不太好的方法(模仿透明,不仔细看,看不出来)//给确定按钮绑定点击时间,删除半透明模板。//在展示框中添加文字和确定按钮。//点击注册按钮产生半透明背景。//在半透明的背景上添加展示框。...原创 2022-07-17 14:34:55 · 202 阅读 · 0 评论 -
信息划动进入案例
/每次开始前都清楚一次计时器,防止多个计时器工作。利用缓动动画将图片下方的盒子缓慢显示出来。//目标值为父盒子与要滑动出来盒子的高度差。//设定值=当前+(目标值-当前)*百分比。//要将盒子收回其目标值为父盒子高度。...原创 2022-07-21 22:09:44 · 107 阅读 · 0 评论 -
表单验证案例
前端先验证用户输入的数据格式是否正确。原创 2022-07-14 22:38:10 · 258 阅读 · 0 评论 -
滑动状态栏固定
利用给document绑定scroll事件,判断输入框通过滑动到浏览器窗口顶部的距离来给input所在的盒子添加。"../../homework/项目/pc端/img4/iconfont.js"//判断滑动距离与input框到窗口顶部的距离。//给input框设置fixed属性,使其固定。"请输入你想要的宝贝...."属性,使其固定在浏览器窗口顶部。--导航栏-左侧-->--导航栏-右侧-->--左边图片-->--右边图片-->--多选框-->--搜索框-->--输入框-->...原创 2022-07-21 22:20:35 · 265 阅读 · 0 评论 -
--缓慢下拉列表案例--
/再次优化添加拉上的动画【在全局设置一个变量是我们的预设高度,当flag为false时将变量值设为0,当flag为true时将变量设置为我们预设的高度】//优化点击下拉后再次点击收回所有的盒子。//设定值=当前+(目标值-当前)*百分比。//每次都要清楚计时器防止其按多次。//获取css中的高度。//获取css中的高度。//获取css中的高度。......原创 2022-07-21 15:31:28 · 139 阅读 · 0 评论 -
DOM操作---盒子模型
offsetHeight在新版本的FF和IE中是一样的,表示网页的高度,与滚动条无关,chrome中不包括滚动条。clientHeight内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。offsetX、offsetY相对于事件源元素(target或srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。clientTop元素上边框的厚度,当没有指定边框厚底时,一般为0。...原创 2022-07-18 16:34:58 · 165 阅读 · 0 评论 -
--事件代理--
事件代理事件代理网页设计中一种设计思想,利用事件对象中引用的目标对象这个技术来实现的;无论事件触发时,是不是目标对象的监听器,在监听器内部的事件对象event中都可以访问这个时间的对象,利用这个特点去绑定事件给父元素,来代理子元素的业务,这种设计就是时间代理。但是这样虽然能添加一个新的元素但是还是不能实现点击新的元素打印其内容,而且每次运行代码时,会生成若干个点击事件,造成资源浪费。我们给父元素添加一个点击事件,找出事件对象,打印其innnerHTML的值就可以了。//el是每个事件本身。...原创 2022-07-21 10:01:15 · 80 阅读 · 0 评论 -
新浪微博(假数据)案例
我们先尝试一下利用假数据来实现新浪微博的布局。原创 2022-07-16 12:59:00 · 243 阅读 · 0 评论 -
style操作
有defer,加载后续文档元素的过程将和script.js的加载并行进行(异步),但是script.js的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成。没有defer或async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。我们的代码是从上到下运行的,在获取box2的代码在定义box2之前就运行了,但是这时候box2还没有定义,所以获取的就是空。...原创 2022-07-21 13:53:05 · 200 阅读 · 0 评论 -
css竖直水平排列方法
calc()从字面看我们可以把它理解为一个function函数。它是一个css3新增当我们的功能,可以用来指定元素的长度,动态计算长度值。当我们在需要设置样式或者使用某些样式时但是他们的长度没有办法确定时我们就需要使用calc函数来帮我们计算。也可以给父元素设定网格布局给子元素添加针对于自己的交叉轴和主轴上的排列样式。给父元素设置网格布局并添加改变父元素内所有项目的交叉轴和主轴上的排列样式。calc函数可以嵌套。还是父相子绝,给子元素设定上面和右边的外间距。亲元素相对定位,子元素绝对定位。...原创 2022-07-17 17:36:48 · 1156 阅读 · 0 评论 -
事件机制(冒泡和捕获)
stopImmediatePropagation()方法,这个不仅会阻止事件向祖元素的冒泡,也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低的,同元素同事件多处理程序时);答都不是,都不会阻止事件传递,因为true是捕获阶段触发,false是在冒泡阶段触发;要阻止事件传递唯一的方式就是阻止事件冒泡事件对象调用stop。以对象属性的方式注册的事件才生效,用addEventListener/attachEvent这种是不生效的。阻止向父级元素冒泡,不可以阻止默认的跳转系统事件。...原创 2022-07-21 09:59:40 · 876 阅读 · 0 评论 -
信息录入系统案例
/给这一行的tr元素中的每个td添加input框,进行值得修改。//将td中的值保存起来放入新添加得input框内。//给修改值以后的操作单元格内添加删除和修改按钮。//点击修改按钮后按钮变为确定和修改。//最后一个单元格添加删除按钮。//将新输入得值添加到td内。......原创 2022-07-17 14:34:14 · 336 阅读 · 0 评论 -
页面的渲染流程
③domtree和样式结构体结合后构建呈现树(rendertree),rendertree有点类似于domtree,但有区别,rendertree能识别样式,rendertree中每个node都有自己的style,而且rendertree不包含隐藏的节点(比如displaynone的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到rendertree中。⑤还有一种是用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘)...原创 2022-07-21 10:01:49 · 790 阅读 · 0 评论 -
什么是DOM操作
文档对象模型DOM 是document object model====>文档对象模型 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口把文档中的代码翻译成一个对象模型在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等ducoment不是关键字,但是可以直接使用。因为把window省略了。1.只有一个根节点document2.除了根节点外所有节点都有唯一的一个父原创 2022-07-14 16:12:29 · 638 阅读 · 0 评论 -
获取元素的方法
系统提供的方法:H5之前的技术:document.getElementById( "" )====>通过Id来获取页面上的元素。括号里面加引号是Id名,不加引号是标签。如果没有就返回null.Id要独一无二。document.getElementsByClassName( "" )====>通过类名来获取元素。将所有类名为box2的节点都获取,并将其装入数组中。document.getElementsByTagName("")====>通过标签来获取元素。如果没有这个标签就返回一个空数组。document.原创 2022-07-14 16:13:55 · 267 阅读 · 0 评论