莫莫子-CSDN博客

原创 11.8前端笔记

2.原型属性 __ proto __ :每一个实例化对象在创建的时候，都会创建一个原型属性 __ proto__,指向构造函数的prototype。(3)函数.apply(this的新指向,[参数1,参数2,参数3.....])(2)Object.prototype.toString.call(检测的数据)(2)函数.call(this的新指向,参数1,参数2,参数3......)(1)在事件处理函数中 this指向触发事件的对象点谁指向谁。构造函数(可变)+原型创建(不变的)

2022-11-08 17:38:30 251

原创 11.7前端笔记

防抖的原理:利用闭包函数,在事件处理函数中添加一个定时器,在定时器延迟一定的时候再执行代码,如果定时器没有走完又触发该事件从头开始计时(清除原先的定时器,重新定义一个)(1)找数组中中间的值 splice(Math.floor(arr.length / 2),1)[0]当前这个数(n当前这个数的位置信息) = 前一个数(n - 1) + 前前一个数(n - 2)第二个数(n==2)和第一个数(n==1) 值都不是1。n = (n-1)+(n-2) n表示的是位置信息。

2022-11-07 20:22:55 250

原创 11.3前端笔记

高级函数一、多属性运动完整版 2.添加定时器 a:假设所有的属性都达到了目标点 3.运动到1000px的时候停止运动 4.因为运动的目标值不一致，步长需要重新计算 5.判断运动的属性 6.透明度和其他属性设置方式不同 c:得出结论要么你的假设是正确的，就可以清除定时器二、高级函数 1.函数的分类 (1) 事件处理函数标签.事件类

2022-11-07 09:22:49 244

原创 11.2前端笔记

问题2：在拖动盒子之前不小心选择了文字在不取消全选的情况下再去拖动盒子发现盒子出现bug 鼠标抬起盒子还在移动。- onkeypress 按下键盘上的字符可以触发，但是特殊字符不会触发，返回值区分大小写，返回的是小写和大写字符编码。- onkeydown 按下键盘上任意一个字符都可以触发返回值是不区分大小写返回的是大写的字符编码。- 标准浏览器：事件对象.wheelDelta。解决：用鼠标位置-元素在页面中的位置即可。- 火狐浏览器：事件对象.detail。- onkeyup 抬起。

2022-11-02 09:26:03 208

原创 10.31前端笔记

1.懒加载 - 懒加载的应用场景：在一些电商类平台网站上由于页面要加载的数据量较庞大，因此如果直接将页面所有内容都加载出来，会导致页面的加载时间过长，导致页面白屏。因此，开发者们想出了懒加载的办法——只加载用户看得见的部分，看不见的部分不加载。这样单次加载的内容就相对较少，加载时间减短，从而提升用户体验。 - 懒加载实现思路： - 第一步：先渲染图片结构，把图片资源先暂时给img的src1属性 - 第二步：显示第一屏效果，只要图片的位置小于窗口可

2022-10-31 19:46:58 92

原创 10.27前端笔记

删除节点：节点.remove() 删除节点本身存在兼容问题，不支持IE浏览器。- 子节点.offsetparent 获取最近定位父元素如果没有最近定位父元素则是获取body。父元素.childNodes 获取父元素下所有的节点(元素节点文本节点注释节点)- 删除子节点：父节点.removeChild(子节点) 删除子节点。- 语法：父元素.replaceChild(新的节点,要替换的节点)- 语法：父元素.insertBefore(插入的新节点,参考节点)

2022-10-27 19:00:53 157

原创 10.25前端笔记

语法：数组：filter(function(item,index,array){ item是当前元素 index当前元素下标 array是当前操作的数组 })语法：数组：some(function(item,index,array){ item是当前元素 index当前元素下标 array是当前操作的数组 })语法：数组：map(function(item,index,array){ item是当前元素 index当前元素下标 array是当前操作的数组 })var reg = /\d/g;

2022-10-25 20:46:52 567

原创 10.24前端笔记

/ [1, 2, 3, 4, '哈哈', '嘻嘻', '6', [true,false]];//['嘻嘻', '哈哈',"滴滴滴滴"] ['嘻嘻', '哈哈',"滴滴滴滴"]// ['嘻嘻', '哈哈', '呵呵'] ['嘻嘻', '哈哈', '滴滴滴滴']//['嘻嘻', '哈哈',"滴滴滴滴"] ['嘻嘻', '哈哈',"滴滴滴滴"]for(var i = 0;删除数组中一串连续的数组元素，被删除的元素会组成的一个新的数组返回，使用items替换被删除。

