文章目录
三、JavaScript 基础语法
1.引入方法
1.行内式
<input type="button" onlick="alert('qiuxiang')"></input>
用单引号
2.内嵌式
<script>
alert('qiuxiang')；
</script>
3.引入式
<script srt="my.js"></script>
标签中间不要写代码，文件后缀.js
单行注释：ctrl + /
多行注释：ctrl + shift + /
2.输出输入
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台，想要输出多个值用逗号隔开
- 使用 console.dir() 打印出对象，更好查看属性和方法
- prompt（提示词）浏览器弹出输入框，用户可以输入
3.变量
3.1 声明：多个变量逗号隔开，只用一个var
var age = 18,
address = ‘火影村’，
gz = 2000;
3.2 变量命名规范
- 由字母（A-Z a-z）数字（0~9）下划线（_）美元符号（$）组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字、保留字。var for while
- 遵循 驼峰命名法 ，首单词字母小写，后面单词首字母大写，myFirstName
4.数据类型
JS变量数据类型根据等号右边的值来确定
JS是动态语言，变量的数据类型是可以变化的
4.1 数字型Number
-
包含整数和小数
-
程序里面数字以 0 开头就是八进制（比如 010 就是 8 ）
-
程序里面数字以 0x 开头就是十六进制（比如 0xa 就是 10）
-
数值最大最小值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
-
三个特殊值
Infinity（无穷大）-Infinity（无穷小）NaN（no a number 代表非数值）
-
isNaN（）用于判断是不是数字，是数字则返回 false，不是数字返回 true
4.2 字符串型 String
字符串型可以是引号中任意文本，语法为双引号 “” 和单引号 ‘’ (推荐单引号，因为HTML中的属性使用双引号)
如果字符中需要用到引号，则采用外双内单，外单内双
| 转义符 | 解释 |
|---|---|
| \n | 换行符 |
| \\ | 斜杠 |
| \’ | 单引号 |
| \" | 双引号 |
| \t | tab缩进 |
| \b | 空格 |
4.2.1 length检测获取字符串长度
console.log(a.length);
4.2.2 字符串拼接：数值相加，字符相连
多个字符串间可用 + 拼接，拼接方式：字符串 + 任何类型 = 拼接之后的新字符串
我们变量不要写到字符串里面，是通过和字符串相连的方式实现
var num = 1;
console.log(‘南’+ num +‘师兄’); 口诀：引引加加
4.3 布尔型 Boolean
布尔型有两个值，true（1） 和 false（0）
4.4 undefined 未定义数据类型
var variable = undefined;
console.log(variable + ‘nihao’); //undefinednihao
console.log(variable + 12); // NaN
4.5 null 空
var space = null;
console.log(space + ‘nanyi’);//spacenanyi
console.log(space + 1);//1
4.6 获取变量数据类型
console.log(typeof num); // number、string、undefined、object
控制台颜色：蓝色（数字型）黑色（字符型）深蓝色（布尔型）浅灰色（undefined，null）
4.7 数据类型转换
使用表单、prompt获取过来的数据是字符型
4.7.1 数字转换为字符串
1. toString()
var num = 10;
var str = num.toString();
console.log(typeof str);
2.String()
console.log(String(num));
3.加号拼接字符串 隐式转换（重点）
4.7.2 转换为数字型
1. parseInt(变量) 字符型转换为数字型 得到整数，会去掉数字后面的单位
var age = prompt('请输入您的年龄');
console.log(parseInt(age));
console.log(parseInt('3.14')); //3
console.log(parseInt('3.92')); //3
console.log(parseInt('120px')); //120
console.log(parseInt('rem120px')); //NaN
2. parseFloat(变量)
console.log(parseInt('3.14')); //3.14
3. Number(变量)
4. 利用算术运算 - * / 隐式转换
console.log('12'-'1'); //11
4.7.3 转换为布尔型 Boolean
除这五种情况外，其他都为true
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
5.运算符
5.1算术运算符 + - * / %
console.log(0.1 + 0.2); //0.30000000000000004
不要判断两个浮点数是否相等
5.2 递增运算符
前置运算符：++a 先加一，后返回值
后置运算符：a++ 先返回原值，后加一
var a = 10;
++a;
var b = ++a +2;
console.log(b); //14
var c = 10;
c++;
var d = c++ + 2;
console.log(d); //13
var e = 10;
var f = e++ + ++e;
console.log(f); //22
5.3 比较运算符 > < >= <= == != === !==
== 和 === 的区别：=为全等，要求等号两端 值 和 数据类型 完全一致， 判断值是否相等
5.4 逻辑运算符 && || ！
逻辑中断：&&前面如果为 0，则不再进行下一步运算，如果第一个为真则返回第一个值（前提运算结果为真）
||前面如果为 1，则不再进行下一步运算，如果第一个为 0 则返回第二个值（前提运算结果为真）
5.5 赋值运算符 = += -= *= /= %=
5.6 运算符优先级
小括号 > 一元运算符 > 算术运算符 > 关系运算符 > 相等运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符
() ++ – ! 先*/%后± > >= < <= == != === !== 先&&后|| = ,
6.流程控制
6.1 分支流程控制if语句
语法
if(条件表达式){
执行语句
}else if(条件2){
语句2
}else{
语句3
}
6.2 三元表达式
条件表达式 ？ 表达式1 ：表达式2
条件表达式结果为真，返回表达式1的值，结果为假返回表达式2的值
6.3 switch分支语句
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
default:
执行最后的语句;
}
注意：
- 表达式的值和 case 的值相匹配的时候是 全等 必须值和数据类型一致才可以 ===
- 如果当前case 里面没有break，则不会退出switch，继续执行下一个case
6.4 switch 和 if else if 区别
- switch用于确定值，if else 用于范围
- 分支多时，switch效率高，而且结构清晰，因为switch是进行判断后直接执行对应的语句，if else 得判断多次
- 分支少时，if else 效率高
6.5 循环
6.5.1 for循环
语法：for（初始化变量 ; 条件表达式 ; 操作表达式）{}
断点调试：F12–>sources–>找到需要调试的文件–>在程序某一行点击设置断点（设置断点后要刷新）
可以用watch监视变量值的变化（点 + 添加变量）或者将鼠标放在变量上，会浮现变量当下的值
可以 F11 单步执行，或者点击右边向下的箭头也可以单步执行
6.5.2 while循环（可以做条件复杂的判断）
while(条件表达式){循环体}
注意：需要有一个结束条件
6.5.3 do-while循环
do{
循环体
}while(条件表达式)
与 while 区别，do-while 至少会执行一次循环体
6.6 continue
continnue用于立即跳出本次循环继续下一次循环
6.7 break
退出整个循环
7.命名规范及语法格式
7.1 标识符命名规范
- 变量名称用名词
- 函数名称用动词
8.数组
8.1 创建数组
8.1.1 利用 new 创建数组
var 数组名 = new Array();
var arr = new Array();
8.1.2 利用数组字面量创建数组
var arr = [1,2,'南一',true];
逗号分隔，括号里的内容称为数组元素
数组长度：数组名.length
8.2 数组新增元素
8.2.1 通过修改 length 长度新增数组元素
var arr = ['nan','yi','shi','xiong'];
arr.length = 7;
新增的元素默认值时undefined
8.2.2 修改索引号
var arr = ['nan','yi','shi','xiong'];
arr[4] = 'pink';
追加元素，如果索引号被占用了，修改后元素被修改，如果索引号没被使用，那么就是追加元素
不能直接给数组名赋值，否则会覆盖以前的数据
8.2.3 案例筛选数组
var arr = [2,6,1,77,52,25,7];
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(arr[i] >= 10){
// 建立一个空数组，让索引号等于数组长度，自动开拓一个新空元素
newArr[newArr.length] = arr[i];
}
}
2，6，1，77，52，25，7
2，1，6，52，25，7，77
1，2，6，25，7，52，77
1，2，6，7，25，52，77
9.函数
概念：函数就是封装了一段可以被重复执行调用的代码块
9.1 函数使用
9.1.1 声明函数
- 函数关键字命名
function 函数名(){
函数体（函数体不要有输出语句）
}
函数名一般是动词
- 函数表达式
var 变量名 = function() {};
函数没有名字
9.1.2 调用函数
函数名 ( ) ; 一定要加小括号
9.2 函数的参数
function 函数名(形参1，形参2...){}
函数名(实参1，实参2...);
9.3 函数返回值
return 退出循环 终止函数 并且只能返回一个值（返回多个值可以用数组）
function getArrMax(arr){
var max = 0;
for(var i = 0; i < arr.length; i++){
if(max < arr[i]){
max = arr[i];
}
}
return max;
}
var arr = [2,6,1,77,52,25,7]
console.log(getArrMax(arr));
如果函数没有 return 则返回 undefined
9.4 arguments 伪数组
当不确定有多少个参数传递时，使用argements来获取，argements 相当于当前函数的内置对象，所有函数都内置一个 argements 对象，argements 对象中存储了传递的所有实参（只有函数有 arguments 内置对象）
/ 伪数组不是真正意义上的数组 /
- 具有数组 length 属性
- 按索引的方式进行存储
- 没有真正数组的一些方法 pop() push() 等等
10.作用域
10.1 概念
- JavaScript作用域：就是变量名字在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突
- js作用域（es6）之前：全局作用域 局部作用域
- 全局作用域：整个 script 标签或者是一个单独的 js 文件
- 局部作用域（函数作用域）：在函数内部就是局部作用域 这个代码名字只在函数内部其效果和作用
10.2 全局变量 和 局部变量
- 全局变量：全局作用域下的变量
- 局部变量：局部作用域下的变量
- 全局变量只有浏览器关闭时才会销毁，比较占内存空间
- 局部变量 当我们程序执行完毕就会销毁 节约内存空间
四、JS HTML DOM
DOM 文档对象模型 HTML标准编程接口
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
document 文档的意思，一个页面就是一个文档
1.获取元素
1.1 getElementById(‘id’)根据 id获取元素（中间没s）
基础语法：document.getElementById(‘id’)
- 因为文档从上往下加载，所以得先有标签 所以我们script写到标签下面
- get 获得 element 元素 by 通过 驼峰命名法
- 参数 id 是一个大小写敏感的字符串
- 返回元素对象
1.2 getElementsByTagName(‘标签名’) 根据标签名获取（中间有s）
基础语法：document. getElementsByTagName(‘标签名’)
-
返回获取到的元素对象集合 以伪数组的形式存储
-
如果只有一个 li 返回还是伪数组形式
-
如果页面中没有这个元素 返回空伪数组
-
依次打印，采用遍历
for(var i = 0; i < lis.lenth; i++){ console.log(lis[i]); }
var ol = document.getElementById(‘ol’);
console.log(ol.getElementsByTagName(‘li’));
1.3 getElementsByClassName(‘类名’)
基础语法：document.getElementsByClassName(‘类名’)
1.4 querySelector返回指定选择器第一个元素对象
基础语法：document.querySelector(’#ol’) 注意：#ol .nav li
1.5 querySelectorAll返回指定选择器所有元素对象集合
基础语法：document.querySelectorAll(’.box’) 注意：.box #ol li
1.6 获取 body 和 html 标签
1.6.1 document.body 返回body元素对象
1.6.2 document.documentElement 返回html元素对象
2.事件基础（事件三要素）
事件源：事件被触发对象，谁，比如：按钮
事件类型：怎么触发，比如鼠标点击(onclick)，鼠标经过
事件处理程序：通过函数赋值方式完成
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个按键被松开时触发 |
| onkeydown | 某个按键被按下时触发 |
| onkeypress | 某个按键被按下时触发 但它不识别功能键ctrl shift Alt 箭头 |
执行顺序keydowm keypress keyup，addEventListener不需要加on
3.操作元素。
3.1 改变元素内容（普通盒子可用，标签里的内容修改可用）
element.innerText 不识别HTML标签 非标准 去除空格和换行
element.innerHTML 识别HTML标签 W3C标准 保留空格和换行
这两个属性可读写 可以获取元素里面的内容
3.2 常见元素属性操作
src href id alt title 等等属性用 element.src 的格式修改
3.2 修改表单
如果要某个表单被禁用，disable：true；
type、value、checked、selected、disabled 等等表单属性用 element.type 的格式修改
3.3 修改样式属性（修改CSS）
注意：
- JS修改的样式属于行内样式，权重比CSS高
- JS里面的样式采取驼峰命名法 fontSize backgroundColor
-
使用 element.style 获得修改元素样式，仅适合样式少
-
element.className 给元素 添加 或 修改 类名（在 CSS 写好类，再用 JS 修改类名）会覆盖原有类名
要保留原有类可以 this.className = ‘first change’; 两个类一起写上
- 图片命名不要含有（） ，最好用英文和数字
3.4 自定义属性的操作（h5新规范，自定义属性以 data- 开头）
3.4.1 获取属性值
- element.属性
- element.getAttribute（‘属性’）；
- element.dataset.属性；（h5新增获取自定义属性的方法）或element.dataset[‘属性’] i11以上才适用，兼容性差
- element.dataset（获取到所有data） dataset 是一个集合里面存放了所有以data开头的自定义属性
区别：
- element.属性 获取内置属性值（元素本身自带属性）
- element.getAttribute（‘属性’）; 主要获取自定义属性 程序员自定义的属性
3.4.2 设置属性值
-
element.属性 = ‘值’ 设置内置属性
-
element.setAttribute（‘属性’，‘值’）； 主要设置自定义属性
这个值数字的话直接写，字符就加单引号
3.4.3 移除属性
removeAttribute（属性）
4.节点操作
4.1 节点层级
4.1.1 父节点
子元素.parentNode 得到最近的父节点元素（亲爸爸）
4.1.2 子节点
parentNode.firstChild
parentNode.lastChild
这两个返回所有元素节点包括文本节点
parentNode.firstElementChild 返回第一个子元素节点
parentNode.lastElementChild 返回最后一个子元素节点
兼容性问题：IE9以上才支持
3.实际开发的写法
parentNode.children[0] 即没兼容性问题，又返回元素节点
parentNode.children[ ol.children.length - 1]
4.1.3 兄弟节点（次）
node.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
node.previousSibling 上一个兄弟节点
- 兼容性问题 IE9以上支持
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
4.2 创建节点
document.createElement(‘tagName’)
4.3 添加节点
- node.appendChild(child) node父级 child子级 后面追加元素
- node.insertBefore(child，指定元素) 添加到父节点的指定子元素的前面
4.4 删除节点
- node.removeChild(child) node必须是被删除节点的父亲
4.5 复制节点
node.cloneNode()
注意：
- （）括号为空或者是false 浅拷贝 复制标签不复制里面内容
- （）括号是true 深拷贝 复制标签且复制里面内容
4.6 三种动态创建元素的区别
- document.write()
- element.innerHTML
- document.createElement()
5.注册事件（绑定事件）
5.1 addEventListener 事件监听方式（兼容性 i9 以上）
eventTarget.addEventListener ( type , listener [, useCapture] )
（1）里面的事件类型是字符串 必定加引号 而且不带on
（2）同一元素 同一事件可添加多个侦听器（事件处理程序）
eventTarget.addEventListener () 方法将指定的监听器注册到 eventTarget （目标对象）上，当该对象触发指定事件时，就会执行事件处理函数。
- type：事件类型字符串，比如click、mouseover，注意这里不要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false。
5.2 attachEvent（ i9 以前的版本支持）
eventTarget.attachEvent(eventNameWifhOn,callback)
- eventNameWifhOn：事件类型字符串，比如onclick、onmouseover，这里要带on
- callback：事件处理函数，目标触发事件回调函数被调用
6.删除事件（解绑事件）
removeEventListener(type , listener [,useCapture]);
7.DOM 事件流
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
注意：
- JS 代码中只能执行捕获获知冒泡其中一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener ( type , listener [, useCapture] ) 第三个参数如果是 true ，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认false），表示在事件冒泡阶段调用事件处理程序
- 实际开发少用事件捕获，多用事件冒泡
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
8.事件对象
侦听函数小括号里
e.target 返回的是触发事件的对象（元素）指向我们点击的那个对象
this返回的是绑定事件的对象（元素）
8.1事件对象常见属性
| 事件对象常见属性 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 ie678 使用 |
| e.type | 返回事件类型 比如click，mouseover，不带on |
| e.cancelBubble | 阻止冒泡 非标准 ie678使用 |
| e.returnValue | 该属性 阻止默认事件（默认行为） 非标准 ie678使用 比如不让链接跳转 |
| e.preventDefault() | 该方法 阻止默认事件（默认行为） 标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
8.2事件委托原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用，冒泡原理影响设置每个子节点。
五、BOM浏览器对象模型
1.BOM的构成
window：document、location、navigation、screen、history
顶级对象是window
window是JS访问浏览器窗口的一个接口
window是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法
注意：window下的特殊属性window.name
2.window常见事件
2.1窗口加载事件
window.onload = function() {}或
window.addEventListener("load",function(){}) (推荐)
window.onload是窗口加载事件，当文档内容加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用的处理函数
注意：
- 有了 window.onload 就可以把JS代码写到页面元素上方，因为 onload 是等页面内容全部加载完毕，再执行处理函数
- window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准
- 如果用 addEventListener 则没有限制
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 是DOM加载完毕，不包含图片 falsh css 等就可以执行，加载速度比 load 更快
2.2 调整窗口事件
window.onresize = function(){}
window.addEventListener("resize",function(){})
注意：
- 窗口大小发生变化，就会出发事件
- 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕宽度
2.3 定时器
2.3.1 setTimeout() 定时器
window.setTimeout(function(){},2000)
只调用一次函数
- window在调用时可以省略
- 延时时间单位是毫秒，可以省略，省略即为0
- 函数可以直接写，也可调用
- 给定时器取名字（赋标识符）
- setTimeout() 是回调函数
2.3.2 停止setTimeout() 定时器
window.clearTimeout(定时器名字);
- window可以省略
- 里面参数就是定时器的标识符
2.3.3 setInterval() 定时器
window.setInterval(回调函数，间隔毫秒数);
setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
- window在调用时可以省略
- 延时时间单位是毫秒，可以省略，省略即为0
- 函数可以直接写，也可调用
- 给定时器取名字（赋标识符）
1320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
