一, 分支结构
1,if 语句
if 基础语法
if (条件表达式) {
代码块;
- }
- // 当条件表达式结果为 true, 会执行代码块; 反之不执行
- // 条件表达式可以为普通表达式
- // 0,undefined,null,"",NaN 为假, 其他均为真
if 复杂语法
- // 1. 双分支
- if (表达式 1) {
代码块 1;
} else {
代码块 2;
- }
- // 2. 多分支
- if (表达式 1) {
- } else if (表达式 2) {
- }
- ...
- else if (表达式 2) {
- } else {
- }
if 嵌套
- if (表达式 1) {
- if (表达式 2) {
- }...
- }...
2,switch 语句
switch (表达式) {
case 值 1: 代码块 1; break;
case 值 2: 代码块 2; break;
default: 代码块 3;
- }
- // 1. 表达式可以为 整数表达式 或 字符串表达式
- // 2. 值可以为 整数 或 字符串
- // 3.break 可以省略
- // 4.default 为默认代码块, 需要出现在所有 case 最下方, 在所有 case 均未被匹配时执行
二, 循环结构
1,for 循环
for (循环变量1; 条件表达式2; 循环变量增量3) {
代码块4;
- }
- // 1. 循环变量可以在外, 在内声明
- // 2. 执行逻辑 1 243 ... 243 2, 入口为1, 出口为2,243个数为[0, n]
2,while 循环
while (条件表达式) {
代码块;
}
3,do...while 循环
do {
代码块;
} while (条件表达式);
4,for...in 循环
- obj = {"name": "zero", "age": 8}
- for (k in obj) {
- console.log(k, obj[k])
- }
- // 用于遍历对象: 遍历的结果为 key, 通过 [] 语法访问对应的 value
5,for...of 循环
- iter = ['a', 'b', 'c'];
- for (i of iter) {
- console.log(iter[i])
- }
- // 1. 用于遍历可迭代对象: 遍历结果为 index, 通过 [] 语法访问对应的 value
- // 2.ES6 新增, 可迭代对象有 字符串, 数组, Map,Set,Anguments,NodeList 等
6,break,continue 关键词
break: 结束本层循环
continue: 结束本次循环进入下一次循环
三, 异常处理
try {
易错代码块;
} catch (err) {
异常处理代码块;
} finally {
必须逻辑代码块;
- }
- // 1.err 为存储错误信息的变量
- // 2.finally 分支在异常出现与否都会被执行
- throw "自定义异常"
- // 必要的时候抛出自定义异常, 要结合对应的 try...catch 使用
四, 函数初级
1, 函数的定义
ES5
function 函数名 (参数列表) {
函数体;
}
var 函数名 = function (参数列表) {
函数体;
}
ES6
let 函数名 = (参数列表) => {
函数体;
}
匿名函数
(function (参数列表) {
函数体;
- })
- // 匿名函数需要自调用
- (function (参数列表) {
函数体;
})(参数列表);
2, 函数的调用
函数名(参数列表)
3, 函数的参数
个数不需要统一
- function fn (a, b, c) {
- console.log(a, b, c); // 100 undefined undefined
- }
- fn(100);
- function fn (a) {
- console.log(a) // 100
- }
- fn(100, 200, 300) // 200,300 被丢弃
可以任意位置具有默认值
- function fn (a, b=20, c, d=40) {
- console.log(a, b, c, d); // 100 200 300 40
- }
- fn(100, 200, 300);
通过... 语法接收多个值
- function fn (a, ...b) {
- console.log(a, b); // 100 [200 300]
- }
- fn(100, 200, 300);
- // ... 变量必须出现在参数列表最后
4, 返回值
function fn () {
return 返回值;
- }
- // 1. 可以空 return 操作, 用来结束函数
- // 2. 返回值可以为任意 JS 类型数据
- // 3. 函数最多只能拥有一个返回值, 返回多个的时候, 不报错, 只返回最后一个值
五, 事件初级
onload: 页面加载完毕事件, 只附属于 Windows 对象
onclick: 鼠标点击时间
onmouseover: 鼠标悬浮事件
onmouseout: 鼠标移开事件
onfocus: 表单元素获取焦点
onblur: 表单元素失去焦点
六, JS 选择器
1,getElement 系列
- // 1. 通过 id 名获取唯一满足条件的页面元素
- document.getElementById('id 名');
- // 该方法只能由 document 调用
- // 2, 通过 class 名获取所有满足条件的页面元素
- document.getElementsByClassName('class 名');
- // 该方法可以由 document 及任意页面元素对象调用
- // 返回值为 htmlCollection (一个类数组结果的对象, 使用方式同数组)
- // 没有匹配到任何结果返回空 HTMLCollection 对象 ([])
- // 3. 通过 tag 名获取所有满足条件的页面元素
- document.getElementsByTagName('tag 名');
- // 该方法可以由 document 及任意页面元素对象调用
- // 返回值为 HTMLCollection (一个类数组结果的对象, 使用方式同数组)
- // 没有匹配到任何结果返回空 HTMLCollection 对象 ([])
2,querySelect 系列
- // 1. 获取第一个匹配到的页面元素
- document.querySelector('CSS 语法选择器');
- // 该方法可以由 document 及任意页面对象调用
- // 2. 获取所有匹配到的页面元素
- document.querySelectorAll('css 语法选择器');
- // 该方法可以由 document 及任意页面对象调用
- // 返回值为 NodeList (一个类数组结果的对象, 使用方式同数组)
- // 没有匹配到任何结果返回空 NodeList 对象 ([])
3,id 名
可以通过 id 名直接获取对应的页面元素对象, 但是不建议使用
七, JS 操作页面内容
innerText: 普通标签内容(自身文本与所有子标签文本)
innerHTML: 包含标签在内的内容(自身文本及子标签的所有)
value: 表单标签的内容
outerHTML: 包含自身标签在内的内容(自身标签及往下的所有)
八, JS 操作页面样式
读写 style 属性 样式
- div.style.backgroundColor = 'red';
- // 1. 操作的为行间式
- // 2. 可读可写
- // 3. 具体属性名采用小驼峰命名法
只读 计算后 样式
- // eg: 背景颜色
- // 推荐
- getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color');
- // 不推荐
- getComputedStyle(页面元素对象, 伪类).backgroundColor;
- // IE9 以下
页面元素对象. currentStyle.getAttribute('background-color');
页面元素对象. currentStyle.backgroundColor;
- // 1. 页面元素对象由 JS 选择器获取
- // 2. 伪类没有的情况下用 null 填充
- // 3. 计算后样式为只读
- // 4. 该方式依旧可以获取行间式样式 (获取逻辑最后的样式)
结合 CSS 操作样式
页面元素对象. className = ""; // 清除类名
页面元素对象. className = "类名"; // 设置类名
页面元素对象. className += "类名"; // 添加类名 前面要注意加空格
- classList[add|remove|toggle] //add 添加 remove 删除 toggle 有则无, 无则有
- eg: this.classlist.toggle('active') // 如果 class 里没有 active 就加上, 有就删掉
来源: https://www.cnblogs.com/mangM/p/9794288.html