很多新手学 JS 都是碎片化学习DOM 操作、定时器、数据类型、循环判断、运算符一堆知识点混在一起越学越乱。今天我把前端最核心、最常用的原生 JS 基础知识点整合为一篇实战笔记所有代码均可直接复制运行覆盖页面操作、动态时间、样式控制、数据运算、条件判断、循环语句、跳出语法零基础也能一次性吃透 JS 入门核心一、DOM 基础操作操控页面内容与样式DOM 操作是 JS 核心能力作用是 通过 JS 修改页面的文本、样式、显示状态实现页面动态效果。修改页面文本内容 innerHTML可以动态给页面标签赋值支持纯文本、标签内容渲染。// 获取类名为 con 的标签修改内部文本document.getElementsByClassName(‘con’)[0].innerHTML ‘你好’;// 动态渲染系统当前时间document.getElementsByClassName(‘con’)[0].innerHTML new Date();2. 动态修改元素样式通过 style 属性可以直接修改元素颜色、显示隐藏等行内样式。// 修改文字颜色为蓝色function Change() {document.getElementsByClassName(‘con’)[0].style.color “blue”;}// 隐藏元素display:none 彻底隐藏不占页面位置function Hidebutton() {document.getElementsByClassName(‘con’)[0].style.display “none”}// 显示元素display:block 恢复块状显示function showbutton() {document.getElementsByClassName(‘con’)[0].style.display “block”}3. 全局页面事件点击修改背景色给整个页面绑定点击事件任意位置点击即可触发样式修改。// 页面任意点击背景色变为珊瑚色document.addEventListener(“click”, myFunc);function myFunc() {document.body.style.backgroundColor “coral”}4. 定时器实战实时动态时钟setInterval 循环定时器每隔指定毫秒执行一次代码适合时钟、轮播、倒计时场景。// 每隔1秒更新一次时间let interst setInterval(turnovertime, 1000);function turnovertime() {// 获取当前系统时间let date new Date();// 渲染时分秒到页面let letme document.getElementsByClassName(‘schedule’)[0];letme.innerHTML date.getHours() ‘:’ date.getMinutes() ‘:’ date.getSeconds();}5. document.write 页面输出直接将内容写入当前文档页面适合新手调试演示。document.write(‘你好’);二、JS 五大基础数据类型入门必记JS 所有变量都离不开这几种基础类型是代码编写的根基// 1. 数字类型 Number整数、小数、运算let arr 9;// 2. 数组类型 Array存储一组数据let arr [1,2,3];// 3. 对象类型 Object存储键值对数据描述事物属性let arr {name:‘小白’,price:1222}// 4. 字符串类型 String文本内容let arr ‘’;// 5. 布尔类型 Booleantrue / false后续判断专用三、JS 全部算术运算符日常运算全覆盖用于数字加减乘除、幂运算、取余、自增自减是数据计算的基础。let arr 30;let err 20;let srr arr err; // 加法let srr arr - err; // 减法let srr arr * err; // 乘法let srr arr ** err; // 幂运算底数**指数let srr arr / 3; // 除法let srr arr % 3; // 取余数判断奇偶、循环取值常用// 自增自减arr // 后置自增arr-- // 后置自减// 赋值运算先运算再赋值arr 20;arr - 20;arr * 3;arr / 2;arr ** 2;arr % 3;四、比较运算符 逻辑运算符判断核心所有 if 判断、条件筛选、表单校验 都依赖这两组运算符返回结果只有 true / false。比较运算符document.write(arr 10); // 宽松相等只判断值不判断类型document.write(arr 10); // 严格相等值类型全部相同才为真开发首选document.write(arr ! 20); // 值不相等为真document.write(arr ! 10); // 值不同 或 类型不同 为真document.write(arr 20); // 大于document.write(arr 20); // 小于document.write(arr 20); // 大于等于document.write(arr 20); // 小于等于逻辑运算符document.write((arr20) (err30)); // 逻辑与两边都真才为真document.write((arr20) || (err30)); // 逻辑或一边为真即为真document.write(!(err30)); // 逻辑非取反真变假、假变真三元表达式极简判断替代简单 if-else一行代码完成判断赋值。// 条件 ? 成立执行 : 不成立执行document.write(arr50 ? ‘是’ : ‘否’);五、流程控制条件判断 循环语句流程控制是代码的灵魂决定代码什么时候执行、重复执行、跳过执行。if / if-else / else if 条件判断let arr 30;let err 20;// 单条件判断if(arr err){console.log(‘是’)}// 二选一判断if(arr50){console.log(‘是’)}else{console.log(‘否’)}// 多条件分支判断if (arr 20) {console.log(‘是’)} else if (err 10) {console.log(‘是’)}2. while 循环先判断后执行适用场景不确定循环次数满足条件就重复执行不满足直接不执行。while(arr90){document.write(‘现有数量’ arr)arr}3. do-while 循环先执行后判断特点最少执行一次适合弹窗校验、倒计时、接口分页等场景。do{document.write(‘数量’ arr “” )arr}while(arr35)六、循环跳出语句break continue用于精准控制循环避免无效遍历提升代码性能。break终止整个循环找到目标条件后直接结束所有循环不再执行。for(let i 0; i 20; i){if(i 19){break; // 直接跳出整个循环}console.log(‘数量’i)}continue跳过本次循环只跳过当前这一次遍历后续循环继续执行用于过滤无效数据。for (let i 0; i 20; i) {if (i 10) {continue; // 跳过i10这一次继续下一次}console.log(‘数量’ i)}七、完整可运行整合案例将以上所有知识点整合可直接复制到本地运行直观看到所有效果JS基础全套实战案例测试文本内容修改文字颜色 隐藏内容 显示内容script // 1. 修改文本 // document.getElementsByClassName(con)[0].innerHTML你好 // document.getElementsByClassName(con)[0].innerHTMLnew Date() // 2. 修改颜色 function Change() { document.getElementsByClassName(con)[0].style.color blue; } // 隐藏元素 function Hidebutton() { document.getElementsByClassName(con)[0].style.display none } // 显示元素 function showbutton() { document.getElementsByClassName(con)[0].style.display block } // 3. 页面点击换色 document.addEventListener(click,myFunc); function myFunc(){ document.body.style.backgroundColorcoral } // 4. 实时时钟 let interst setInterval(turnovertime, 1000) function turnovertime() { let date new Date(); let letme document.getElementsByClassName(schedule)[0] letme.innerHTML date.getHours() : date.getMinutes() : date.getSeconds(); } // 5. 基础运算、判断、循环可在控制台调试 /script八、学习总结 这篇笔记覆盖了 JS 入门 80% 的核心基础 - DOM 操作改文本、改样式、控制元素显隐、页面事件 - 定时器实现动态时钟、自动执行效果 - 数据类型、全套运算符代码运算与判断基础 - 三大流程控制if 判断、while/do-while 循环、break/continue 跳出 所有前端进阶知识AJAX、框架、算法都是基于这些基础延伸吃透这些才算真正入门 JavaScript
很多新手学 JS 都是碎片化学习DOM 操作、定时器、数据类型、循环判断、运算符一堆知识点混在一起越学越乱。今天我把前端最核心、最常用的原生 JS 基础知识点整合为一篇实战笔记所有代码均可直接复制运行覆盖页面操作、动态时间、样式控制、数据运算、条件判断、循环语句、跳出语法零基础也能一次性吃透 JS 入门核心一、DOM 基础操作操控页面内容与样式DOM 操作是 JS 核心能力作用是 通过 JS 修改页面的文本、样式、显示状态实现页面动态效果。修改页面文本内容 innerHTML可以动态给页面标签赋值支持纯文本、标签内容渲染。// 获取类名为 con 的标签修改内部文本document.getElementsByClassName(‘con’)[0].innerHTML ‘你好’;// 动态渲染系统当前时间document.getElementsByClassName(‘con’)[0].innerHTML new Date();2. 动态修改元素样式通过 style 属性可以直接修改元素颜色、显示隐藏等行内样式。// 修改文字颜色为蓝色function Change() {document.getElementsByClassName(‘con’)[0].style.color “blue”;}// 隐藏元素display:none 彻底隐藏不占页面位置function Hidebutton() {document.getElementsByClassName(‘con’)[0].style.display “none”}// 显示元素display:block 恢复块状显示function showbutton() {document.getElementsByClassName(‘con’)[0].style.display “block”}3. 全局页面事件点击修改背景色给整个页面绑定点击事件任意位置点击即可触发样式修改。// 页面任意点击背景色变为珊瑚色document.addEventListener(“click”, myFunc);function myFunc() {document.body.style.backgroundColor “coral”}4. 定时器实战实时动态时钟setInterval 循环定时器每隔指定毫秒执行一次代码适合时钟、轮播、倒计时场景。// 每隔1秒更新一次时间let interst setInterval(turnovertime, 1000);function turnovertime() {// 获取当前系统时间let date new Date();// 渲染时分秒到页面let letme document.getElementsByClassName(‘schedule’)[0];letme.innerHTML date.getHours() ‘:’ date.getMinutes() ‘:’ date.getSeconds();}5. document.write 页面输出直接将内容写入当前文档页面适合新手调试演示。document.write(‘你好’);二、JS 五大基础数据类型入门必记JS 所有变量都离不开这几种基础类型是代码编写的根基// 1. 数字类型 Number整数、小数、运算let arr 9;// 2. 数组类型 Array存储一组数据let arr [1,2,3];// 3. 对象类型 Object存储键值对数据描述事物属性let arr {name:‘小白’,price:1222}// 4. 字符串类型 String文本内容let arr ‘’;// 5. 布尔类型 Booleantrue / false后续判断专用三、JS 全部算术运算符日常运算全覆盖用于数字加减乘除、幂运算、取余、自增自减是数据计算的基础。let arr 30;let err 20;let srr arr err; // 加法let srr arr - err; // 减法let srr arr * err; // 乘法let srr arr ** err; // 幂运算底数**指数let srr arr / 3; // 除法let srr arr % 3; // 取余数判断奇偶、循环取值常用// 自增自减arr // 后置自增arr-- // 后置自减// 赋值运算先运算再赋值arr 20;arr - 20;arr * 3;arr / 2;arr ** 2;arr % 3;四、比较运算符 逻辑运算符判断核心所有 if 判断、条件筛选、表单校验 都依赖这两组运算符返回结果只有 true / false。比较运算符document.write(arr 10); // 宽松相等只判断值不判断类型document.write(arr 10); // 严格相等值类型全部相同才为真开发首选document.write(arr ! 20); // 值不相等为真document.write(arr ! 10); // 值不同 或 类型不同 为真document.write(arr 20); // 大于document.write(arr 20); // 小于document.write(arr 20); // 大于等于document.write(arr 20); // 小于等于逻辑运算符document.write((arr20) (err30)); // 逻辑与两边都真才为真document.write((arr20) || (err30)); // 逻辑或一边为真即为真document.write(!(err30)); // 逻辑非取反真变假、假变真三元表达式极简判断替代简单 if-else一行代码完成判断赋值。// 条件 ? 成立执行 : 不成立执行document.write(arr50 ? ‘是’ : ‘否’);五、流程控制条件判断 循环语句流程控制是代码的灵魂决定代码什么时候执行、重复执行、跳过执行。if / if-else / else if 条件判断let arr 30;let err 20;// 单条件判断if(arr err){console.log(‘是’)}// 二选一判断if(arr50){console.log(‘是’)}else{console.log(‘否’)}// 多条件分支判断if (arr 20) {console.log(‘是’)} else if (err 10) {console.log(‘是’)}2. while 循环先判断后执行适用场景不确定循环次数满足条件就重复执行不满足直接不执行。while(arr90){document.write(‘现有数量’ arr)arr}3. do-while 循环先执行后判断特点最少执行一次适合弹窗校验、倒计时、接口分页等场景。do{document.write(‘数量’ arr “” )arr}while(arr35)六、循环跳出语句break continue用于精准控制循环避免无效遍历提升代码性能。break终止整个循环找到目标条件后直接结束所有循环不再执行。for(let i 0; i 20; i){if(i 19){break; // 直接跳出整个循环}console.log(‘数量’i)}continue跳过本次循环只跳过当前这一次遍历后续循环继续执行用于过滤无效数据。for (let i 0; i 20; i) {if (i 10) {continue; // 跳过i10这一次继续下一次}console.log(‘数量’ i)}七、完整可运行整合案例将以上所有知识点整合可直接复制到本地运行直观看到所有效果JS基础全套实战案例测试文本内容修改文字颜色 隐藏内容 显示内容script // 1. 修改文本 // document.getElementsByClassName(con)[0].innerHTML你好 // document.getElementsByClassName(con)[0].innerHTMLnew Date() // 2. 修改颜色 function Change() { document.getElementsByClassName(con)[0].style.color blue; } // 隐藏元素 function Hidebutton() { document.getElementsByClassName(con)[0].style.display none } // 显示元素 function showbutton() { document.getElementsByClassName(con)[0].style.display block } // 3. 页面点击换色 document.addEventListener(click,myFunc); function myFunc(){ document.body.style.backgroundColorcoral } // 4. 实时时钟 let interst setInterval(turnovertime, 1000) function turnovertime() { let date new Date(); let letme document.getElementsByClassName(schedule)[0] letme.innerHTML date.getHours() : date.getMinutes() : date.getSeconds(); } // 5. 基础运算、判断、循环可在控制台调试 /script八、学习总结 这篇笔记覆盖了 JS 入门 80% 的核心基础 - DOM 操作改文本、改样式、控制元素显隐、页面事件 - 定时器实现动态时钟、自动执行效果 - 数据类型、全套运算符代码运算与判断基础 - 三大流程控制if 判断、while/do-while 循环、break/continue 跳出 所有前端进阶知识AJAX、框架、算法都是基于这些基础延伸吃透这些才算真正入门 JavaScript
