- 博客(34)
- 收藏
- 关注
RSS订阅
1原创 JSON和事件委托
事件委托：子级的事件交给父级去响应，通过e.target来找到正确的子级document.body.onclick = function() {alert(e.target.innerHTML); }JSON数据本质是个字符串与 对象 数组 进行数据的格式转化两个核心方法JSON.stringify(obj); 将obj转成JSON字符串JSON.parse(jsonStr); 将jsonStr解析为对象...
2022-06-14 22:33:31
56
原创 EVENT3---移动端
触屏事件 兼容DOM的触摸事件 touchstart 当手指触摸屏幕时触发 touchmove 当手指在屏幕上滑动时连续触发 touchend 当手指从屏幕上移开时触发 touchcanle当系统停止跟踪触摸时触发 每个触摸事件包含的三个触摸列表 touches 当前跟踪的触摸的Touch对象的数组（当前屏幕上的所有手指动作的列表） targetTouches 特定于事件目标的Touch对象的数组（当前DOM元素上的手指动作的列表） changeTouches自上次触摸
2022-05-25 21:33:18
110
原创 EVENT2---cookie
DOM事件绑定 DOM0级事件 所有的浏览器都支持 事件只注册一次，后边的会被覆盖旧的 注册 在html上添加 <div onclick = "alert('hello')"></div> 匿名函数 d.onclick = function(){} this指自身 普通函数 onclick="ok()" 相当于动态调用 this指向window 没有事件参数
2022-05-25 21:31:13
132
原创 放大镜效果
<!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>放.
2022-05-22 10:49:45
71
原创 EVENT
UI事件（不一定与用户操作有关的事件） load当页面完全加载后在window上触发图片也可以触发load事件 resize当窗口大小变化时在window上触发 (除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件,而火狐是在用户停止调整窗口大小时才触发。不建议在此事件中加入大计算量代码,因为可能频繁执行,导致浏览器速度变慢。另外窗口最大最小化也会触发事件) scroll当用户滚动带滚动条的元素中的内容时，在该元素上面触发 鼠标事件 事件类型 onclick（单击） ondblc
2022-05-19 20:18:45
75
原创 轮播图的两种效果
<!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>d.
2022-05-18 19:23:12
479
原创 雪花飘落效果
<!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>t.
2022-05-18 18:53:57
129
原创 手风琴效果
案例一<!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
2022-05-18 17:58:02
61
原创 网页换肤代码
<!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>百.
2022-05-18 17:38:47
213
原创 dom操作的知识点
树形结构 嵌套 非线性结构 非对称 HTML的标签逻辑就是树形结构 Dom操作 增 新建 fn createElement(标签名) 创建元素节点 fn setAttribute(name，value) 直接设置属性 fn cloneNode(true、false) true包含子节点 false不包含 插入 拼接节点 fn appendChild() 插入节
2022-05-10 21:03:58
76
原创 JS第四节
数组作用：对大量数据进行存储，按顺序排列一组值，每个值的位置都有编号，从零开始常用：length 长度，遍历数组数组操作：增删改查join（规则）----以指定的规则返回字符串splice（x，y，“newEi”）slice（start，end）Math对象Math.abs（）绝对值----接受一个参数，返回绝对值Math.ceil（）向上取整----接受一个参数，返回大于该参数的最小整数Math.floor（）向下取整----接受一个参数，返回小于该参数的最小整
2022-05-08 09:55:04
38
原创 JS第三节（增删改查）
push（x）将元素拼接在末尾pop（） 删除最后一个元素unshift（x） 将元素拼接在开头shift（）删除第一个元素concat（x）将一个数组添加到另一个数组末尾，必须有变量来接受这个值
2022-05-04 21:28:18
37
原创 JS第二节
数字型：Number字符串型：String布尔型：Boolean未定义类型：Undefined空类型：Null特殊类型：Object强制类型转换parseInt（n） n转为整数parseFloat（n） n转为浮点数parseNu（n） n转为数字typeof（n） 查看n的数据类型isNaN（n） 判断n是否为NaN非零即为真，非空即为真return的作用：1.返回一个值2.结束函数强弱数据类型的区别强：数据的数据类型在编译前确认弱
2022-05-04 21:22:31
71
原创 JS的相关基础知识点
代码规范 JS中的一切都区分大小写(变量名，函数名，操作符) 标识符(变量名，函数名，属性名，函数的参数)按下列规则组合 就是如果要给某物起名字，按下述规则来 首字符必须是字母，下划线或符号$ 其它字符可以是字母，下划线，符号$或数字 建议使用驼峰命名法 见名之意 注释 注释分为单行注释与块注释 块注释：/＊代码＊/ 单行注释：// 严格模式 ECMAscript5引入了"严格模式" 写代码时加入"use strict" 语句标准
2022-05-02 21:24:59
178
原创 【animation的用法】
作用 增加用户体验 但是不要过度使用 关键帧 keyframes 动画 animation–name 动画属性名 animation–duration 动画持续时间 animation–delay 动画延迟时间 animation–timing–function 动画速度曲线 animation–iteration–count 定义循环次数 infinite为无限循环 animation–di..
2022-04-28 20:14:20
2435
原创 【渐变、过渡、倒影、变形】
渐变 线性渐变 语法 background–image：linear–gradient(方向(deg)，颜色，渐变点的百分比 方向 上、下、左、右、角度 默认的是top、to bottom、180deg 如果添加方向，则必须使用浏览器的内核识别标志 –webkit– Safari＆Chrome –moz– Firefox –ms– IE –o– Oper...
2022-04-28 19:57:07
181
原创 弹性布局知识点
目的提供一种更加有效的方式来布置，对齐和分布方式在容器之间的各项内容，即使它们的大小是未知变化的 让容器有能力改变项目的宽高，以填满可用空间 布局与方向无关 块属性 垂直 行间 水平 以上拓展性太差 最适合小规模布局(大规模用网格)2.属性isplay：flex/display：inline–flex 适用于父类元素 声明要使用弹性盒模型 3.flex–direction写在父级css中，但是作用于子级 检索，子级在盒子中的位置，说白了就是子级
2022-04-27 16:21:20
138
原创 H5+C3的新标签
样例：关于在一个HTML中手机，pad，pc端的三种样式<!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, ini...
2022-04-25 19:55:36
182
原创 静态，相对，绝对，固定定位
样例：<!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"> <tit...
2022-04-24 19:33:20
60
原创 表格和表单
对于表格标签：表格：table 表格行：tr 表头：th 单元格：tdcss set：单元格间隙合并：table{border-collapse；} 重置单元格默认填充：th， td{padding：0；}单元格合并：横向合并：colspan; 纵向合并：rowspan; 一找二合三删除样例1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g
2022-04-22 17:39:09
152
原创 图文结合和三种居中显示的方式
样例一：上下结构<!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"> <t
2022-04-15 12:09:52
291
原创 浮动和清除浮动
浮动：取值： float:none;(不浮动) float:left;(左浮动) float:right;(右浮动) float:inherit;(继承父级)作用：解决水平布局问题 对于行标签，使用浮动后，上下左右的外边距相加特点： 所有标签同排显示 行标签支持所有css样式 默认内容撑开宽高 元素脱离文档流清除浮动：产生的原因：元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开...
2022-04-14 19:17:59
146
原创 常见的标签和简单的css样式
引入方式（1）内部（2）外部（3）内联的权重为100，内部、外部，权重相同的时候，后来者居上<link rel="stylesheet" href="内联.css">背景色background-color:red;background-color:#000;background-color:rgba(0,0,0,0)背景图默认显示方式：平铺性质：设置背景图片background-image:url(图片链接)；背景图片大小backgrou
2022-04-13 20:32:56
498
原创 盒模型的要点
【标签和选择器】title:网页的标题div:无语意solid:实线dashed:虚线dotted:点线double:双线transparent:背景颜色为透明色（让边框的上下左右边框变成透明色border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;）（圆角 border
2022-04-12 19:34:42
240
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人