- 博客(34)
- 收藏
- 关注
原创 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 73
原创 EVENT3---移动端
触屏事件 兼容DOM的触摸事件 touchstart 当手指触摸屏幕时触发 touchmove 当手指在屏幕上滑动时连续触发 touchend 当手指从屏幕上移开时触发 touchcanle当系统停止跟踪触摸时触发 每个触摸事件包含的三个触摸列表 touches 当前跟踪的触摸的Touch对象的数组(当前屏幕上的所有手指动作的列表) targetTouches 特定于事件目标的Touch对象的数组(当前DOM元素上的手指动作的列表) changeTouches自上次触摸
2022-05-25 21:33:18 125
原创 EVENT2---cookie
DOM事件绑定 DOM0级事件 所有的浏览器都支持 事件只注册一次,后边的会被覆盖旧的 注册 在html上添加 <div onclick = "alert('hello')"></div> 匿名函数 d.onclick = function(){} this指自身 普通函数 onclick="ok()" 相当于动态调用 this指向window 没有事件参数
2022-05-25 21:31:13 143
原创 放大镜效果
<!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 80
原创 EVENT
UI事件(不一定与用户操作有关的事件) load当页面完全加载后在window上触发图片也可以触发load事件 resize当窗口大小变化时在window上触发 (除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件,而火狐是在用户停止调整窗口大小时才触发。不建议在此事件中加入大计算量代码,因为可能频繁执行,导致浏览器速度变慢。另外窗口最大最小化也会触发事件) scroll当用户滚动带滚动条的元素中的内容时,在该元素上面触发 鼠标事件 事件类型 onclick(单击) ondblc
2022-05-19 20:18:45 86
原创 轮播图的两种效果
<!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 499
原创 雪花飘落效果
<!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 144
原创 手风琴效果
案例一<!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 73
原创 网页换肤代码
<!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 228
原创 dom操作的知识点
树形结构 嵌套 非线性结构 非对称 HTML的标签逻辑就是树形结构 Dom操作 增 新建 fn createElement(标签名) 创建元素节点 fn setAttribute(name,value) 直接设置属性 fn cloneNode(true、false) true包含子节点 false不包含 插入 拼接节点 fn appendChild() 插入节
2022-05-10 21:03:58 89
原创 JS第四节
数组作用:对大量数据进行存储,按顺序排列一组值,每个值的位置都有编号,从零开始常用:length 长度,遍历数组数组操作:增删改查join(规则)----以指定的规则返回字符串splice(x,y,“newEi”)slice(start,end)Math对象Math.abs()绝对值----接受一个参数,返回绝对值Math.ceil()向上取整----接受一个参数,返回大于该参数的最小整数Math.floor()向下取整----接受一个参数,返回小于该参数的最小整
2022-05-08 09:55:04 47
原创 JS第三节(增删改查)
push(x)将元素拼接在末尾pop() 删除最后一个元素unshift(x) 将元素拼接在开头shift()删除第一个元素concat(x)将一个数组添加到另一个数组末尾,必须有变量来接受这个值
2022-05-04 21:28:18 49
原创 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 90
原创 JS的相关基础知识点
代码规范 JS中的一切都区分大小写(变量名,函数名,操作符) 标识符(变量名,函数名,属性名,函数的参数)按下列规则组合 就是如果要给某物起名字,按下述规则来 首字符必须是字母,下划线或符号$ 其它字符可以是字母,下划线,符号$或数字 建议使用驼峰命名法 见名之意 注释 注释分为单行注释与块注释 块注释:/*代码*/ 单行注释:// 严格模式 ECMAscript5引入了"严格模式" 写代码时加入"use strict" 语句标准
2022-05-02 21:24:59 190
原创 【animation的用法】
作用 增加用户体验 但是不要过度使用 关键帧 keyframes 动画 animation–name 动画属性名 animation–duration 动画持续时间 animation–delay 动画延迟时间 animation–timing–function 动画速度曲线 animation–iteration–count 定义循环次数 infinite为无限循环 animation–di..
2022-04-28 20:14:20 2451
原创 【渐变、过渡、倒影、变形】
渐变 线性渐变 语法 background–image:linear–gradient(方向(deg),颜色,渐变点的百分比 方向 上、下、左、右、角度 默认的是top、to bottom、180deg 如果添加方向,则必须使用浏览器的内核识别标志 –webkit– Safari&Chrome –moz– Firefox –ms– IE –o– Oper...
2022-04-28 19:57:07 192
原创 弹性布局知识点
目的提供一种更加有效的方式来布置,对齐和分布方式在容器之间的各项内容,即使它们的大小是未知变化的 让容器有能力改变项目的宽高,以填满可用空间 布局与方向无关 块属性 垂直 行间 水平 以上拓展性太差 最适合小规模布局(大规模用网格)2.属性isplay:flex/display:inline–flex 适用于父类元素 声明要使用弹性盒模型 3.flex–direction写在父级css中,但是作用于子级 检索,子级在盒子中的位置,说白了就是子级
2022-04-27 16:21:20 154
原创 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 193
原创 静态,相对,绝对,固定定位
样例:<!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 72
原创 表格和表单
对于表格标签:表格: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 165
原创 图文结合和三种居中显示的方式
样例一:上下结构<!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 303
原创 浮动和清除浮动
浮动:取值: float:none;(不浮动) float:left;(左浮动) float:right;(右浮动) float:inherit;(继承父级)作用:解决水平布局问题 对于行标签,使用浮动后,上下左右的外边距相加特点: 所有标签同排显示 行标签支持所有css样式 默认内容撑开宽高 元素脱离文档流清除浮动:产生的原因:元素使用浮动后脱离文档流,父级元素检测不到子级的存在,高度无法撑开...
2022-04-14 19:17:59 156
原创 常见的标签和简单的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 518
原创 盒模型的要点
【标签和选择器】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 247
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人