![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
立花泷的学习日记
学而不思则罔,思而不学则殆
展开
-
JS学习-18.属性的设置、获取
setAttribute 设置元素的可见属性<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>设置元素的属性</title> </head> <body> <di原创 2021-11-17 10:38:31 · 518 阅读 · 0 评论 -
JS学习-17.练习【模拟QQ】
模拟QQ发送消息输入名字后,点击确定,隐藏按钮和名字信息输入内容,点击确认,发送消息到面板上<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>练习</title> <style type原创 2021-11-17 10:36:32 · 919 阅读 · 0 评论 -
JS学习-16.删除元素的方法
删除子级元素 removeChild删除自身元素 remove<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>删除子级元素</title> </head> <body>原创 2021-11-16 11:13:18 · 978 阅读 · 0 评论 -
JS学习-15.替换指定元素
修改子级元素replaceChild<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>替换元素</title> <style type="text/css"> #div1{原创 2021-11-16 11:12:07 · 831 阅读 · 0 评论 -
JS学习-14.动态指定位置插入元素
insertBefore 插入到某个元素的前面<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>动态插入元素</title> <style type="text/css"> #d原创 2021-11-16 11:10:40 · 284 阅读 · 0 评论 -
JS学习-13.动态生成及尾部插入元素
createElement 创建元素appendChild 插入到该元素的子级的最后方interHTML 可以放入元素的内容<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>生成元素</title>原创 2021-11-16 11:09:22 · 901 阅读 · 0 评论 -
JS学习-12.DOM的深入操作
父级:parentNode<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>父级元素</title> </head> <body> <div> <div> <div id='div1'></div> </div> </div>原创 2021-11-16 11:08:14 · 62 阅读 · 0 评论 -
JS学习-11.循环与逻辑判断
while循环<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>while循环</title> <style> div{ width: 100px; height: 100px; background: palegoldenrod; } </style> </head> <bo原创 2021-11-16 11:05:16 · 295 阅读 · 0 评论 -
JS学习-10.for循环的深入
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>for循环的深入</title> </head> <body> <!--continue 跳过当前循环--> <!--实现各行变色--> <!--break 跳出循环--> <!--到第2个段落跳出循环--> &l原创 2021-11-15 11:35:04 · 241 阅读 · 0 评论 -
JS学习-9.for循环的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>for循环</title> </head> <body> <!--给div加上样式--> <div></div> <div></div> <div></div> <div&原创 2021-11-15 11:34:21 · 222 阅读 · 0 评论 -
JS学习-7.练习2
屏幕上显示一个触碰不到的元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} /*别忘了定义position*/ #myDiv{height: 50px;width: 50px;top: 0;left: 0;background: red;pos原创 2021-11-12 09:27:57 · 695 阅读 · 0 评论 -
JS学习-1.DOM的类与交互
window.onload 整个页面加载完之后执行document.getElementById()选中id的相关元素进行设置onclick 点击事件document.getElementsByTagName()选取标签名document.getElemnetsByClassName()选取类document.body body元素可以直接取cssText–>可以像css样式那样去写代码aDiv[0].style.cssText='width:100px;height:200px'原创 2021-11-10 18:36:36 · 86 阅读 · 0 评论 -
JS学习-2.练习1
1.请编写一个div元素,点击之后不断的自动增长宽度和高度,每次加1像素,让其最终等于整个屏幕宽度和高度为止<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0;padding: 0; } #myDiv{ width: 100px;height: 100px原创 2021-11-10 18:39:55 · 450 阅读 · 0 评论 -
JS学习-3.练习2
屏幕进行抖动(类似于qq抖动)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #myBody{ position: absolute; } </style> </head> <body id="myBody">原创 2021-11-10 19:26:46 · 201 阅读 · 0 评论 -
JS学习-4.练习3
编写一个增加和减少的按钮中间是数字0,点击增加,数字加1;点击减少,数字减1;不能低于0<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="increase">+</button> <span id='mySpan'&g原创 2021-11-11 11:02:41 · 367 阅读 · 0 评论 -
JS学习-5.闭包的概念以及生命周期
闭包子函数使用父函数的行为,叫做闭包!子函数可以访问到父函数中的局部变量,父函数不能访问到子函数中的局部变量。子函数可以延长父函数的生命周期子函数可以扩展父函数的空间生命周期有生既有死当声明的变量不被调用时,会死亡;当函数中声明的变量被使用时,生命周期会被延长;当变量指向window,此变量可以不死回收机制当生命周期结束时,会自动会被回收声明一个变量,然后将变量的值赋值为nullMath.random() 可以随机产生0-1的随机数rgb(255,255,255)0-2原创 2021-11-11 11:06:47 · 421 阅读 · 0 评论 -
JS学习-6.练习1
游览器拉伸的时候,游览器随机颜色parseInt 将字符串转为整数方法一:不使用parseInt<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #yy{background-color: rgb(100,200,200);} </style> </head> <原创 2021-11-12 09:26:48 · 49 阅读 · 0 评论 -
JS学习-8.事件对象及取消默认事情
事件对象:是和当前事件有关系 event:可以找到和这个事件有关系的内容事件坐标:clientX/clientY取消默认事件:return falseonmousemove:鼠标在内容上滑动时进行触发onmouseup:鼠标抬起onmousedown:鼠标按下oncontextmenu:鼠标右键onkeydown:键盘按下onkeyup:键盘抬起事件对象和取消默认事件的实例:获取鼠标滑动位置的坐标<!DOCTYPE html><html> <head&原创 2021-11-15 11:10:57 · 370 阅读 · 0 评论