- 博客(29)
- 收藏
- 关注
RSS订阅原创 JS事件机制精讲
捕获阶段：从最外层（桌子）→向内（杯子），从上往下传递事件冒泡阶段事件冒泡一、事件流三个阶段捕获阶段：事件从 window → document → html → body → 外层父元素，一层一层向内走，还没到达点击的目标元素目标阶段：事件到达你真正点击的那个元素，触发这个元素绑定的事件冒泡阶段：事件从目标元素，一层一层向外传递给父元素，直到 window解决嵌套元素点击冲突：比如 div 里面套按钮，点按钮，父 div 的点击事件也跟着触发（冒泡带来的现象）实现事件委托（事件代理）
2026-09-16 17:34:18
327
原创 DOM（文档对象模型）
一，DOM 解决什么问题1.DOM 把 HTML 文档转换成一个树状对象模型，让 JavaScript 可以读取、修改页面里面的标签、文本、属性、样式。2. 没有 DOM 的话，JS 无法操作网页内容。3.DOM 是 JS 和 HTML 沟通的桥梁。二，应用场景<li>三，怎么使用。
2026-09-15 11:21:15
330
原创 innerText /innerHTML 知识点详解
✅ 需要修改元素内部结构、插入标签 →innerHTML例：动态渲染列表、富文本展示✅ 只展示纯文本，内容来自用户输入，防止 XSS →例：评论展示、表单回显文字。
2026-09-14 20:25:24
277
原创 DOM文档类型
生活化比喻：网页是一棵大树，html 是树干，head、body 是大树枝，div/p/span 是小树枝，文字就是树叶。document.querySelectorAll('.item') // 匹配全部，返回NodeList。事件委托：利用事件冒泡，给父元素绑定事件，用来监听子元素，减少 DOM 绑定，性能更好。DOM 操作会消耗性能：频繁修改 DOM，浏览器会不停重绘重排，尽量少操作 DOM。元素节点：HTML 标签，<div> <p> <h1>，最常用。// 读取/修改内容，可以解析HTML标签。
2026-09-11 18:17:30
484
原创 Debug 调试与排错规范
Debug 就是找 bug、定位问题、修复代码，并且总结经验防止以后再犯。报错优先看最顶部第一条错误，很多后面报错都是连带产生的，修好第一条后面一堆报错会自动消失。网络错误：AJAX 接口请求相关问题，跨域、请求方式选错、参数传错、后端接口异常。2. 打开 Network 网络面板，确认接口有没有正常发起，请求方法是否正确。逻辑错误：代码没有红色报错，可以正常执行，但是运行结果不对，是思路问题。语法错误：单纯代码写错，单词拼错，少引号少括号。5. 回到源码，定位代码，修改语法、请求头、参数或者逻辑。
2026-09-10 18:51:58
344
原创 jsESModule 模块化基础
3. Node.js 项目：Node14 + 支持 ESM，文件后缀`.mjs`，或者`package.json`设置`"type":"module"`。2.依赖顺序难管理：script 标签从上到下顺序执行，必须手动调整引入顺序，A 依赖 B，B 就要写在前面，项目大了很难维护。2. 浏览器原生页面：script 标签添加`type="module"`，浏览器直接运行模块化 JS，不需要打包。2.显式声明导入`import`、导出`export`，依赖关系写在代码里，自动识别依赖。
2026-09-09 18:38:06
489
原创 js正则对象与基础讲解
substring(start,end) 截取：开始下标，结束下标（不包含 end） 'abcd'.substring(1,3) //'bc'replace(old,new) 字符串替换，默认只替换第一个匹配项 'aa'.replace('a','x') //'xa'split('分隔符') 字符串切割成数组 'a,b,c'.split(',') //['a','b','c']arr.slice(1,3) // [2,3] 截取，不修改原数组。
2026-09-08 18:13:25
605
原创 引用类型、内存原理与对象
当写 user.name：JS 读取栈中 user 的地址 0xaa01，拿着地址去堆里面找到真实对象，读取 name 属性。JS 在堆内存开辟一块空间，存入完整对象 { name:"小明", age:18 }，假设这块堆的地址编号：0xaa01。但是里面的 info 是对象，只复制 info 的地址，info 对象还是原来堆里那一个。在栈内存创建变量 user，变量 user 里面不存对象，只存地址 0xaa01。栈里面的变量，只拿着堆的地址编号，相当于门牌号。浅拷贝：只复制对象第一层，生成新堆对象；
2026-09-06 22:00:59
466
原创 JS作用域，作用域链
（if、for、while、普通大括号）就形成一块地盘。查找顺序：自己局部 → 父作用域 → 祖父 → 全局。写在函数、大括号外面的变量，整个 JS 文件随便用。，出了地盘就找不到这个变量。var 不会报错，会拿到 undefined。var vs let/const 核心区别。声明之前，不能使用变量，这片区域叫死区。if/for 大括号关不住 var。，只能函数里面用，外面访问不到。被大括号锁住，出大括号就失效。只认函数大括号，普通。
2026-09-05 21:59:35
495
原创 js函数与封装详细解答
函数执行完毕，局部变量就销毁释放内存。注意：如果定义写了 2 个形参，调用只传 1 个实参，那么第二个形参的值就是 undefined，很容易引发错误。内置函数：JS 语言原生自带，浏览器提供，直接调用，比如console.log()。修改需求、修复 bug，只修改函数内部，所有调用位置自动生效，不用到处改代码。函数名：见名知意，动词开头，比如 getSum、checkPhone，不要用 a、b 这种无意义名字。坑点：函数内部不使用 let、const 直接赋值的变量会变成全局变量，非常不好，严禁这么写。
2026-09-04 22:48:05
480
原创 js数组基础与常用操作
splice(起始下标, 删除数量, 插入新元素...)，可以做删除、替换、插入，直接修改原数组，返回被删除元素组成的数组。const arr1 = [1, 2, "前端", { name: "数组" }, [3, 4]];// [1,2,3,4] 原数组被修改。长度可变：JS 是动态数组，不用预先规定大小，可以随时增删元素。非变异方法：返回全新数组，原数组保持不变，业务开发优先选。// 替换：下标0开始，删1个，替换成99。// 插入：下标1开始，删0个，插入200。删除数组最后一项，返回被删掉的元素。
2026-09-01 23:25:43
463
原创 基本类型和引用类型到底有啥区别？对象存在哪里？赋值为什么会互相影响？
对象是存放在堆内存中的、包含多个属性和行为的复杂数据实体，是引用类型的核心载体。
2026-08-30 13:18:13
426
原创 函数与封装函数详解
函数就是把重复要用的代码打包装起来，想用的时候直接调用，不用复制粘贴一大段代码。没有函数：代码写一遍，要用很多次就得复制很多份，改的时候要改好多地方，容易出错。封装函数：代码只写 1 次，需要就调用，修改只改函数内部一处。console.log("立刻执行");})();
2026-08-27 20:50:33
153
原创 js数组基础认识与了解
console.log(arr) // [1,2,3, empty × 2] 空位是empty，不是undefined。console.log(badArr) // [empty × 3] 长度为3的空数组，没有实际元素。和其他语言不同，JS 数组是动态长度的，可以随时增删元素，也可以存放不同类型的元素。// 场景3：替换元素 - 从索引0开始，删除1个，替换成'hello'// 场景2：插入元素 - 从索引1开始，删除0个，插入'a'和'b'索引从0开始，第一个元素索引是 0，第二个是 1，以此类推。
2026-08-26 20:04:16
419
原创 JS 分支判断语句详解
赋值 和 ==相等 混淆：if(a=1){}永远 true，应该写if(a===1)假值 (false)：false、0、''、null、undefined、NaN。适合判断某个变量等于若干固定值的场景，做等值匹配 (===严格相等)。"成年" : "未成年";简写版 if-else，适合简单二选一，返回一个值，不适合复杂逻辑。|| 短路或：A || B，A 为真直接返回 A；if else 范围判断、复杂多条件、逻辑或 / 且组合。if 条件里多个判断，注意&&并且、||或者优先级，可以加括号。
2026-08-24 20:45:01
461
原创 js循环语句
常用循环：for、while、do‑while、for‑in、for‑of，还有循环控制：break、continue。1.执行初始化 2. 判断条件 到true 执行循环体 →3. 执行更新 →回到 2 判断条件；先判断条件，条件为 true 才执行循环体；条件 false 直接不执行。条件判断：每次循环前判断，true执行循环体，false直接退出循环。3. do‑while 循环（先执行一次，再判断条件）do‑while：先执行，后判断，最少执行 1 次。while：先判断，后执行，可能 0 次。
2026-08-22 20:17:24
456
原创 js type类型转换以及布尔值转换
/ 输出: 123 string。有几个特殊的输出布尔值console.log(Boolean('')) // false。
2026-08-21 22:11:12
329
原创 js概念以及变量及数据类型
String，字符串，是用引号包起来的文本，如"你好"，"前端"，'前端知识'，\模板``。Undefined，未定义，例如let a，虽然声明了，但是并为赋值;将字符串str，数字number，布尔值可以用打印将三个放入一个括号里面简写，知道每个明确的值，console.log("字符串：" + str + "，数字：" + num + "，布尔值：" + bool)；而且，这变量var，const，let，这三个变量各有各的优缺点，就像var goodsName = "iPhone 15";
2026-08-20 20:52:47
539
原创 css精讲-弹性布局篇
flex 是一维布局，多行复杂网格优先用grid；必须开启换行wrap，单行无效；子元素默认会被压缩，想要固定不变设置；弹性子元素的margin可以参与空间分配；margin:auto 在 flex 内部可以实现单侧对齐。
2026-08-17 22:04:52
724
原创 css导航栏步骤
现代经典（Flexbox）：目前最推荐，给 ul 设置 display: flex，无需清除浮动，控制对齐（justify-content）和间距更优雅。· 顶部主导航：位于页眉，承载网站核心栏目（如“首页 | 产品 | 关于”），是用户寻找内容的第一入口。· 结构语义化：使用 <nav> 包裹 <ul>，<li> 内嵌 <a>，保证屏幕能识别为导航列表。· 解决“找不到内容”：通过清晰的视觉分组（悬停/选中状态），降低用户跳出率，提升任务完成效率。/* 经典间距 *//* 经典悬停交互 */
2026-08-16 14:46:18
543
原创 css导航栏下滑线的应用与理解
在做css导航栏中，遇到了下滑导航栏下面还有条线段可伸缩，这个问题难住我了。通过练习对于css导航栏的下划线伸缩的条件，通过利用伪类选择器after解决了，同时借助过渡transition-origin：center center；产生过渡，将这个问题解决了，主要还是对于定位的布局以及hover效果和过渡衔接不起来，通过配合transition，达成了一种线段自中心去下边的效果。
2026-08-09 20:48:47
310
原创 css弹性布局，以及html总结
css中在做导航栏这一部分的时候是真的卡住了，导航栏这一部分很蒙的当时，做到这一部分的时候对于hover的理解不够深刻，在上手实操的时候还是卡壳了。后面通过又做了一个项目，对于导航栏的布局慢慢的熟悉起来了，对于导航栏也有了新的见解，新的认识。不可能云淡风轻的对待这种情绪的，对于自身情绪要慢慢调节，就像项目也是如此，将时间线拉长，只要你每天有所成效，有所感悟，每天进步一点点那就是一大步。当做项目遇到了问题了的时候，其实是该学习一下前面的标签用途了，对于用途理解的层次还是不够。
2026-08-08 20:15:27
619
原创 css基础原理
1，层叠，重要性:important＞专用性（行内样式＞ID＞类/属性＞标签）\n\n2，继承，子元素自动获得父元素某种特性\n\n3，盒模型content＞padding＞border＞margin构成，其中标准宽高盒模型就是content\n\n怪异盒子模型可用（box－sizing:border－box，其中宽高是content+padding+border）\n\n4,其中相对定位和绝对定位比较常见，relative相对定位，不脱离文本流仍占据相应空间，而absolute会脱离文本流不占据空间，父容
2026-08-02 14:24:54
435
原创 弹性布局与盒子模型的优缺点以及区别
学习了弹性布局后好多页面的布局伸展缩进已经准确位置不用再像之前盒子模型那样算来算去了，自己会撑起来，盒子模型当然也有他的作用，当然不可否认盒子模型确实没有弹性布局伸展自如，灵活多变。至于他们两者谁更好，无可厚非是弹性布局，但是在我慢慢摸索的看来，未必弹性布局里面就不能没有盒子模型的东西，两者一个是前者一个后者，亦师亦友，两种布局应该互相搀扶着，互相帮助，各司其职，各自发挥自己应有作用，做到相辅相成才是关键，而不是只盯着一种布局死磕而是要活学活用。
2026-07-31 21:52:10
525
原创 【无标题】
这几天学了弹性布局，对弹性布局理解甚少，如display：flex 这是弹性布局的最基本也是最重要的一部分，通过搭配just-cont：space-betwee可以让盒子里面内容以及文字向最左端和最右端，当然文字多少有关系，一般两个都是配合display：flex向左右最末尾处，同时也有space-evenly是两端对齐，space-around是两端然后一半对齐。对于flex1的理解还是掌握的不够好，日后也要勤于练习。这几天学到了一个小妙招，在做海淘的时候，有跳转的内容，在这跳转到另外的页面。
2026-07-26 18:54:36
207
原创 关于css里面的导航栏总结
在做各种难度的项目的时候都要遵循第一性原理，一开始是很难，但通过慢慢的做，执行后，慢慢的敲代码就慢慢会有所思路，通过一个思路慢慢提升，项目的难度也就越来越少了，解决的问题多了，这些整体的大问题其实就是些许小的问题的延伸。就比方说，在块级标签里面，导航栏是要对浏览器达到兼容效果的，就用<li>标签，列表的标签，在排版布局的时候要分清使用display：inline-block，还是display：flex呢，display：inline-block碰到边界自动换行，而flex是强制导航栏在一行。
2026-07-21 21:52:05
348
原创 html、css基础学习见解
在学到html和css的时候，当时就是span标签，这个元素在使用的的使用是不可以换行的因为制定的规则就是如他一样是行内元素，这时候就需要用到css的修饰层面，将他也就是span转成块级标签，这样就可以很好的让他换行。也就是跳出“三界之外，不在五行之中。”同时也可以转块级元素，如div转换为行内元素，让他们两个互换身份活一次。同时用display来实现这种情况，disply：block，将行可以转换成块，也就是span这种类型标签。代码之中各个元素之间互相转换相同，听说过“数学之美”，代码也可以之美。
2026-07-19 12:55:41
329
原创 前端页面三部分组成，以及常见的标签总结
这里面区别是每个部分元素是不同的，在块级元素宽高，外内边距设置css样式时候是可行的，但这些在行内元素中设置宽高是不可行的，其中当时我做的一个项目，在我用span包裹住了几个字体想让他们独占一行的同时让他们将边距调开，调开后发现宽高也想调开这时候span是调不了上下宽高边距的。行内块：img、imput、button、textarea、select。块级元素：div、p、h1-h6，、ul、li、form、hr。行内元素：span、a、b、i、u、s、em、strong。
2026-07-19 12:36:06
406
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人