JS 学习笔记
1、引入
1.1、内部引入
定义 script 标签即可！
<script>
function helloJS(){
alert("Hello Python!")
}
</script>
1.2、外部引入
通过 script 标签的 src 指定路径
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript"></script>
注意引入顺序！为什么先导入 JQuery？因为后面的 mdb.min.js 将会用到 jQuery !
2、数据类型
- Number
- 字符串
- 布尔值
- 数组
var arr = [1, 2, 3.14, 'Hello', null, true];
- 对象
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
- Map and Set
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
判断 undefined 类型：
if(typeof(x)==undefined)
3、函数
var myFun = function(x){
return x;
};
3.1、arguments 参数
获取传入的参数列表，类似一个 Array，常用于判断调用函数传入的参数个数 arguments.length
arguments[0] : 第一个参数…以此类推
3.2 、rest 参数
把剩下的组装成一个数组，如果没有，则是一个空数组而不是 undefined
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
3.3、局部作用域
由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：
'use strict';
function foo() {
for (var i=0; i<100; i++) {
//
}
i += 100; // 仍然可以引用变量ix
}
为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：
'use strict';
function foo() {
var sum = 0;
for (let i=0; i<100; i++) {
sum += i;
}
// SyntaxError:
i += 1;
}
3.4、解构赋值
let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'
解构赋值还可以忽略某些元素：
let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'
如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：
'use strict';
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
var {
name, age, passport} = person;
3.5、箭头函数
// 普通函数
let sum = function(a, b) {
return a + b;
}
// 箭头函数
let sum1 = (a, b) => {
return a + b;
}
⚠️箭头函数没 this ，在其中调用 this 是父级的 this 一直往上去找
3.6、DOM树
现在，我们想获取页面的元素，有三种获取方式。
var myEle01=document.getElementById("id"); //通过ID查找
var myEle02=document.getElementsByClassName("className"); //通过class查找
var myEle03=document.getElementsByTagName("p"); //通过标签名查找
当然，我们也可以用 jQuery 配合 CSS 选择器！
$("#myText").html = "new Value";
⚠️值得注意：
1、对于比较运算符
第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。
同样的!=和!==类似
2、关于 NaN
NaN === NaN; // false
唯一能判断NaN的方法是通过isNaN()函数：
isNaN(NaN); // true
3、浮点数进行比较
浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
4、JS 原型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HKEihwZ9-1656575134631)(/Users/NEMO/Library/Application Support/typora-user-images/image-20220605221950757.png)]
5、凌乱的
e.preventDefault()：阻止默认行为 (eg.让 a标签 不再跳转)
TypeScript笔记
1、什么是TypeScript？
我们简单地 Google 一下：
TypeScript is JavaScript with syntax for types.
TypeScript 是具有类型语法的 JavaScript。
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
TypeScript 是一种基于 JavaScript 的强类型编程语言，可为您提供任何规模的更好的工具。
2、变量
2.1、定义变量
const hello : string = "Hello World!" //冒号后跟数据类型
console.log(hello)
那么常用类型有哪些呢？
any number string boolean enum void null undefined
- any 可以赋值任何类型
- enum 用于定义数值集合
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2
- null 表示数值缺失
2.2、变量作用域
这里用 菜鸟教程 教程网站的例子可以很好表示
var global_num = 12 // 全局变量
class Numbers {
num_val = 13; // 实例变量
static sval = 10; // 静态变量
storeNum():void {
var local_num = 14; // 局部变量
}
}
console.log("全局变量为: "+global_num)
console.log(Numbers.sval) // 静态变量
var obj = new Numbers();
console.log("实例变量: "+obj.num_val)
2.3、数组类型
var dep:string[];
dep = ["CS","MA","HelloWorld"]
2.4、联合类型
这么高级？第一次见！
Type1|type2|type3
var val:string|number
val = 12
console.log("数字为 "+ val)
val = "Hello"
console.log("字符串为 " + val)
3、函数
真烦！tx 真是让人不习惯！数据类型定义在变量名：后，返回值定义在参数列表：后！
function add(x: number, y: number): number {
return x + y;
}
console.log(add(1,2))
4、接口
interface Person {
name:string;
age:number;
}
// commandline 是字符串
var Nemo:Person = {name:"Nemo",age:"16"};
4.1、接口的继承
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
5、类
看了一下原理，发现连 JS 的一些原理都没学会，看来就只能先到这里了！暑假有机会再好好学习 JavaScript 基础内容吧。
jQuery 笔记
1、Hide 和 Show 的 过渡动画
$(document).ready(function () {
$("p").hover(
function () {
$("p").hide(1000, "swing");
},
function () {
$("p").show(1000, "swing");
});
});
第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 “swing”，其他可以使用相关的插件）。