JavaScript

### 数据类型

• 变量：var n;

// 局部变量
'use strict';
let i = 1
// 全局变量

• number: jsp 不区分小数和整数
• 字符串

console.log('a')
let msg = `hello 
            world`;
let age = 3;
// 拼接
let msg = 'hello ${msg}';
console.log(msg);
// 不可变
let s = "abc";
console.log(s.length);
// 大小写转换
s.toUpperCase();
s.toLowerCase(); 
// 获取下标
s.indexOf('c');
// 子串
s.substring(1, 3);

• 布尔值
• 逻辑运算： && || ！
• 比较运算：= == ===
  NaN===NaN -> false
• null undefined
• 数组：可以是不同类型数据

注：给arr.length赋值，数组大小会发生变化

// 截取
arr.slice(1, 2);

// push
arr.push(1);
arr.pop();

arr.unshift() // 压到头部
arr.shift() // 弹出头部

arr.sort();
arr.reverse();

for (let v of arr) {
    // ...
}
// concat(): 没修改原数组，返回新数组
arr.concat([1, 2]);

// join: 字符串拼接

• 对象

var 对象名 = {
    属性名： 属性值,
    属性名： 属性值,
    属性名： 属性值
} 

// 删除属性
delete 对象名.属性名
// 添加， 直接添加赋值即可

// 判断属性 ... in ...

• for

var age = [1, 2, 3, 4];
age.forEach(function (value) {
    // ...
});

for(var num in age) {
    // ...
}

• Map

var map = new Map([['tom', 100], ['jack', 20]]);
var s = map.get('jack');
map.set('ad', 12);
map.delete('tom');

• Set: 无序不重复集合

var set = new Set([1, 1, 2, 3]);
set.add(2);
set.has(3);

• Iterator

// 遍历map
for (let x of map) {
    // ...
}

// 遍历set
for (let x of set) {
    // ... 
}

函数

• 可以传任意个参数
• 可手动抛出异常

function ...(...) {

    return ...
}

• argument代表传递进来的所有参数是一个数组
• rest：获取除了已经定义的参数之外的所有参数， rest参数只能写在最后面，用...标识

function a(x, ...rest) {
    console.log(rest);
}

变量的作用域

• 在函数体中定义的变量不能在函数体之外使用
• 两个函数中使用相同变量名，不冲突
• 内部函数可以访问外部函数的成员，反之不可以
• 内外部函数变量重名，函数先从自身查找变量名，如果找到，则屏蔽外部变量
• alert()本身也是个window的变量
• 仅有一个全局作用域，任何变量假设没有在函数作用域内找到，会向外查找，如果没找到，报错。
• 减少冲突：把自己的代码放入自己定义的唯一空间内。

var myspace = {};
myspace.name = '...';
myspace.add = function(a, b) {
    // ...
}

• 局部作用域：let,解决局部作用域冲突问题

• 常量：const

• 方法

var myClass {
    name: '...',
    birth: 0,
    age: function() {
        return 0;
    }
}
myClass.name
myClass.age();

• this 默认指向调用它的对象
• apply: 可以控制this的指向

var myClass {
    name: '...',
    birth: 0,
    age: function() {
        return 0;
    }
}
myClass.name
myClass.age();
getAge.apply(myClass, []);

内部对象

Date

var now = new Date();
now.getFullYear();
now.getMonth();
now.getDate();
// 获取星期
now.getDay();
now.getHours();

Json

• 格式：对象{}， 数组[], 键值对key:value
• JSON 和js对象转换:

// obj -> json
JSON.stringify(...);
// json -> obj
JSON.parse('');

面向对象编程: 原型对象

var user = {
    name: "zcs",
    age: 3,
    run: function() {
        console.log(this.name + "running .");
    }
};

var zz = {
    name: "zz";
};

// 原型是user
zz.__proto = user;
zz.run();

• class继承: ES6引入

class student {
    constructor(name) {
        this.name = name;
    }
    hello() {}
}

class researcher extends student {
    constructor(name, achievement) {
        super(name);
        this.achievement = achievement;
    };
    showAchievement() {}
}
var zz = new student("zz");

• 原型链：自定义 -> Object -> Object

操作BOM对象：浏览器对象模型

• window: 代表浏览器窗口
• Navigator： 封装了浏览器的信息
• screen：代表屏幕尺寸
• location: 当前页面url信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新
location.assign('...') // 设置新的地址

• document：当前页面

操作DOM对象：浏览器网页是一个DOM树形结构

获取DOM节点

// 对应css选择器
document.getElementsByTagName('');
document.getElementsById('');
document.getElementsByClassName('');

更新DOM节点: 操作文本、js

id1.innerText='';
id1.innerHTML='';
id1.style.color='red';

删除DOM节点

• 先获取父节点，再删除父节点下所有子节点
• 删除过程中，children节点时刻在变化

father.remove(p1);

插入节点

• 获得空dom节点，通过innerHTML
• 通过追加节点

ver elem = document.getElementById('');
ver list = document.getElementById('');
list.append(elem);

创建新节点

var nw = document.createElement('');
nw.id = '';
nw.innerText = '';
list.append(nw);

var myScript = document.createElement('');
// 创建一个标签节点， 通过键值对传递参数
myScript.setAttribute('','');

• insert

// 在b之前插入a
list.insertBefore('a','b');

操作表单

<form action="#" method="post">
    <span>用户名：</span><input type="text" id="username">
    <span>性别：</span><input type="radio" id="sex">
</form>

<script>
    var input_text = document.getElementById('username');
    input_text.value;
    input_text = '123';
    var b = document.getElementById('sex');
    var g = document.getElementById('sex');
    if(b.checked) console.log("boy");
    else console.log("girl");
</script>

• 提交表单

<!-- 表单绑定提交事件 -->
<!-- onsubmit=绑定一个提交检测的函数 true false -->
<!-- 将结果返回给表单使用onsubmit接收 -->
<form action="#" method="post" onsubmit="returna()">
    <span>用户名：</span><input type="text" id="username" name="username">
    <span>密码：</span><input type="text" id="password" name="password">
    <!-- 绑定事件 -->
    <button type="button" onclick="a()">提交</button>
</form>

<script>
    function a() {
        var username = document.getElementById("username");
        console.log(username.value);
        var password = document.getElementById("password");
        // md5 加密算法
        password.md5(password);
        console.log(password.value);
    }
</script>

jQuery

• CDN 引入
• 公式：$(select).action()

$('#id').click(function() {
    // ...
})

• 选择器： css中的所有都有

// 标签
$('p').click();
// ID选择器
$('#id').click();
// 类选择器
$('.class').click();

• 事件：鼠标、键盘...

// 网页加载完毕，响应事件
$(function() {
// ...
});

• 操作DOM

$('#id li[name=python]').text();
$('#id li[name=python]').text('');
$('#id li[name=python]').html();
$('#id li[name=python]').html('');

// css操作
$('#id li[name=python]').css({"", ""});