- 博客(44)
- 收藏
- 关注
RSS订阅原创 【ES6常量和变量的声明以及解构赋值】
一、let二、const变量的结构赋值1.数组的结构赋值2.对象的结构赋值3.特殊对象的结构赋值4.实际应用-1.交换两个变量的值-2.提取json中的数据-3.用于函数参数默认值
2022-06-14 21:21:39
880
1
原创 【AJAX】
一、AJAX是什么？二、AJAX请求步骤1.创建2.配置３.响应readyState发送后的状态值4.发送ajax.send(null)发送后返回的四种参数三、post请求四、AJAX的封装
2022-06-14 20:41:53
229
原创 【JQuery】
一、Jquery基础核心1.代码风格2.加载模式-1.window.onload-2.redy3.对象互换-1.Jquery对象转DOM对象-2.DOM对象转Jquery对象二、选择器三、属性四、CSS五、筛选六、DOM七、事件阻止默认与阻止冒泡八、动画1.简单动画2.任意动画3.列队动画-1.回调动画-2.连缀动画4.动画控制5.JQuery动画库...
2022-06-09 21:53:32
111
原创 快速实现边界处理
两行代码实现边界处理首先观察下面呢这个图片，如果不想让小黑的边界越过小红，那就需要约束小黑水平和垂直两个方向上的坐标。我们可以直接用一个条件表达式来规定一下小黑的边界，假设小红时浏览器窗口，当然不要忘记给小黑使用绝对定位。首先时小黑的left值：–如果left<0,就让left=0，否则判断小黑是否超过右边界(l2 > window.innerWidth - d.offsetWidth ),这里记得要减去自身的宽度，同理如果超过了，就让他的left值等于 window.innerW
2022-05-29 15:53:51
239
1
原创 【碰撞检测】一个图学会碰撞检测
一个图学会碰撞检测在写一下小游戏时，会遇到一些碰撞检测，那么怎么才能判断出两个元素发生碰撞了呢，下面我们用一个图片来看一下这个问题观察这个图片，我们定义了两个元素a和b,并且标注了a和b的四个边，此时为碰撞的时刻，因为a是包含在b中的，那肯定是碰撞的。那如果不想要碰撞，肯定是两个元素完全不接触，才不会发生碰撞。我们通过一个方向的例子简单看一下：—r2<l1:当b的右边界<a的左边界时，□ ■（左a右b），就是类似于这种情况，那么两者一定不会发生碰撞，同理另外的四个方向也能的
2022-05-29 15:30:35
397
原创 【触屏事件】
兼容DOM的触摸事件touchstart 当手指触摸屏幕时触发touchmove 当收拾在屏幕上滑动时触发touchend 当手指在屏幕上移开时触发touchcancel 当系统停止跟踪时触发上述事件都会冒泡，也可以取消，每个触摸事件的event对象都提供了鼠标事件中常见的clientX,clientY等每个触摸事件包含三个触摸列表touches:当前跟踪的触摸操作的Touch对象的数组targetTouches:特定于事件目标的Touch对象的数组cahngeTo
2022-05-26 16:13:24
71
原创 【EVENT-存储】
文章目录一、cookie1.构成2.限制3.JS中的cookie二、本地存储1.window.localStorage2.sessionStorage三、三种存储的区别一、cookie1.构成名称：一个唯一可以确定cookie的名称值：存储在cookie中的字符串值域：cookie中哪个域是有效的路径:指定域中的绝对路径失效时间：cookie何时应该被删除时间戳安全标志：指定后cookie只有在使用SSL连接时才发送到浏览器2.限制绑定在特定域名下，无法跨越浏览器对cookie
2022-05-26 15:29:08
98
原创 【EVENT】UI事件和鼠标事件
UI事件1.load当页面完全加载后再window上触发，图片也可以触发load事件2.resize当窗口大小变化是在window上触发3.scroll鼠标事件事件onclick 单击事件ondbclick 双击事件oncontextmenu 右键菜单onnouseover 鼠标移入onmouseout 鼠标移出onmouseenter 鼠标移入onmouseleave 鼠标溢出onmousedown 鼠标按下onmouseup 鼠标抬起onmousemove
2022-05-25 21:52:27
151
原创 【BOM】
BOMBOM是Browser Object Model浏览器对象模型的缩写 提供了一系列与浏览器相关的信息window对象window是浏览器留给JS的总入口全局变量都是window的属性，全局函数都是window的方法1.窗口位置screenLeft:–返回浏览器窗口左上角到屏幕左上角的水平距离，不兼容FFscreenTop:–返回浏览器窗口左上角到屏幕左上角的水平距离，不兼容FFscreenX:–功能相同，而且兼容FFscreenY:–功能相同，而且兼容FF2.窗口大小
2022-05-25 21:36:37
72
原创 提示错误Uncaught SyntaxError: Invalid or unexpected token
提示错误Uncaught SyntaxError: Invalid or unexpected token错误点：第一行出现中文符号var pds = ["同城","抗疫","财经","读书","摄影","电影","体育","综艺","时尚","星座","故事","房产","家居","萌宠","科普","动漫","艺术","美妆","音乐","法律","设计","历史","瘦身","游戏","校园","抽奖","育儿","婚恋","吃鸡","王者","教育","养生"]； var dTj = doc
2022-05-10 21:30:43
178
原创 文本长处部分显示省略号
文本长处部分显示省略号单行文本的溢出显示{ //溢出隐藏 overflow:hidden; 溢出部分用省略号显示 text-overflow:ellipsis; //不换行 white-space:normal;}多行文本的溢出显示{ //将盒子变成伸缩盒模型 //注意-webkit-只有chrom内核的浏览器支持 display:-webkit-box; //检索方式 -webkit-box-orinet:vertical; //第几行省略 -webkit-line-
2022-05-08 09:33:38
152
原创 字符串操作
字符串的操作str.length 获取长度str.toUpperCase() 转为大写str.toLowerCase() 转为小写str.split(参数) 字符串裁剪，返回一个数组，x：某种规则str.indexOf() 获取元素下标，不存在返回-1str.subString(start,stop) 返回start与stop之间的内容，start必填，stop选填，且两者均为非负数str.subStr(start,length) 返回start开始，指定length的内容st
2022-05-06 20:18:49
59
原创 深浅拷贝解释
深浅拷贝基本数据类型与引用数据类型的区别基本数据类型的值存在栈区，引用数据类型的值存在堆区深浅拷贝浅拷贝：拷贝的是地址深拷贝： 拷贝的是内容var a = 1;var b = a;b = 10;//a=1;b=10var arr1 = [1,2,3,4,5];var arr2 = arr1;arr2[0] = 10;//arr1[0] = 10; ...
2022-05-04 21:32:59
167
原创 less和服务器字体
1.less作用嵌套变量定义：@mainColor:red;使用：color：@mainColor;支持计算传参.public(@w,@h){ width=@w; height=@h;}.wrap{.public(100px,100px)}2.服务器字体@font-face{font-family:name;src:url(font/...)}
2022-05-03 21:43:42
227
原创 伪类，文本特效，背景裁剪、蒙版
Html5+Css3阶段部分知识补充选择器兄弟选择器： +同级选择器：~属性选择器：[属性名]{}标签名 [属性名=‘’]{}结构性伪类:nth-child:nth-of-type:first-child:last-child:nth-last-child(n):nth-last-of-type(n):focus 设置获取焦点的样式:checked 设置选中样式a标签伪类link 定义访问前样式visited 定义访问后样式hover 定时鼠标覆盖时的样式
2022-05-03 21:37:58
104
原创 改变使用伪元素选择器所添加照片的大小
改变使用伪元素选择器所添加照片的大小添加一个空的字符，为字符设置大小，然后添加背景图片即可p::before{ content: ""; width: 30px; height: 14px; display: inline-block; background-image: url(../assets/hot@2x.png); background-size: cover;}...
2022-04-30 19:11:26
813
转载 给X轴方向上的滚动条
给X轴方向上添加滚动条ul { height: auto; overflow: hidden; overflow-x: auto; /* 设置x轴可滑动 */ white-space: nowrap; /* 元素不换行 */ width: auto; /* (宽度) */}/* 隐藏滚动条 */ul::-webkit-scrollbar { display: none;} ul li { height: 0.6rem; font-size: 0.32rem; color:
2022-04-27 21:23:02
927
原创 H5新增标签
HTML5新增标签1. 结构标签标签作用article定义文章aside定义文章的侧边栏section定义文档的某个部分nav定义导航部分header定义section或者document页眉footer定义section或者document页脚details定义展开详细内容（只有safari和chrome支持）figure定义一组媒体元素及文字（figcaption:dingyi figure的title）2.表达元素
2022-04-25 19:49:32
94
原创 HTML的几种定位方式
定位静态定位static,默认相对定位relative参考物：定位前的位置特点–不影响元素本身特性– 元素不脱离文档流– 相对于原位置进行偏移绝对定位absolute参考物：最近的使用定位父级元素，如果没有，就找body特点–元素脱离文档流– 行元素支持所有css样式–块元素内容撑开宽高–清除子级浮动固定定位fixed参考物：浏览器窗口特点– 元素脱离文档流– 清除子级浮动定位的作用可以使用便宜描述可以使用z-index提升层级用
2022-04-23 18:54:29
1625
原创 文本长处部分显示省略号
文本长处部分显示省略号单行文本 /*强制文字在一行文本框内*/ white-space: nowrap; /*溢出部分文字隐藏*/ overflow: hidden; /*溢出部分省略号处理*/ text-overflow: ellipsis;多行文本 /* 溢出隐藏 */ overflow: hidden; /* 用...显示 */ text-overflow: ellipsis; display: -webkit-box; -webk
2022-04-15 07:33:04
60
原创 CSS的浮动与清除浮动
CSS浮动——Float设置浮动使元素脱离文档流超一个方向浮动排列，遇到父级边界换行作用浮动可以用来解决水平布局问题。除此之外还可以使用行标签和行块标签来解决水平布局问题。属性值意义left向左浮动right向右浮动none不设置浮动inherit继承父级特性所有标签同排显示行标签使用浮动后，支持所有CSS样式默认内容撑开宽高元素脱离文档流换行不被解析浮动后两者之间的上下边距为相加，而不是取最大值代码解释： &l
2022-04-14 21:24:19
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人