JavaScript + jQuery 知识复习总结（附超实用jQuery中文文档）

一、注意点

1. 在html中引入js文件的时候组件需要成对出现，即
   <script src=""></script>
2. JS严格区分大小写
3. JS不区分小数和整数
4. 局部变量使用let定义(es6中)
5. Js中所有的键都是字符串,值是任意对象
6. 所有变量定义都放在函数头部

二、使用严格检查模式

<script>
	'use strict' // 写在第一行
</script>

三、JavaScript 数据类型

// -------------数据类型------------------
// 数值类型
123
123.1
1.123e3
-99
NaN			// not a number,与所有的数值包括自己都不相等
			// 使用isNaN判断
Infinity	// 表示无限大
// 字符串类型
'abc'
"abc"
// 布尔类型
true
false
// 逻辑运算符
&&
||
!
// 比较运算符
=
==		// 类型不一样,值一样,也会判断为true
===		// 绝对等于
// null 和 undefined
// 数组
var arr = [1,2,3,"a",true,null];
// 对象
var person = {
	id:1,
	name:"olarian",
	age:21,
	arr:[1,"23@qq.com"]
	}
// es6新增let定义局部变量
let i = 1;

1. 字符串类型

1. 正常字符使用"或""
2. 转义字符 
   \n-换行 
   \t-tab