2022-10-24 19:40:38 754

原创 10.21前端笔记

作用：查询一个字符串，从后往前查找最后一次出现的位置，并且返回最后一次位置的下标，如果找不到则是返回-1；作用：查询一个字符串在另一个字符串中首次出现的位置，并且返回首次出现位置的下标，如果找不到则是返回-1。new Date(年，月-1，日，时,分,秒) 2021年10月1日 12:10:00。作用：替换字符串中的某个字符，返回一个新的字符串，==默认一次只能替换一个==作用：截取字符串中一串连续的字符串，包括开始下标，不包含结束下标。作用：截取字符串中一串连续的字符串，包括开始下标，不包含结束下标。

2022-10-21 22:38:13 130

原创 10.20前端笔记

本地对象「内部对象」：JS中的内部对象包括Array、Boolean、Date、Function、Global、 Math、Number、Object、RegExp、String，Error对象，其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。说白了就是函数，但是这些函数都是封装好的，固定功能的，可以直接调用实现功能的。宿主对象：宿主对象就是执行JS脚本的环境提供的对象，就是浏览器提供的对象，如window和document。

2022-10-20 20:16:21 190

原创 10.19前端笔记

1.setTimeout(function(){},时间) 时间单位是ms(毫秒) 1000ms = 1s。语法：clearTimeout(定时器id) clearInterval(定时器id)定时器id：每一个定时器在开启的时候都会返回一个唯一能标识当前定时器的id，id是从1开始的。间歇定时器：setInterval(function(){},时间)语法：setInterval(function函数,时间)标准浏览器(欧朋火狐谷歌 safai,IE(9+))

2022-10-19 22:25:50 273

原创 10.18前端笔记

全局变量/全局函数:在函数外面声明的变量/函数，可以在任意地方访问和修改，会一直存储在计算机的内存中，直到页面关闭。全局变量/全局函数:在函数外面声明的变量/函数，可以在任意地方访问和修改，会一直存储在计算机的内存中，直到页面关闭。局部变量/局部函数：在函数里面声明的变量/函数，只有在函数内部可以使用，出了函数就会被销毁，不能使用。局部变量/局部函数：在函数里面声明的变量/函数，只有在函数内部可以使用，出了函数就会被销毁，不能使用。当函数中出现不确定的值的时候,传递不同的参数实现不同的功能。

2022-10-18 19:26:26 120

原创 10.17前端笔记

var arr = [["哈哈","小乔","孙策"], ["1" ,"2","3"],["周一",[undefined , 1 , true ,false]]]var arr = [["哈哈","小乔","孙策"], ["1" ,"2","3"] , ["周一" , "周二" , "周三"]]//["周一" , "周二" , "周三"]//["哈哈","小乔","孙策"]console.log("这是第" + i + "个水饺")console.log ("这是第" + i + "个水饺")

2022-10-17 21:28:09 178

原创 10.14前端笔记

for循环的目的是给10个button按钮添加添加事件并不会触发点击事件中的代码只有点击的button的时候才会执行等到那个时候执行 i的值已经是10。结果为true要执行的代码(只能写一行代码) ：结果为false要执行的代码。3-2 如果第一个条件为true 第二个条件就不执行执行到哪就把哪的结果为左侧。2-1如果第一个条件为false，第二个条件不再执行执行到哪就把哪的结果为左侧。2-2 如果第一个条件为true 执行第二个条件执行到哪就把哪的结果为左侧。

2022-10-15 19:20:29 114

原创 10.13前端笔记

总结：Number方法可以转换的：string类型(纯数字、""-0 " "-0)、boolean类型(true-1,false-0)、null(0) 其他都是NaN==parseInt(要转换的数据):将数据转换为number类型，从左往右开始转换，遇到不能转换的或者末尾结束，如果一开始就不能转换则是NaN，结果取整(舍弃小数)Number(要转换的数据):将数据转换为Number类型如果转换不了则是返回NaN。------------------------了解-------------------

2022-10-13 19:14:13 124

原创 10.12前端笔记

