前端html笔记
qqq777_
这个作者很懒,什么都没留下…
展开
-
JavaScript笔记53_定时器的应用(3)
两个盒子运动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-03-12 14:50:31 · 49 阅读 · 0 评论 -
JavaScript笔记52_定时器的应用(2)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-03-11 20:42:50 · 71 阅读 · 0 评论 -
JavaScript笔记51_定时器的应用(1)
点击按钮之前:点击按钮之后:运动到400处,停下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-03-11 15:40:25 · 54 阅读 · 0 评论 -
JavaScript笔记50_延时调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style>原创 2021-03-10 20:51:53 · 58 阅读 · 0 评论 -
JavaScript笔记49_自动切换图片(使用定时器)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style>原创 2021-03-10 17:22:46 · 170 阅读 · 0 评论 -
JavaScript笔记48_定时器简介
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style>原创 2021-03-10 12:03:40 · 68 阅读 · 0 评论 -
JavaScript笔记47_浏览器对象模型BOM
BOM:浏览器对象模型可以使我们通过js操作浏览器;提供了一组对象,用来完成对浏览器的操作。window:代表整个浏览器窗口,也是网页中的全局对象。navigation:代表当前浏览器的信息,通过该对象识别不同的浏览器。location:代表当前浏览器的地址栏信息。history:浏览器的历史记录,向前向后翻页,而且该操作只在当次有效。<!DOCTYPE html><html lang="en"><head> <meta charset="原创 2021-03-09 20:30:00 · 88 阅读 · 0 评论 -
JavaScript笔记46_键盘移动div
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{原创 2021-03-09 16:58:30 · 62 阅读 · 0 评论 -
JavaScript笔记45_键盘事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> <原创 2021-03-09 16:08:31 · 76 阅读 · 0 评论 -
JavaScript笔记44_鼠标滚轮事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{原创 2021-03-09 10:39:55 · 53 阅读 · 0 评论 -
JavaScript笔记43_鼠标的拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{原创 2021-03-08 21:21:58 · 83 阅读 · 0 评论 -
JavaScript笔记42_事件的传播(了解)
微软认为:事件由内向外传播,当事件触发时,应当先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就是说,在冒泡阶段执行。(事件冒泡)网景公司认为:事件应该是由外向内传播,也就是当事件触发时,应当先触发当前元素的最外层的祖父元素的事件。然后向内传播给后代元素。(事件捕获)W3C综合两个公司的方案,将事件分成了三个阶段1.捕获阶段在捕获阶段时,从最外层的祖先元素,向目标元素进行事件的捕捉,但是,默认此时不会触发事件。。2.目标阶段事件捕获到目标元素3.冒泡阶段事件从目标元素向祖先元素传原创 2021-03-08 16:46:55 · 46 阅读 · 0 评论 -
JavaScript笔记41_事件的绑定
事件的绑定:使用“对象.事件=函数”的形式绑定响应函数;只能同时为一个元素的一个事件绑定一个函数;不能绑定多个,如果绑定了多个,则后面的会覆盖掉前面的;————————————————addEventListener();通过这个方法也可以为元素绑定响应函数参数:1.事件的字符串,不要on2.回调函数,当事件触发时,该函数会被调用3.是否在捕获阶段触发事件,需要一个布尔值,一般都穿falsebtn01.addEventListener("click",function(){},false);原创 2021-03-04 20:15:01 · 99 阅读 · 1 评论 -
JavaScript笔记40_事件的委派
事件的委派:将事件统一绑定给元素的共同祖先元素,这样后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。事件委派利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的效率<script> window.onload=function(){ var u1=document.getElementById("u1") //点击按钮添加超链接 var btn01=document.get原创 2021-03-04 17:21:25 · 111 阅读 · 1 评论 -
JavaScript笔记39_取消事件的冒泡
在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡。取消语法为:var s1=document.getElementById("s1"); s1.onclick=function(event){ alert("我是span的单击响应函数"); event.cancelBubble=true; };...原创 2021-03-04 15:32:20 · 81 阅读 · 1 评论 -
JavaScript笔记38_事件的冒泡
事件的冒泡:事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。 <style> #box1{ width: 200px; height: 200px; background-color: red; } #s1{ background-color: yellow; } </style>&原创 2021-03-04 12:02:12 · 50 阅读 · 1 评论 -
JavaScript笔记37_事件对象
事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。var areaDiv=document.getElementById("areaDiv");var showMsg=document.getElementById("showMsg");areaDiv.onmousemove=function(){//在事件对象中封装了当前事件相关的一切信息,比如,鼠标的坐标,键盘某个键被按下,鼠标滚轮方向等...//clientX获取鼠标的水平坐标var x=event.原创 2021-03-03 22:13:51 · 67 阅读 · 1 评论 -
JavaScript笔记36_一些样式属性
clientWidth、clientHeight如果要修改,只能通过style原创 2021-03-03 17:19:54 · 50 阅读 · 2 评论 -
JavaScript笔记35_将新员工信息添加入表格中
第一种方法:添加子节点、子元素第二种方法:使用innerHTML,修改tr的innerHTML信息。原创 2021-03-03 11:40:17 · 291 阅读 · 0 评论 -
JavaScript笔记34_创建新节点并插入到某节点前面
将“广州”节点插入到bj前面myClick("btn02",function(){//创建广州节点var li=document.creatElement("li");var gzText=document.creatTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj=document.getElementById("bj");//获取cityvar city=document.getElementById("city");/原创 2021-03-02 18:05:29 · 1836 阅读 · 0 评论 -
JavaScript笔记33_获取和移除自定义属性
修改属性值移除原创 2020-12-17 16:34:48 · 113 阅读 · 0 评论 -
JavaScript笔记32_页面换背景图片
原创 2020-12-16 17:31:58 · 111 阅读 · 0 评论 -
JavaScript笔记31_操作元素总结
操作元素是DOM的核心内容原创 2020-12-16 17:00:54 · 136 阅读 · 0 评论 -
JavaScript笔记30_修改样式 属性_通过修改样式类名
先写一个类然后,再在点击后function里修改div的样式属性类(如果样式多,使用的第二种)原创 2020-12-16 16:19:09 · 109 阅读 · 0 评论 -
JavaScript笔记29_修改样式 属性案例_显示隐藏文本框内容
原创 2020-12-16 11:57:59 · 72 阅读 · 0 评论 -
JavaScript笔记28_修改样式 属性案例
原创 2020-12-16 11:11:59 · 61 阅读 · 0 评论 -
JavaScript笔记27_修改样式 属性
原创 2020-12-15 20:56:18 · 81 阅读 · 0 评论 -
JavaScript笔记26_修改表单属性
原创 2020-12-15 20:35:45 · 164 阅读 · 0 评论 -
JavaScript笔记25_修改元素属性
原创 2020-12-15 20:04:54 · 58 阅读 · 0 评论 -
JavaScript笔记26_innerText和innerHTML区别
第一个log输出:第二个log输出:原创 2020-12-15 16:14:32 · 71 阅读 · 0 评论 -
JavaScript笔记25_操作元素
事件里面内容为函数不添加触犯方式,直接刷新界面就显示原创 2020-12-15 15:12:45 · 55 阅读 · 1 评论 -
JavaScript笔记24_事件基础
事件三要素:事件源,事件类型,事件处理程序。常见的鼠标事件原创 2020-12-15 12:02:17 · 102 阅读 · 2 评论 -
JavaScript笔记23_获取body和html方法
原创 2020-12-15 11:11:17 · 295 阅读 · 0 评论 -
JavaScript笔记22_queryselector获取元素
原创 2020-12-14 22:20:33 · 394 阅读 · 0 评论 -
JavaScript笔记20_getElementsByTagName获取某类标签元素
获取ol里面的li指定ol原创 2020-12-14 22:17:38 · 196 阅读 · 0 评论 -
JavaScript笔记20_getElementById获取元素
<body> <div id="time">2020-1-1</div> <script> var timer=document.getElementById('time'); console.log(timer); console.log(typeof timer);//检查timer是不是object类型 console.dir(timer);//打印我们返回的元素对象,更好的原创 2020-12-06 15:20:25 · 202 阅读 · 0 评论 -
2020-11-30JavaScript笔记19_数据类型内存分配
1.简单数据类型 是存在栈里面 直接开辟一个空间存放的是值2.复杂数据类型(通过new关键字创建的对象,系统对象、自定义对象,如Object、Array、Data等) 首先在栈里面存放地址 十六进制表示,对象存放在堆里面...原创 2020-11-30 20:21:24 · 66 阅读 · 0 评论 -
JavaScript笔记18_创建数组的两种方式
<script> { //创建数组的两种方式 //1.利用数组字面量 var array1=[1,2,3]; console.log(array1); //2.利用new创建数组 var array2=new Array(1);//创建了一个长度为1的空数组 var array3=new Array(1,2);//原创 2020-11-30 10:52:54 · 207 阅读 · 0 评论 -
JavaScript笔记17_new关键字执行过程
原创 2020-11-29 22:35:16 · 92 阅读 · 0 评论 -
JavaScript笔记16_构造函数与对象
<script> { //1.构造函数 function Star(uname,age,sex) { this.name=uname; this.age=age; this.sex=sex; } //2.对象 //new构造函数名();原创 2020-11-29 22:28:55 · 152 阅读 · 0 评论