随笔分类 - DOM对象
摘要:使用表格制作 解释都在注释里 html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>she</title> <link rel="stylesheet" href="./index.css"> </head> <bod
阅读全文
摘要:核心思路:监测用户是否按下s键,如果按下s键就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点:使用js里面的focus()方法 <body> <input type="text" /> </body> <script> var search =
阅读全文
摘要:<script> document.addEventListener("keyup", function () { console.log("我弹起了"); }); // keypress按键按下的时候触发 不能识别功能键 比如ctr1 shift 左右箭头等 document.addEventLi
阅读全文
摘要:鼠标不断的移动,使用鼠标移动事件:mousemove 在页面中移动,给document注册事件 图片要移动距离,而且不占位置,我们使用绝对定位即可 核心原理∶每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的 top和left值就可以移动图片 <body> <img src="/i
阅读全文
摘要:<style> body { height: 3000px; } </style> </head> <body> <script> // 鼠标事件对象 MouseEvent document.addEventListener("click", function (e) { // 1.client 鼠
阅读全文
摘要:<body> 这句话有自己的想法 </body> <script> // 1.禁止鼠标右键菜单 // contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认上下文菜单 document.addEventListener("contextmenu", function (e) {
阅读全文
摘要:<script> // 常见事件对象的属性和方法 // 1.返回事件类型 var div = document.querySelector("div"); div.addEventListener("click", fn); div.addEventListener("mouseover", fn)
阅读全文
摘要:<body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> </body> <script> // 常见事件对象的属性和方法 // 1.e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象
阅读全文
摘要:<style> ul { list-style: none; } li { width: 300px; } </style> </head> <body> <ul> <li>知否知否,点我应有弹窗在手</li> <li>知否知否,点我应有弹窗在手</li> <li>知否知否,点我应有弹窗在手</li
阅读全文
摘要:<body> <button>注册事件</button> </body> <script> let arr = "asdfdgd"; let aar = 0; for (let i = 0; i < arr.length; i++) { aar += arr[i]; } console.log(aa
阅读全文
摘要:<body onclick="alert('body')"> <!--html--> <div style="width: 400px; height: 400px; background: red" onclick="alert(this.style.background)" > <div id=
阅读全文
摘要:DOM重点核心-基础 获取元素有哪两种方法方法? 1 利用DOM提供的方法获取元素。 document.getElementbyId(),document.getELmenntbyTagName() document,getElementsByClassName('') document.query
阅读全文
摘要:document.write(); element.innerHTML; document.createElement(); 区别 document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘 innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
阅读全文
摘要:<style> * { padding: 0; margin: 0; } table { width: 500px; margin: 100px auto; border-collapse: collapse; /*边框合并模式*/ text-align: center; } td, th { bo
阅读全文
摘要:复制节点 node.cloneNode() node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> let ul = docu
阅读全文
摘要:当我们把文本域里面的值赋值给li的时候,多添加一个删除的链接 需要把所有链接获取过来,当我们点击当前的链接的时候,删除当亲链接所在的li 阻止链接跳转需要添加JavaScript:void(0);或者JavaScript:; <body> <button>删除</button> <ul> <li>张
阅读全文
摘要:添加节点 1. node.appendChild(child) node.appendChild( ) 方法将一个节点添加到指定父节点列表末尾。类似于css里面的after <body> <ul> <li>123</li> </ul> </body> <script> // 1.创建节点元素节点 v
阅读全文
摘要:<style> ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; width: 300px; } ul li a { color: red; float: right;
阅读全文
摘要:<body> <ul> <li id="top">微博</li> <li class="hide">私信</li> <li class="hide">评论</li> <li class="hide">@我</li> </ul> </body> <script> // 大概方法: // 1.获取元素
阅读全文