js学习

　　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('诞生');
    }
}