08DOM相关概念叙述
何处使用script标签 <head>标签里 需要注意的是：浏览器是自上到下解析的。因此，如果涉及到包含获取页面元素的内容, 导致失败。解决方案如下： 123456<script> // 表示HTML页面加载完毕后, 做什么 window.onload = function () { // 所有的javascript代码编写在这里 }</script> 写在<body>元素的最下方 1234<body> <!-- 将<script>元素放置在相关HTML元素的后面, 或者<body>元素内的最后 --> <script></script></body> 什么是DOM DOM是个缩写，全称是 Document Object Model，被译为文档对象模型。 D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象。 O表示Object，就是DOM将HTML页面 ...
07JavaScript引用类型
引用类型 在JavaScript中，变量是某个对象的属性，函数是某个对象的方法 在浏览器环境里面，定义的全局变量就是window对象的属性 引用类型的分类 引用类型 描述 Date 类型 获取和设置当前日期时间 Math 类型 用于数学计算 Global 类型 全局对象，提供全局属性和全局方法 Array 类型 用于有序的存储多个值 RegExp 类型 用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具 Error 类型 用于匹配代码错误并提供对应提示内容 Function 类型 用于定义 JavaScript 中的函数 Object 类型 用于定义 JavaScript 中的对象 Date类型 创建一个Date类型的对象 123var date1 = new Date()var date2 = new Datevar date3 = Date() Date提供now()方法，可以得到一个从 1970 年1月1日 00:00:00 至当前系统时间的毫秒数值。 Date类型初始化时间也可以指定日期，语法 1var dat ...
06JavaScript作用域与对象
变量作用域 12345678910// 声明全局变量 - 全局作用域var msg = 100;// 声明局部变量 - 某个函数作用域function fn() { // 局部变量 - 只能在当前函数作用域中访问 var msg2 = 200; console.log(msg2,msg);}fn()console.log(msg) 变量提升 1234// 先调用后声明console.log(msg); //打印undefinedvar msg = 100;console.log(msg); //打印100 以上代码会先输出undefined然后输出100 。约等于以下写法 1234var msg;console.log(msg);msg=100;console.log(msg); 所以变量提升也就是变量的声明被提升了 即使我们在定义这个函数之前调用它，函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。 JavaScript 仅提升声明，而不提升初始化。如果你先使用的变量，再声明并初始化它，变量的值将是 undefined。变 ...
05JavaScript函数
函数声明 12345678// 函数声明方式function name() { // code}// 函数表达方式var name = function () { // code}; 函数与变量同名时的问题 使用函数声明方式时 变量会覆盖函数，与顺序无关 12345678var fn = "message";function fn() { return 100;}console.log(fn); //输出messagefn();//报错 TypeError: fn is not a function 使用函数表达式方式时 函数会覆盖变量（变量先声明，函数后声明），与顺序有关。 简单来说就是变量的重复声明 1234567var fn = "message";var fn = function () { return 100;};console.log(fn); //输出 [Function: fn] 所以我们的得出结论： 函数的声明方式和函数的 ...
04JavaScript数组
数组 数组的定义 常见的数组有三种：索引数组、关联数组、稀疏数组。 其中只有索引数组在官方文档中提及，后两种均未提及。 索引数组:索引值为数字得数组 12var arr1 = [1, 2, 3, 4, 5];console.log(arr1[0]); // 通过索引访问 关联数组（对象替代）:索引值为字符串得数组 1234var arr2 = new Array();arr2["name"] = "lilei";arr2["age"] = 18;console.log(arr2); 稀疏数组：数组长度与数组元素个数不一致 1234var arr3 = new Array();arr3[15] = 100;arr3[34] = 200;console.log(arr3); 以上三种数组的长度 12345678console.log("arr1的长度：", arr1.length);console.log("arr2的长度：", arr2.length);console. ...
03JavaScript运算符
基本运算 基本运算包括加减乘除。 当数字与任意字符串都相加时相当于字符串拼接 1234console.log(100 + "100");//结果为 100100console.log(100 + "test");//结果为 100test 当数字与一个字符串类型的数字相减时就返回正确的结果，与非数字的字符串相见返回NAN 1234console.log(100 - "10");//结果为 90console.log(100 - "test");//结果为NaN 乘法、除法与减法类似。 12345678console.log(100 * "test");//结果为 NaNconsole.log(100 * "10");//结果为 1000console.log(100 / "test");//结果为 NaNconsole.log(100 / "10");//结果为 10 由此可以得到：加法运算时，无论字符串是什么 ...
02JavaScript基础语法部分
包装类型 在JavaScript语言中，原始类型与包装类型创建的数据在使用上没有任何差异 定义变量的两种方式 1234// 直接/字面量 量方式定义var bool = true;//构造函数方式var Bool = new Boolean(true); 创建对象的语法格式 new 构造函数(); 例如var Bool = new Boolean(true);表示创建一个值为true的变量Bool 三种包装类型分别是 布尔类型、数字类型、字符串类类型 123var Bool = new Boolean(true);var Num = new Number(100);var Str = new String("this is message"); 判断包装类型不能使用typeof而是使用instanceof 。语法结构变量名/对象名 instanceof 构造函数/数据类型 1console.log(Str instanceof String); 特殊类型 undefined 得到undefined这个值的情况 声明变量但未初始化值时。 12var ms ...
01安装nvm及js基础语法
nvm的安装（Windows） 下载地址：https://github.com/coreybutler/nvm-windows/releases nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置 nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。 下载完成(安装版)后双击就可以进行安装了。 安装-同意协议 选择nvm安装的路径(路径最好不要出现中文字符) 选择nodejs路径 确认安装即可。 打开cmd，输入命令nvm则可看到信息。 【此项为可选】设置淘宝镜像源 因为nvm默认实在官方去下载，而官方在国外 因此会导致国内经常下载不了等问题。因此这一步我们将默认源改为淘宝的。 在安装(nvm)目录下找到一个叫settings.txt文件，打开后加上下面两行内容即可。 12node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/ nvm的基 ...
前端课程——弹性盒子模型
弹性盒子模型 什么是弹性盒子模型 CSS3 新增了弹性盒子模型（Flexible Box 或 FlexBox），是一种新的用于在 HTML 页面实现布局的方式。使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸 ...
前端课程——动画
动画 什么是动画 CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分： 用于定义动画的样式规则 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式，CSS3 新增的animation属性具有以下三个优点: 能够非常容易地创建简单动画，甚至不需要掌握JavaScript。 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。 定义动画序列 @keyframes声明动画 通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。 123@keyframes <keyframes-name>{ <keyframe-block-list>} keyframes-name 用于设置当前动画的名称，以便通过animation-name属性调用。 keyframe-bloc ...