3. 多行字符串编写 使用 ` 就是tab上面那个键
4. 模板字符串
   let name = "ola";
   let msg = `hello,${name}`;
5. 字符串长度
   str.length
6. 字符串的可变性
   不可变
7. toUpperCase() 大写
8. toLowerCase() 小写
9. subString(,) 截取

2. 数组类型

var arr = [1,2,3,4,5,6];
var arr1 = [[1,2],[3,4],[5,6]];
1. 长度可变 给arr.length赋值,赋值过小,数据会丢失
2. arr.indexOf(2); 通过元素获取下标索引
3. arr.slice(,);截取Array的一部分,返回一个新数组
4. arr.push();尾部添加元素
5. arr.pop(); 弹出尾部元素
6. arr.unshift();头部添加元素
7. arr.shift();  弹出头部元素
8. arr.sort();排序
9. arr.reverse();元素逆序
10. arr.concat();拼接元素到尾部,返回新数组
11. arr.jion('-');打印拼接数组,使用特定字符串连接
12. arr.fill(1);把所有元素换成1,即填充

3. 对象

var person = {
	属性名:属性值,
	属性名:属性值,
	属性名:属性值 //注意最后不需要逗号
	}
1. 对象赋值
2. 使用一个不存在的对象属性,不会报错
3. 动态删减属性
4. 动态添加属性 person.sex = "男";
5. 判断属性值是否在这个对象中 age in person

//键值对,逗号隔开,最后一个不加逗号
var person = {
	id:1,
	name:"olarian",
	age:21,
	arr:[1,"23@qq.com"]
	}

4. 流程控制

1. if判断
2. while循环,避免死循环
3. forOf循环,用来遍历map和set，迭代器方法 
   for(let x of arr){
	console.log(x);
	}
4. forEach循环
   var arr = [1,2,3,4,5,6];
   arr.forEach(function(value){
   		console.log(value);
})

5. Map和Set

var map = new Map([[1,"a"],[2,"b"],[3,"c"]]);
var set = new Set([1,1,2,3,4,4]); //set可以去重

// map
1. map.get("a");
2. map.set(4,"d");
3. map.delete("a");

// set
4. set.add(5);
5. set.delete(1);
6. set.has(3);

四、函数

1. 定义函数

// 定义方式一
function f(){
		return;
	}
// 定义方式二，这是一个匿名函数，但是可以把结构赋值给f,通过f调用函数
var f = function(){

	}
// 调用函数
// JavaScript可以传任意个参数,也可以不传递参数
// 抛出异常
throw 'NaN'; 
// arguments是一个JS内置的关键字，代表传递进来的所有参数，是一个数组
// arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数
// rest ES6引入的新特性，获取除了已经定义的参数以外的所有参数
function f(a,b,...rest){
	// rest参数只能写在最后面，必须用...标识
	}

2. 变量作用域

1. 变量在函数体内声明，则在函数体外不可以使用。可以使用闭包使用该局部变量
2. 如果两个函数使用了相同的变量名（由内向外查找，内屏蔽外），只要在函数内部，就不冲突
3. 内部函数可以访问外部函数的成员，反之不成立
4. 提升变量的作用域：JS执行引擎，自动提升了y的变量声明，但是不改变值
	function f(){
		var x = "x" + y;
		var y = "y";
		}
5. 全局对象window，默认所有的全局变量，都会自动绑定在window对象下。假设没有在函数范围内找到，就会向外查找，如果在全局作用域没有找到，就会报referenceError
6. 由于我们所有的全局变量都会绑定到我们的window上，如果有多个js文件，就会发生冲突
7. 解决冲突方法：定义全局变量 
	var olarian = {}；
	olarian.name = "ola";
8. ES6 let关键字，解决局部作用域冲突问题

3. 常量

在ES6之前，用全部大写定义常量
在ES6引入了常量关键字：const 定义只读变量

4. 方法

	1. 方法就是把函数放在对象里面，对象只有两个东西，属性和方法
	2. 在JS中可以使用apply控制this指向

	var f = {
	name : "ola",
	birth: 2020,
	age:function(){
		var now = new Date().getFullYear();
		return now-this.birth;				//this代表使用者
		}
	}

五、内部对象

使用type of函数判断对象

1. Date

	var now = new Date();
	now.getFullYear();
	now.getMonth();
	now.getDate();
	now.getDay();//星期几
	now.getMinutes();
	now.getSeconds();
	now.getTime();//时间戳，全世界统一1970年1月1日0点0分0秒到现在的毫秒数
	console.log(new Date(now.getTime()));
	now.toLocaleString();

2. JSON简要介绍

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

• 在JS一切皆为对象，任何JS支持的类型都可以用JSON表示。
• 层级结构简洁清晰
• 易于阅读和编写，易于机器解析
  格式：
• 对象都用 { }
• 数组都用 [ ]
• 所有的键值对都是用 key:value

var user = {
	name : "ola",
	age : 21
}
	var jsonUser = JSON.stringify(user);
	// json字符串转化为对象，参数为JSON字符串
	var obj = JSON.parse('{"name":"ola","age":3}');

六、面向对象编程

• 类：模板
• 对象：具体的实例

// 原型 _proto_  类似于继承的概念
// class继承 ES6
	class Student{
		constructor(name){
			this.name = name;
			}
		hello(){
			alert('hello ola');
			}
	}
	var ola = new Studnent("olarian");
	class xStu extends Student{
		constructor(name,grade){
			super(name);
			this.grade = grade;
			}
		myGrade(){
			console.log("im xStu");
			}
		}

七、操作BOM对象（浏览器对象模型）

Navigator：封装浏览器信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

Screen：代表屏幕尺寸
screen.width
screen.height

location：代表当前页面的URL信息
location.reload();
location.assign();// 设置新定位

document：代表当前页面 HTML DOM文档树
document.title
document.getElementById('[组件id]'); // 获取具体的文档树节点
document.cookie

history：代表历史记录
history.back() // 后退
history.forward() // 前进

八、操作DOM对象（文档对象模型）

浏览器网页就是一个Dom树形结构

• 更新：更新dom节点
• 遍历dom节点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点
  要操作一个DOM节点。就必须先获得

获取节点

document.getElementsByTagName('[标签名]')
document.getElementsByTagId('[id]')
document.getElementsByClassName('[类名]')

更新节点

// 操作文本
id0.innerText
id0.innerHTML
// 操作JS
id0.style.color
id0.style.fontSize -下划线转驼峰命名问题
id0.style.padding

删除节点

删除节点的步骤：先获取父节点，调用父节点来删除自己

var father = p1.parentElement;
father.removeChild(p1);
// 注意，删除多个节点的时候,children是在时刻变化的
father.removeChild(father.children[0]);

插入节点

我们获得了某个DOM节点，假设这个dom节点是空的，我们可以通过InnerHTML增加一个元素；但是这个节点已经存在元素了，我们就不可以这么做了，会产生覆盖

// 通过JS追加一个已有节点
<p id = "js">javascript</p>
<div id = "list">
	<p id = "se">javaSE</p>
</div>

var js = document.getElementById('js');
var list = document.getElementById('list');

**list.appendChild(js);**

// 通过JS创建一个新的节点
var newpoint = document.createElement('p');
newpoint.id = 'newpoint';
newpoint.innerText = 'Hello';

list.appendChild(newpoint);
// 通过JS创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');

list.appendChild(myScript);
// 通过JS创建一个style标签
var myStyle = document.createElement('style'); // 创建一个空标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}'; // 设置内容

document.getElementByTagName('head')[0].appendChild(myStyle);

insert插入

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// insertBefore(newNode,targetNode);
list.insertBefore(js,ee); //在js之前插入

九、操作表单（验证/MD5加密）

表单是什么： form Dom树 各种框（文本框、下拉框、单选/多选框、隐藏域、密码框）
表单的目的：提交信息

<body>
<form method = "post">
	<input type = "text" id = "username">
</form>
<script>
var input_text = document.getElementById('username');
// 得到/修改输入框的值
// input_text.value
// 对于单选/多选框等固定的值，.value只能取到当前的值，可以使用.checked查看返回的结果（true or false），也可以给.checked赋值修改结果
</script>
</body>

提交表单

// 使用MD5加密:
// head标签中添加<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<body>
<form action = "#" method = "post">
	<p>
		<input type = "text" id = "username" name = "username">
	</p>
	<p>
		<input type = "password" id = "password" name = "password">
	</p>
	<button type = "submit" onclick = "f()">submit</button>
</form>
<script>
	function f(){
		var user = document.getElementById('username');
		var pwd = document.getElementById('password');
		//MD5
		pwd.value = md5(pwd.value);
	}
</script>
</body>

前端隐藏式 + 使用MD5

<body>
// 表单绑定提交事件
// onsubmit = 绑定一个提交检测的函数 trur or false
// 将这个结果返回给表单，使用onsubmit接收
<form action = "#" method = "post" onsubmit = "return f()">
	<p>
		<input type = "text" id = "username" name = "username">
	</p>
	<p>
		<input type = "password" id = "input-password">
	</p>
	<p>
		<input type = "hidden" id = "md5-password" name = "password">
	</p>
	<button type = "submit">submit</button>
</form>
<script>
	function f(){
		var user = document.getElementById('username');
		var pwd = document.getElementById('password');
		var md5pwd = document.getElementById('md5-password');
		md5pwd.value = md5(pwd.value);
		// 可以校验判断表单内容，true就是通过，false就是不通过
		return false; // 无法提交
	}
</script>
</body>

十、jQuery

1. 初步使用

1.1 jQuery参考中文文档（超实用）

API参考文档 http://jquery.cuishifeng.cn/
CDN文档 https://www.bootcdn.cn/jquery/

1.2 jQuery使用

js和jquery的关系：jquery是一个库，封装了大量的Js函数(write less,do more)
使用方法：
cdn引入： < script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js”>< /script>
下载导入：创建lib文件夹，下载jquery-3.4.1.js放入lib目录

公式： $([选择器]).action() // 这里的选择器就是css中的

$('#test-jquery').click(function(){
	alert("ola");
})

2. jQuery选择器

标签选择器
document.getElementByTagName();
$(‘p’).click()
id选择器
document.getElementById();
$(’#id’).click()
类选择器
document.getElementByClassName();
$(’.classname’).click()

3. jQuery事件（action）

• 鼠标事件

mousemove()
mouseout()
mouseover()
mouseup()

• 键盘事件

keydown()
keypress()
keyup()

• 其他事件

// 等待网页元素加载完毕之后再响应事件
 $(document.ready(
	function(){

		}
	))
// 也可以简写为
$(function(){
	
	})

4. jQuery操作DOM

// 节点文本操作
$('#test-ul li[name=" python"]').text(); // 获得值
$('#test-ul li[name=" python"]').text('setvalue'); // 设置值
$('#test-ul').html(); // 获得值
$('#test-ul').html('<p>setvalue</p>'); // 设置值

// css操作
// 将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });

// 元素的显示和隐藏
// 本质：display : none
$("p").show();
$("p").hide();