/2.1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签。// 3.1 document.getElementsByTagName("标签名") 获取整个文档下的对应标签。// 2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签。//3.2 父元素.getElementsByTagName("标签名") 获取父元素下对应的标签。//HTMLCollection(3) 元素集合。

2022-10-12 18:33:11 2372

原创 10.11前端笔记

HTMl 超文本标记语言主要用户页面结构css 层叠样式表用于结构的布局样式JavaScript 脚本语言--交互基于对象和事件驱动的解释性脚本语言基于对象:JavaScript是一种基于对象的语言,这意味着他能运用自己已经创建的对象，因此，许多功能可以来自脚本环境中对象的方法与脚本的相互作用。

2022-10-11 20:26:18 116

原创 9.28前端笔记

animation:动画名称动画执行时间动画速度曲线延迟时间动画播放次数动画运动方向动画结束之后显示的状态。响应式布局是根据设备屏幕不同适当调整标签现实的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的。基地---（地铁） ----北京西--邯郸东--坐公交--让我妈骑电动车接---最后到家。一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；3.代码累赘，会出现隐藏无用的元素，加载时间加长。

2022-09-28 21:21:19 153

原创 9.27前端笔记

当子元素和父元素都有3d（x y z）效果，给父元素设置transform-style:preserve-3d;注意：scalez单独使用看不到效果，需要配合其他变换属性一起使用。transform：scale3d（）沿着x、y、z轴方向缩放。transform:scalez()沿着z轴方向缩放（厚度）注意：不能与overflow属性一起使用。xyz取值：0-1 矢量的值。使用0~1之间的值缩小元素。使用超过1的值放大元素。一、transform-style属性。

2022-09-27 21:32:15 90

原创 9.26笔记

300px：我往后走到了-300px位置看乔乔，-1300。-600px：我往后走到了-600px位置看乔乔，-1600。transform:skew(x,y) 沿着x轴和y轴倾斜。1000px：找打到乔乔的距离 1000px。300px：我往前走到了300px位置看乔乔。600px：我往前走到了600px位置看乔乔。transform：skew（x）沿着x轴倾斜。transform：skew（y）沿着y轴倾斜。>1000px：走过了乔乔，看不见了。x: 水平轴水平方向向右为正，向左为负。

2022-09-27 09:07:07 135

原创 9.21笔记

css布局将会根据他来计算，并被他约束。在布局过程中只要使用rem设置元素的尺寸，在改变rem的基准值html的字体大小的时候，页面上的元素将等比例缩放实现适配。3.按照pc端布局方式正常布局，将px单位改为rem单位（较小的长度比如1px的边框就不需要转换为rem，直接设置px）2.文件--首选项--设置--在搜索栏搜索rem to px设置：Number of pixels per 1rem.100。rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。

2022-09-21 22:23:01 146

原创 9.20前端笔记

平均对齐，元素位于各行之前、之间、之后都留有空白空间，行间距自动分配，间距相等。将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效。四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配，项目之间的间隔比项目与边框的间隔大一倍。弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；默认值，当弹性子元素没有设置高度或者高度为auto的时候，高度跟父元素高度一样。两端对齐，子元素和子元素之间有空白空间，项目之间的间隔都相等。

2022-09-20 22:33:30 575

原创 9.19前端笔记

