- 博客(43)
- 收藏
- 关注
RSS订阅原创 学习前端第四十五天（冒泡和捕获、事件委托）
如果有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。event.target —— 是引发事件的“目标”元素，它在冒泡过程中不会发生变化。e.stopPropagation() 阻止向上冒泡，但是当前元素上的其他处理程序都会继续运行。this —— 是“当前”元素，其中有一个当前正在运行的处理程序。在某个位置触发事件后，会先从父元素向内执行捕获阶段，抵达位置之后向父元素执行冒泡阶段。为了在捕获阶段捕获事件，需要将处理程序的。
2024-05-23 17:52:31
537
原创 学习前端第四十四天（浏览器事件简介）
event.currentTarget 处理事件的元素，一般与“this”相同，除非处理程序是一个箭头函数，或者它的this被绑定到了其他东西上。console.log(this)">保存1</button><button id="btn1" onclick="fn();addEventListener的参数，（事件，函数，第三个参数）事件处理函数中的this指向绑定事件函数的对象。特性绑定的事件函数中的this指向特性的主人。
2024-05-23 16:45:51
539
原创 学习前端第四十二天（修改文档）
调用：const df = new DocumentFragment();创建一个容器，用来装节点，当我们将其插入某个位置时，则会插入装进去的节点。然后可以往 df 中放节点 ：df.append(......)再把df放到其他标签元素内：？
2024-05-21 19:27:29
484
原创 学习前端第四十三天（样式和类、元素大小和滚动、Window大小和滚动、坐标）
width/height —— 矩形的 width/height（可以为负）。使用document.elementFromPoint(x,y)会返回在窗口坐标（x，y）处的元素。scrollTo（x，y），使选中元素的左上角滚动到绝对位置（文档左上角）的（x，y）top/bottom —— 顶部/底部矩形边缘的 Y 坐标，提供了元素的“外部” width/height，它的完整大小（包括边框）。x/y —— 矩形原点相对于窗口的 X/Y 坐标，scrollBy（x，y），滚动到相对于当前位置的（x，y）
2024-05-21 17:39:50
2024
原创 学习前端第四十一天（节点属性，特性和属性）
2.在使用两者对元素节点进行修改时，innerHTMl会作为 HTML插入，解析标签并在代码层面实现该标签，textContent“作为文本”插入，所有符号均按字面意义处理。两者都可以显示元素节点的内容，并且可以解析其中的标签；1.使用innerHTMl会展示元素节点内的标签，使用textContent不会展示元素节点内的标签；outerHTML 获得且可以修改整个标签和标签内的元素，可以修改。提供了对元素内的文本的访问权限，仅文本，去掉所有 <tags>。修改与页面有关的标准特性/属性，页面会发生变化。
2024-05-21 10:47:34
811
原创 学习前端第四十天（DOM树，遍历DOM，搜索）
/ 表格// 表格元素表格对象的行表格行的单元格// tr.sectionRowIndex —— 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）// tr.rowIndex —— 在整个表格中 <tr> 的编号（包括表格的所有行）// 0// 4// td.cellIndex —— 在封闭的 <tr> 中单元格的编号。// 1。
2024-05-21 09:00:12
682
原创 学习前端第三十七天（静态属性静态方法、类检查、错误处理）
使用类继承和，自定义什么时候报错，且报错信息是什么，我们可以语义化错误，设置不同的情景错误// 自定义Error，设置不同的情景错误，都继承于Errortry {// throw new ageError("年龄错误");// throw new phoneError("手机号码错误");throw new emailError("邮箱号码错误")
2024-05-15 21:01:32
355
原创 学习前段第三十六天（类：class基本语法，类继承）
类和函数相似，可以用表达式创建，并且同函数一样，可以给类一个名字，只在类中可读。new调用时的参数会给constructor的形式参数，可以更灵活地创造对象。没有写子类的 constructor，就会调用父类的。new调用时传入的实际参数会给constructor。extends后允许任意表达式，变量，值，函数调用。在子类中新建方法时，可以用super调用父类方法。名字重复时，调用子类，子类的方法会覆盖父类方法。然后可以调用对象方法了，例如 obj。，并传递了所有的参数。
2024-05-14 11:32:33
663
原创 学习前端第三十五天（原型继承，F.prototype，原生的原型）
这听起来与“原型”这个术语很类似，但这里实际上指的是具有该名字的常规属性。}） 创造一个对象，以proto为原型，以及可选的属性描述来创建一个空对象；Object.setPrototypeof（obj，proto）设置对象obj的原型为proto；中读取一个缺失的属性时，JavaScript 会自动从原型中获取该属性，“原型继承”。访问器（get / set）是例外 ，设置与访问器有关的属性时，会调用原型中的访问器。变成了这个数组的 prototype，并为这个数组提供数组的操作方法。原型仅用于读取属性。
2024-05-13 16:55:46
1726
原创 学习前端第三十四天（call，apply，函数绑定；箭头函数；对象属性配置）
修改cnGender时，会通过函数对应关系修改gender值，然后输出cnGender时，会根据gender修改的值输出cnGender。第一个给“this”传参数，第二个参数需要是数组形式，然后与形式参数一一对应赋值。// 箭头函数没有局部变量“this”，this会向上层找。// 箭头函数没有“arguments”(收集实际参数)call可以传多个参数，apply只能传两个参数，一个对象一个数组。用于获取和设置值的函数，但从外部代码来看就像常规属性。作用：调用后执行函数，可以给“this”传参数。
2024-05-10 09:10:27
919
原创 学习前端第三十三天（函数对象，NFE，定时器）
在函数中随便添加属性，方法fn.say();// hello现在 title 被直接存储在函数里，而不是它外部的词法环境。函数中的属性方法在函数调用后才会产生。
2024-05-09 16:28:35
845
原创 学习前端第三十二天（Rest 参数与 Spread 语法，变量作用域，闭包）
/ arguments,以参数在参数列表中的索引作为键，存储所有参数,以类数组对象的形式输出所有函数参数。// 箭头函数没有arguments和this对象，会去上级函数找，没有上级函数就报错。如果一个函数是在另一个函数中创建的，该函数就被称为“嵌套”函数。...变量名：收集剩余的参数并存进指定数组中，需要放到最后；内声明了一个变量，那么这个变量只在该代码块内可见。构造很特殊：在其中声明的变量被视为块的一部分。// 可传入多个可迭代对象。// 常用的复制数组方法。2.嵌套函数（重要）
2024-05-08 15:59:47
587
原创 学习前端第三十一天（JSON方法，toJSON；递归）
下面的会被json方法跳过：函数属性（方法）。存储 undefined 的属性。递归将函数调用简化为一个更简单的函数调用，然后再将其简化为一个更简单的函数，以此类推，直到结果变得显而易见。当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。对象属性名称也是双引号的。告诉 JavaScript 在多行中显示嵌套的对象，对象内部缩进 n个空格。可选的函数 function(key,value)，该函数将为每个。传递一个属性数组给它，那么只有这些属性会被编码。要解析的 JSON 字符串。
2024-05-07 19:59:30
651
1
原创 学习前端第三十天（解构赋值，日期和时间）
一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据，需要使用相同的结构。当出现重复定义时，给变量一个别名，color: x，属性：变量，前面的属性负责匹配对象中的属性给变量赋值。其余的“...”，放在最后一个变量前，收集其余的数组项，这个可以用来复制数组。默认值，变量没有结构到时显现，结构变量都可设置默认值，需从后往前设置。月默认值为1，月份从0开始算，“1”算二月，时分秒默认为0。是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。
2024-05-06 19:44:26
877
原创 学习前端第二十九天（可迭代对象，映射和解构【弱】，Object.keys values）
next（）方法返回的结果的格式必须是{done：Boolean，value：any}，当done=true时，表示循环结束，否则value是下一个值。的集合，它仅允许对象作为键，并且一旦通过其他方式无法访问这些对象，垃圾回收便会将这些对象与其关联值一同删除。的集合，它仅存储对象，并且一旦通过其他方式无法访问这些对象，垃圾回收便会将这些对象删除。6、Set，一个特殊的类型集合， “值的集合”（没有键），它的每一个值只能出现一次。7、Set 可以迭代，按照值插入的顺序进行的。5、对象，数组，Map相互转换。
2024-05-06 16:40:22
813
原创 学习前端二十八天（数组方法）
/ ['b', 'c'],第一个参数为删除开始位置，第二个参数为删除元素个数。// filter 返回true时，会选中这时的元素，并继续循环，将所有满足条件的元素集合成数组返回。
2024-04-26 19:43:03
930
原创 学习前端第二十七天（字符串、数组）
返回字符，字符串第一次出现的位置，字符串不存在返回 -1，第二个参 数设定查询的起始位置。str .substr ( start, length ) 返回字符串从 start 开始的给定 length 的部分，start支持负值。str .substring ( start, end ) 与 slice 几乎相同，但它允许 start 大于 end，不支持负参数。
2024-04-23 17:30:02
2099
原创 学习前端第二十六天（对象 —— 原始值转换、原始类型的方法、数字类型）
因为：一个数字以其二进制的形式存储在内存中，一个 1 和 0 的序列。如果发生 error，则返回收集到的数字。2、前缀 ： 0x/0X 16进制 、 0o/0O 八进制 、 0b/0B 二进制。// 二进制下的‘255’ = 11111111。// 八进制下的‘255’ = 377。// 十六进制的‘255’ = ff。例如，要将数字舍入到小数点后两位，我们可以将数字乘以。使用一元加号调用，将其转换为数字，例如。，调用舍入函数，然后再将其 除回。将其参数转换为数字，如果是常规数字而不是。
2024-04-22 22:21:54
858
原创 学习前端第二十五天（构造器和操作符‘new’，可选链‘?.’，symbol类型）
可以在其中创建 symbol 并在稍后访问它们，它可以确保每次访问相同名字的 symbol 时，返回的都是相同的 symbol。symbol 允许我们创建对象的“隐藏”属性，代码的任何其他部分都不能意外访问或重写这些属性。一种访问嵌套对象属性的安全的方式。即使中间的属性不存在，也不会出现错误。即使我们创建了许多具有相同描述的 symbol，它们的值也是不同。语法使其前面的值成为可选值，但不会对其后面的起作用。.[ ]允许从一个可能不存在的对象上安全地读取属性。用于调用一个可能不存在的函数。
2024-04-19 17:47:19
598
原创 学习前端第二十四天（对象的引用和复制，对象方法，this）
所以当一个对象变量被复制 ，其实是另一个对象复制了这个对象的引用，而该对象自身并没有被复制。赋值了对象的变量存储的不是对象本身，而是该对象“在内存中的地址”，对象储存着变量的地址。现在我们有了两个变量，它们保存的都是对同一个对象的引用，都作用在同一个对象上。箭头函数没有自己的“this”，如果我们在这样的函数中引用。的值就是在点之前的这个对象，即调用该方法的对象。取决于外部“正常的”函数。作为对象属性的函数被称为。中的代码可能需要用到。的 name 属性。
2024-04-18 21:42:58
384
原创 学习前端第二十三天（函数表达式，箭头函数，对象）
/ 普通函数的函数名可以重复，后面的定义的同名函数覆盖前面的，函数表达式不行。// 代码块内的普通函数全局可见，函数表达式只有在代码块中可见。“回调函数”：函数参数中，有以函数形式出现的参数值，这个参数值称为“回调函数”。3、如果代码块只有一条return语句，花括号{}和return都可以不写。1、舍去“function”关键词，在参数和代码块之间添加“=>”// 普通函数允许先调用后定义，函数表达式不行。4、如果函数只有一个参数，参数的()可以不写。无论如何，函数最后都是一个值。
2024-04-18 19:27:08
516
原创 学习前端第二十二天（Switch语句，函数）
返回值：返回一个确定值，中断程序执行。函数名命名规则和变量名一样。局部变量（函数的参数）共享同一段代码的几个。分支可以被分为一组。
2024-04-16 21:04:20
507
原创 学习前端第二十一天（循环：while，for）
→ (如果 condition 成立 → 运行 body 然后运行 step)它不会停掉整个循环。而是停止当前这一次迭代，并强制启动新一轮循环（如果条件允许的话）。开始运行 → (如果 condition 成立 → 运行 body 然后运行 step)循环首先执行循环体，然后检查条件，当条件为真时，重复执行循环体。循环的任何语句段都可以被省略，分号不可被省略。执行一次，然后进行迭代（重复）：每次检查。为真时，执行循环体的代码。不管条件是否为真，循环体。
2024-04-16 17:14:45
483
原创 学习前端第二十天（条件分支：if 和 ‘?‘；逻辑运算符）
语句有时会包含一个可选的 “else” 块。如果判断条件不成立，就会执行它内部的代码。全假为假，其他为真；返回第一个为真的值，或是最后一个为假的值。语句会计算圆括号内的表达式，并将计算结果转换为布尔型。全真为真，有假为假，返回第一个假值，全真则返回最后一个值。有时需要测试一个条件的几个变体。condition条件结果，如果结果为真，则返回。语句计算括号里的条件表达式，如果计算结果是。运算符可以返回一个取决于多个条件的值。，就会执行对应的代码块{ }。
2024-04-12 16:29:12
492
1
原创 学习前端第十九天（基础运算符，数学运算，值的比较）
当对不同类型的值进行比较时，JavaScript 会首先将其转化为数字（number）再判定大小。只要任意一个运算元是字符串，那么另一个运算元也将被转化为字符串。其他算术运算符只对数字起作用，并且总是将其运算元转换为数字。比较二者时，存在一个特殊的规则，会判定它们相等。++前置形式返回一个新的值，但后置返回原来的值。先比较首字母在字母表的顺序，越往后越大；时，它们不相等，因为它们属于不同的类型。参与的比较，我们都需要格外小心。的变量，按需要检查它的取值情况。前面相等的情况下，字符串长的大。
2024-04-11 19:18:21
628
1
原创 学习前端第十八天 （数据类型，交互，类型转换）
数字类型 Number “ (-)infinity（无限）；NaN（计算错误）”字符串类型 String 引号中的内容，反引号``允许将变量和表达式包在。title为展示给用户的内容，【default】为可选项，可以写入默认值。Number（“ 123 ”）：不能有间断的字符串数字；字符串转换：String（）；将内容转换为字符串类型；typeof？值，用于过大的数（大于2的53次方-1）alert（）：弹出的这个带有信息的小窗口。其余返回值为“NaN”直观上为“空”的值（
2024-04-10 16:53:39
526
1
原创 学习前端第十七天（初识JS，基础知识，变量）
script src="path/to/script.js"></script> 插入js脚本文件。alert（message，age）引用变量，一次可以引用多个变量。message=‘stupid’ ，age=‘18’ 定义一个变量并赋值。1、<script></script> 插入简单的JS代码。变量只能定义一次，赋值可以多次。启用严格模式，放在脚本顶部。使用大写字母和下划线来命名。2、插入内容，每行最后使用分号。
2024-04-09 17:03:33
307
原创 学习前端第十六天 （过渡，动画）
3.transition-timing-function：过渡效果的时间曲线。animation-fill-mode：规定动画不播放时，播放完时的样式。animation-play-state：规定动画是否正在运行或暂停.animation-timing-function：动画的速度曲线。animation-name：选择@keyframes定义的动画。animation-iteration-count：动画播放次数。animation-duration：动画周期完成时间。
2024-04-09 16:00:26
288
原创 学习前端第十五天（响应式布局，媒体查询）
max-width min-width 页面可见宽度小于等于某个值；landscape 横屏；7、水平方向对齐（在class里面加上row-x-#{$place}就好）6、垂直方向对齐（在class里面加上ow-y-#{$place}就好）screen print 屏幕；4、通过 style 设置媒体查询。5、12（24、48）栅格布局。3、通过文件引入设置媒体查询。8、媒体查询，移动设备优先。1、根据媒体特性查询。
2024-03-27 11:50:14
634
原创 学习前端第十四天（css预处理器，代码的重用，去除浮动图片的多余文字环绕）
2、mixin混合 @mixin 定义，@include调用 可以使用变量。第三种：对浮动元素的父标签加样式：overflow：hidden。第一种：在想要去除的多余文字前加一个span标签，并设置样式。第二种：在想要去除的多余文字前加伪元素，并设置样式。（css文件中不显示2.css的具体内容）（css文件中显示2.css的具体内容）5、@function 自己编写函数。3、@import 插入外部文件。1、继承 @extend。// 复制scss文件。
2024-03-26 11:31:26
536
原创 学习前端第十三天（搜索栏制作，SASS预处理器）
符号左右需加上“空格”，除法需在计算前后加上括号。4、引用父元素&，这时候“hover”是紧跟在“a”后面的。1、使用div、input、button确定html框架。如果要在字符串中引用变量，变量需要写在。2、使用弹性布局，字符图标确定大致形状。方便后期进行统一修改。思路最重要，先框架后排版最后样式。选择器嵌套和属性嵌套。二、SASS预处理器。
2024-03-23 11:01:01
498
1
原创 学习前端第十二天（弹性布局项目属性，字符图形导入使用，菜单制作）
当要添加一个二级菜单时，使用position对二级菜单进行定位，再使用display：none确保打开二级菜单前其处于消失状态。5、flex flex-grow，flex-shrink，flex-basis的缩写，默认为0 1 auto；6、align-item 使用align-content对一行项目进行单轴排列时，对单个项目位置进行设置。4、flex-basis 在分配多余空间之前，项目占据的主轴空间，默认auto项目原本的大小。0不参与，默认1参与缩小，值越大缩越多。
2024-03-21 17:47:11
565
1
原创 学习前端第十一天（精灵图，三角形扇形，弹性布局）
维护方面：Sprites 维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并 的图片，无需改的地方尽量不要动，这样避免改动更多的 CSS ，如果在原来的地方 放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动 CSS。使用方法：先确定宽高，用background-image：url（）引用精灵图，确定图片所需部分的位置，然后用background-position：？
2024-03-20 19:58:26
439
1
原创 学习前端第十天（3月19日，浮动定位）
6、visibility 隐藏文档或表格内容，且不会改变布局。2、float 元素延左或右浮动，允许文字图片环绕。5、overflow 对过大的内容进行处理。8、z-index 重叠时值高的排在上面。3、clear 不允许左右有浮动元素。1、display 行块互通。4、cursor 光标。
2024-03-19 21:52:35
300
1
原创 学习前端（3月16，表格，背景）
9、径向渐变背景：background-image：radial-gradient（颜色1，颜色2.......）8、线性渐变背景：background-image：liner-gradient（颜色1，颜色2......）4、背景图片初始位置：background-position。3、背景图片起始位置：background-origin。2、背景图片：background-imag（url）5、背景图片重复：background-repeat。6、背景图片大小：background-size。
2024-03-16 09:29:47
319
1
原创 学习前端第八天（CSS）
12、text-shadow属性，文字阴影，值用逗号隔开，依次为水平方向偏移值，垂直方向偏移值，模糊半径，颜色。top 使元素及其后代元素的顶部与整行的顶部对齐。10、text-overflow属性，设置如何处理文字溢出内容，可以被剪切，显示一个省略号或显示 一个自定义字符串。8、text-align属性，设置文本水平对齐方式，left 默认，居左。5、text-indent属性，块元素首行文本缩进，单位：rem（常用），px，%4、word-spacing属性，设置单词间距，对英文中的单词生效，px。
2024-03-13 16:51:34
659
原创 学习前端第七天
smaller/larger相比于父元素；内联样式>id选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器。在::before和::after所代表的伪元素中插入内容。常用：“rem”相比于用户字体默认大小；多个选择器组和的权重为单个单个选择器优先级权重值的和。权重：标签选择器1，类选择器10，id选择器100。1、font-family：为选中的元素设置字体。4、line-height：设置多行元素的空间量。3、font-weight：设置字体粗细。2、font-size：设置字体大小。
2024-03-12 17:12:19
208
1
原创 学习前端第六天
1、a:link a:visited a:hover a:active 未访问；激活，元素的四个状态。6、p:first/last-of-type 匹配一组相同标签的兄弟元素中，第一个/最后一个元素。5、p:nth-of-type（an+b） 匹配一组相同标签的兄弟元素中，位置匹配表达式的元素。1、p::before/after 创建一个伪元素，作为被选中元素的最前面/最后面的子元素。4、p:nth-child（an+b） 匹配一组兄弟元素中位置匹配表达式的元素。
2024-03-11 16:53:57
468
原创 学习前端第五天
3、[class~=p1]：以class命名的属性的元素，属性值用空格隔开，属性值至少包含“p1”2、[attr=xc]：选择以attr命名的属性的元素，并且属性值为xc。8、[id=caps i]：以id命名的属性的元素，忽略属性值的大小写。4、[id|=y]：以id命名的属性的元素，id值的前缀为“y-”5、[id^=xc]：以id命名的属性的元素，id值以“xc”开头。6、[id$=cx]：以id命名的属性的元素，id值以“cx”结尾。7、[id*=xx]：以id命名的属性的元素，id值包含“xx”
2024-03-08 21:35:37
670
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人