js特性js是弱类型(动态类型)语言在声明变量时无需指定类型且在运行时可赋值为任意类型不自带样式不会直接影响页面的样式、布局、排版;js功能强大能做很多事情操作页面,操作浏览器计算逻辑数据处理读写文件发网络请求写后端服务Node.js;移动端app;嵌入式游戏开发脚本自动化等等1.js操作页面与浏览器 DOM和BOM的根都是window对象1.1.DOM文档对象模型(Document Object Model),浏览器把html转化成js能看懂的对象树dom;js通过dom提供的api操作网页内容HTML 里的 div、文字、样式BOM浏览器对象模型(Browser Object Model),操作浏览器窗口跳转、刷新、地址栏、弹窗、历史、存储;原理同上DOM常见操作找元素querySelector、getElementById改内容innerHTML、textContent改样式style.color、style.width改属性src、href、class加事件onclick、addEventListener增删元素createElement、appendChild、remove例子document.querySelector(.box).style.width 500px;//找到页面上classbox的元素把它的宽度改成500pxdocument.body.innerHTML div新内容/div; //把网页body里原来的所有内容清空替换成新的HTML结构1.2.BOM常见操作弹窗相关alert(提示)confirm(确定吗)prompt(输入内容)页面跳转刷新// 跳转到别的页面location.href https://www.baidu.com// 刷新页面location.reload() //location就是bom对象浏览器历史history.back() // 返回上一页history.forward() // 前进一页定时器setTimeout(() {}, 1000)setInterval(() {}, 1000)窗口大小滚动window.innerWidth // 窗口宽度window.scrollY // 滚动距离window.scrollTo(0, 0) // 滚到顶部本地存储localStorage.setItem(name, 张三)sessionStoragelocation、setTimeout、localStorage、alert、history都属于bom提供的对象2.网络请求发展历史方案本质出现时间地位XMLHttpRequest(XHR)AJAX 原生底层1999祖师爷jQuery.ajax封装 XHR2006曾经的王者fetch浏览器原生新 API2015原生替代方案axios封装 XHR Promise2016现在行业标准现在用的最多的就是axios一个专门用于http网络请求的js库,基于XMLHttpRequestPromise风格统一用 .then() / .catch()链式清晰4xx/5xx 自动 reject支持请求 / 响应拦截器支持取消请求、超时、上传进度随着Vue、React流行axios彻底取代jQuery.ajax常见的js库jQuery,axioslodash,moment/dayjs,vue,reactjQuery:是一个非常经典老牌的js库用更少代码更方便地操作DOM和做AJAX请求主要解决两大痛点抹平浏览器差异简化DOM操作、事件、动画、AJAX请求后来 Vue、React 出现大家不再大量操作 DOMjQuery 就慢慢退出主流lodash:标准实用的js工具类库更轻松地处理数组、对象、字符串等常见数据结构进行深拷贝数组去重防抖节流安全取值遍历、过滤、分组等操作项目结构assets目录 项目本身的静态资源核心项目自己的、必须的、框架自带的全部放这里。里面一般有assets/js/ 核心 JSjquery、bootstrap、模板主 JSassets/css/ 核心样式assets/img/ 系统图片assets/fonts/字体图标misc目录 杂项、工具、第三方插件非核心misc/js/前端框架BootstrapBootstrap是一个j基于html,css,js开发的前端开源框架支持开发者快速构建网站界面框架包含导航条分页等组件及13个jQuery插件基本结构Bootstrap提供了一个带有网格系统链接样式背景的基本结构。CSS提供了全局的CSS设置定义了基本的html元素样式可扩展的class以及一个先进的网格系统组件Bootstrap 包含了十几个可重用的组件用于创建图像、下拉菜单、导航、警告框、弹出框等等。组件由一套可复用的代码由html元素配套cssjs组成js插件Bootstrap自带了13个jQuery插件这些插件为Bootstrap中的组件赋予了“生命”。其中包括模式对话框、标签页、滚动条、弹出框等。