【js下 Day07、DOM案例】的更多相关文章

js下 Day07、DOM案例

一．折叠菜单 效果图: 功能思路分析: 功能一:数据渲染 \1. 模拟数据,一级数据为数组套对象的形式,二级数据为数组: \2. 先渲染一级数据,然后再嵌套渲染二级数据(map().join('')); 功能二:子菜单的显示隐藏 \1. 定义一个初始下标index = 0; \2. 给每一个一级菜单绑定点击事件,点击一级菜单时要干三件事: (1) 上一个二级菜单隐藏 (2) 修改为当前点击项的下标 (3) 当前点击项的二级菜单显示 #二．留言板 效果图: 功能思路分析: 功能一:头像高亮 \1.…

JS 下拉菜单案例

css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { float: left; width: 100px; text-align: center; } .nav>li a { display: block; line-height: 50px; color: rgb(141, 138, 138); text-decoration: none; posit…

js下 Day12、案例

一．垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 ​  2. 鼠标移动 (1) 当开关变量为真时,修改垃圾的位置即的left和top (2) 垃圾位置 = 鼠标位置到页面位置 - 鼠标到盒子的位置 3. 鼠标抬起 (1) 关闭开关变量 (2) 循环每一个垃圾桶,通过 getBoundingClientRect()方法获取垃圾桶的四个边界,判断鼠标是否进入垃圾桶 (3) 如…

js下 Day11、案例

一．成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. 获取鼠标到元素的距离(e.offsetX) \4. 获取事件源 \5. 克隆一个副本,设置定位,放到成绩盒子中 3. 鼠标移动-副本跟随 \1. 当开关变量为真时移动盒子 \2. 克隆盒子位置 = 鼠标到页面的距离 - 鼠标到元素的距离 4. 鼠标松开-边界判断 \1. 判断克隆元素是否存在,不存…

JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save").disabled = true; //没有效果 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解决方法: 1)用JQ写法 $("#save").attr("disabled","true&…

js中的DOM操作汇总

一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attribute,属性 Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = document.createTe…

js 字符串转dom 和dom 转字符串

js 字符串转dom 和dom 转字符串 博客分类: JavaScript   前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello Wor…

NPM酷库：jsdom，纯JS实现的DOM

NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢?因为Node.js环境中没有实现DOM对象. jsdom 今天,我们要学习的jsdom就是一个纯JS实现的DOM,jsdom可以在Node.js环境中"模拟出"DOM环境,像jQuery这样对DOM依赖的库就可以在Node.js中运行了. const jsdom = require(&q…

z-tree官方提供的下拉菜单案例

1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - select menu</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href…

前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM

JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue('width')) parseInt(getComputedStyle(ele, null).getPropertyValue('height')) 2.padding + width | padding + height clientWidth clientHeight 3.border + pad…