background: repeating-radial-gradient(渐变形状/圆心，颜色1 范围1，颜色2 范围2，……背景被剪裁到边框区域，在内容区、内填充区、边框区域显示，默认值。ele：nth-last-child（n）{}选择一组相同元素中的倒数第n个元素，n可以数值、关键词、表达式。background:linear-gradient(方向，颜色1，范围1，颜色2，范围2，……background：radial-gradient（渐变形状，颜色1 范围1，颜色2 范围2，……

2022-09-19 19:52:36 316

原创 9.15前端笔记

texttext

2022-09-15 21:18:29 269

原创 9.14前端笔记

4.将左侧盒子拉到最左边（margin-left：-100%），将右侧盒子拉到最右边（margin-left：-右侧盒的宽度）4.将左侧盒子拉到最左边（margin-left：-100%），将右侧盒子拉到最右边（margin-left：右侧盒宽度）将左侧列移动至对应位置（position：relative：左侧盒设置left属性，值为-左侧盒的宽度）1.HTML结构中--先中间结构（主体结构中要有主体内容盒，主题内容盒里嵌套一个子盒）后侧边栏。高亮效果吸引用户眼球默认自带黄色背景色。

2022-09-14 21:57:07 287

原创 9.7前端笔记

将左侧盒子向左移动左盒宽度+中间盒子的宽度（margin-left ：（左盒+中盒宽度；将中间盒子向左移动中间盒的宽度（margin-left 中间盒子的宽度）将中间背景盒向右移动左侧盒子宽度（left：左侧盒宽度）、右侧背景盒向移动中间盒子宽度（left：中间盒宽度）左侧背景盒、中间背景盒、右侧背景盒分别设置背景颜色。结构：左侧背景盒中嵌套中间背景盒，中间背景盒中嵌套右侧背景盒；-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

2022-09-07 18:17:46 87

原创 9.6前端笔记

3、checked：用于单选框按钮和复选框按钮的默认选中，直接在input标签写checked或checked或checked='checked'checked：单选框和多选框的默认选中 checked="checked" checked。checked：单选框和多选框的默认选中 checked="checked" checked。name属性：表单的字段名，如果不设置name属性，输入框的内容无法随表单一起提交。一个完整的表单包括：表单域，表单控件（表单元素），提示信息，共三个部分；

2022-09-06 22:18:21 432

原创 9.5前端笔记

它是一个独立的渲染区域，只有Block-level box（块级标签）参与，它规定了内部的Block-level box（块级标签）如何布局，并且与这个区域外部毫不相干。原因：浮动脱离标准流不脱离文本流浮动的盒子会遮盖下面的盒子，但是下面的盒子是不会被遮盖的，文字反而还会环绕浮动的盒子。原因:浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字，反而还会环绕浮动的盒子。解决办法（特性6,4）：BFC就是页面上的一个独立容器，容器里面的子标签不会影响外面标签。

2022-09-05 23:21:33 76

原创 9.2前端笔记

使用margin属性的负间距实现具有width属性和height属性的绝对定位元素居中position：absolute；3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html）通常配合绝对定位使用（子绝父相）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等。如果有定位偏移属性，则相对于父元素发生偏移。如果父亲没有相对定位，会依次往上级找，爷爷有相对定位，就参照爷爷的位置定位。2.有定位父级相对于定位父级发生定位偏移。

2022-09-02 21:18:57 172

原创 9.1前端笔记

实际文字写在span里面，span的宽度由文字和内边距撑开 a的宽度是由span撑开了。比如页面很多img，打开页面的时候，图片都会向服务器请求，请求次数越多，加载速度慢。换成精灵图，一次就请求一张大图，减少http次数请求，提高页面性能。bottom：设置元素距离参照元素的底部位移，正值往上，负值往下。right：设置元素距离参照元素的右侧位移，正值往左，负值往右。left：设置元素距离参照元素的左侧为宜，正值往右，负值往左。top：设置元素距离参照元素的顶部位移，正值往下，负值往上。

2022-09-01 21:25:08 120

原创 8.31前端笔记

4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both；注意：任何标签都可以设置浮动，元素设置浮动后，不在区分标签的分类了，都类似于行内块标签（可以设置宽高，具有盒模型特性），但是没有行内块标签的空格和换行会被解析。文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。...

2022-08-31 21:28:16 111

原创 8.30前端笔记

特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。4.具有部分盒模型特征（不可以设置宽高，可以设置padding，不能设置上下外间距，可以设置左右外间距）2.基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）a标签的字体颜色不能继承父元素的字体颜色color（a标签设置字体颜色需要给自己设置。h标签，strong，b标签不能继承父元素的font-weight。转换为行内块元素。..

2022-08-30 21:36:50 241

原创 8.29笔记

盒子大小宽高为0 要那个三角形，它的对边为none，它的相邻的边框的颜色为透明色,transparent。要那个梯形，它的对边为none，它相邻的边框的颜色为透明色，transparent。解决办法:分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden';实现上边三角形，对边为none，也就是下边框为none，左右边框的颜色为透明色。1.当子元素设置上外间距时,此时子元素与父元素不会产生上外间距，上外间距会叠加给父元素。实现上梯形，对边为none，也就是下边框为none。...

2022-08-29 21:08:05 701

空空如也

空空如也