JS基础操作
一、分支结构
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.执行逻辑 ① ②④③ ... ②④③ ②， 入口为①，出口为②， ②④③个数为[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 in 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: 页面加载完毕事件， 只附属于window对象
onclick: 鼠标点击时间
onmouseover: 鼠标悬浮事件
onmouseout: 鼠标移开事件
六、 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.getArribute('background-color'); 页面元素对象.currentStyle.backgroundColor; // 1.页面元素对象由JS选择器获取 // 2.伪类没有的情况下用null填充 // 3.计算后样式为只读 // 4.该方式依旧可以获取行间式样式 （获取逻辑最后的样式）
结合css操作样式
页面元素对象.className = ""; // 清除类名 页面元素对象.className = "类名"; //设置类名 页面元素对象.className += "类名"; // 添加类名
八、事件的两种绑定方式
1、on事件绑定方式
document.onclick = function() { console.log("文档点击"); } // on事件只能绑定一个方式，重复绑定保留最后一次绑定的方法
document.onclick = function() { console.log("文档点击"); } // 事件的移除 document.onclick = null;
2、非on事件绑定方式
document.addEventListener('click', function() { console.log('点击1'); }) document.addEventListener('click', function() { console.log('点击2')； }) // 非on事件可以同时绑定多个方法，被绑定的方法依次被执行 // addEventListener第三个参数(true|false)决定冒泡的方式
function fn() {} document.addEventListener('click', fn); // 事件的移除 document.removeEventListener('click', fn);
九、事件参数event
存放事件信息的回调参数
十、事件的冒泡与默认事件
事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会触发父级的点击事件
<body id = "body"> <div id = "sup"> <div id = "sub"></div> </div> </body> <sript> sub.onclick = function(ev) { // 方式一 ev.stopPropagation(); console.log("sub click"); } sup.onclick = function (ev) { // 方式二 ev.cancelBubble = true; console.log("sup click"); } body.onclick = function (ev) { console.log("sup click") } </script>
默认事件：取消默认的事件动作，如鼠标右键菜单
<body id="body"> <div id="sup"> <div id="sub"></div> </div> </body> <script> sub.oncontextmenu = function (ev) { // 方式一 ev.preventDefault(); console.log("sub menu click"); } sup.oncontextmenu = function (ev) { console.log("sup menu click"); // 方式二 return false; } body.oncontextmenu = function (ev) { console.log("body menu click"); } </script>
十一、鼠标事件
onclick: 鼠标点击
ondblclick: 鼠标双击
onmousedown: 鼠标按下
onmousemove: 鼠标移动
onmouseup: 鼠标抬起
onmouseover: 鼠标悬浮
onmouseout: 鼠标移开
oncontextmenu: 鼠标右键
事件参数ev
ev.clientX: 点击点x坐标
ev.clientY: 点击点Y坐标
十二、键盘事件
onkeydown: 键盘按下
onkeyup: 键盘抬起
事件参数ev
ev.keyCode: 按键编号
ev.altKey: alt特殊按键
ev.ctrlkey: ctrl特殊按键
ev.shiftKey: shift特殊按键
十三、表单事件
onfocus: 获取焦点
onblur: 失去焦点
onselect: 文本被选中
oninput: 值改变
onchange: 值改变，且需要在失去焦点后才能触发
onsubmit: 表单默认提交事件
十四、文档事件
文档事件由window调用
onload: 页面加载成功
onbeforeunload: 页面退出或刷新警告，需要设置回调函数返回值，返回值随意
十五、图片事件
onerror: 图片加载失败
十六、页面事件
onscroll: 页面滚动
onresize: 页面尺寸调整
window.scrollY:页面下滚距离
十七、函数高级
闭包
function outer() { var data = {} function inner() { return data; } return inner; } // 闭包目的： 不允许提升变量作用域时，该函数的局部变量需要被其他函数使用 // 闭包本质： 函数的嵌套，内层函数称之为闭包 // 闭包的解决案例： 1.影响局部变量的生命周期，持久化局部变量；2.解决变量污染
十八、循环绑定
.html 文件
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
.js文件 var lis = document.querySelector('li'); for (var i = 0; i < lis.length; i++) { lis[i].onclick = function () { //打印列表项的索引 console.log(i); } ] //变量污染 //获取局部作用域解决 //闭包解决 //对象属性解决
十九、面向对象JS
1、属性与方法
var obj = {}; | var obj = new Object(); // 属性 obj.prop = ""; // 方法 obj.func = function () {} // 删除属性与方法 delete obj.prop delete obj.func
2、类字典结构使用
结构
var dict = {name: "zero",age:18}
拓展
var dict = {"my-name":"zero",fn:function () {},fun() {}}
使用
dict.name | dict["my-name"] | dict.fn()
3、构造函数 （ES5）
function People(name,age) { this.name = name; this.age = age; this.eat = function() { return 'eat'; } }
4、类及集成（ES6）
class People { // 构造器 constructor (name, age) { this.name = name; this.age = age; } // 实例方法 eat () { console.log('吃吃吃'); } // 类方法 static create () { console.log('诞生'); } }