UI 框架
- Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
- ElementUI、iview、ice：饿了么出品，基于 Vue 的UI框架
- Bootstrap：Twitter 推出的一个用于前端的开源工具包
- AmazeUI：又叫“妹子UI”，一款 HTML5 跨屏前端框架
1.基本使用
1.1.引入 JavaScript
- 内部标签使用
<script>
//......
</script>
- 外部引入
abc.js
//......
test.html
<script src="abc.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写JavaScript代码-->
<!--<script>
alert('hello world');
</script>-->
<!--外部引入-->
<!--注意：script标签必须承兑出现-->
<script src="js/qj.js"></script>
<!--不用显示定义type，默认就是JavaScript-->
<script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
1.2.基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定义变量
var score = 71;
// alert(num);
// 2.条件控制
if (score > 60 & score < 70){
alert("60-70");
}else if (score >= 70 && score < 80){
alert("70-80");
}else {
alert("other");
}
//console.log(score) 在浏览器的控制台打印变量 ==> System.out.println()
/**
* 多行注释
*/
</script>
</head>
<body>
</body>
</html>
1.3.数据类型
1.3.1.变量
var 变量名 = 值;
1.3.2.数字
不区分小数和整数，统一使用 Number 类型
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大
1.3.3.字符串
'abc'、"abc"
consloe.log('a');
consloe.log("a");
consloe.log('a'');
换行：\n
tab：\t
Unicode字符：\u4e2d
ASCII字符：\x41
多行字符串编写：
var test=`khbk
fer
fref`
模板字符串
let name = "xiaoming";
let age = 3;
let msd = `hello,${name}`;
字符串长度：console.log(student.length)
字符串不可变
大小写转换：
student.toUpperCase()
stydent.toLowerCase()
获取指定字符下标：student,indexOf('t')
substring：
student.substring(1)//从第一个字符截取到最后一个字符
student.substring(1,3)//[1,3)
1.3.4.布尔值
true、false
1.3.5.逻辑运算
&&、||、!
1.3.6.比较运算符
=
==：等于（类型不一样，值一样，也会判断为 true）
===：绝对等于（类型和值都一样，结果true）
坚持不要使用 == 比较
注意：
- NaN 与所有的数值都不相等，包括自己（通过 isNaN(NaN) 来判断这个数是否是 NaN）
- 尽量避免使用浮点数进行运算，存在精度问题
1.3.7.null和undefined
null：空
undefined：未定义
1.3.8.数组
Java的数值必须是相同类型对象，JS 中不需要这样
取数组下标：如果越界，报 undefined
Array 可以包含任意的数据类型，通过下标取值和赋值
1、长度：arr.length
注意：给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引（字符串的 "1" 和数字 1 是不同的）
3、slice()，截取 Array 的一部分，返回一个新数组，类似于 String 的 substring
4、push（压入到尾部），pop（弹出尾部的一个元素）
5、unshift（压入头部）,shift（弹出头部一个元素）
6、排序：sort()
7、元素反转：reverse()
8、拼接：concat()
9、连接符：join（打印拼接数组，使用特定的字符串连接）
10、多维数组
1.3.8.对象
对象是大括号，数组是中括号
<script>
var person = {
name: "zhangsan",
age: 3,
tags: ['js', 'java', 'python']
}
</script>
赋值或取对象的值：person.name
使用不存在的对象属性，报：undefined
动态删减属性：delete person.name
动态添加：person.name = 'haha'
判断属性值是否在这个对象中：'name' in person
判断一个属性是否是这个对象自身拥有的：person.hasOwnProperty('age')
1.4.严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA 需要设置支持 ES6 语法
'use strict'; 严格检查模式，预防JavaScript的随意性导致产生一些问题
必须写在JavaScript的第一行
局部变量建议使用 let 去定义
-->
<script>
'use strict';
let i = 1;
</script>
</head>
<body>
</body>
</html>
1.5.流程控制
if(){}else if(){}else{}
循环
while(){}
do{}while()
for(let i=0;i<100;i++){}
forEach循环
for(let i in arr){}
1.6.Map 和 Set
Map：
<script>
'use strict';
// 学生的成绩、名字
let map = new Map([['tom',100],['Jack',90],['haha',80]]);
let name = map.get('tom');// 通过key获得value
map.set('admin',1234);// 新增或修改
map.delete('tom');// 删除
console.log(name);
</script>
Set：无序不重复的集合
<script>
'use strict';
let set = new Set([3,4,2,1,1,1,1]);// set可以去重
set.add(5);// 添加
set.delete(1);// 删除
set.has(1);// 是否包含某个元素
</script>
1.7.iterator
'use strict';
// 遍历数组
let arr = [1,3,5];
// for in 是下标
for (var number of arr) {
console.log(number);
}
// 遍历 Map
let map = new Map([['tom',100],['Jack',90],['haha',80]]);
for (let x of map) {
console.log(x);
}
// 遍历 Set
let set = new Set([2,3,4,5]);
for (let x of set) {
console.log(x);
}
2.函数及面向对象
2.1.定义函数
方式一：
绝对值函数
'use strict';
function abs(x){
if (x > 0){
return x;
}else {
return -x;
}
}
如果没有执行 return，函数执行完毕也会返回结果：undefined
方式二：
'use strict';
var abs = function (x){
if (x > 0){
return x;
}else {
return -x;
}
}
function(x){……} 这是一个匿名函数，但是可以把结果赋值给 abs
调用函数：abs(10)
参数问题：
假设不存在参数，如何规避？
'use strict';
var abs = function (x){
// 手动抛出异常来判断
if (typeof x !== 'number'){
throw 'Not a Number!';
}
if (x >= 0){
return x;
}else {
return -x;
}
}
arguments：代表传递进来的所有参数是一个数组
'use strict';
var abs = function (x){
console.log("x=>"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
rest：获取除了已经定义的参数之外的所有参数
'use strict';
function aaa(a, b, ...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
2.2.变量的作用域
var 定义的变量实际是有作用域的。
- 假设在函数体中声明，则在函数体外不可使用（要实现的话，可以研究闭包）
- 如果两个函数使用了相同的变量名，只要在函数内部，就不影响
- 内部函数可以访问外部函数的成员，反之不行
- 内外函数的变量重名，由内向外查找，内部函数调用内部的变量，外部调用外部的变量
提升变量的作用域：
js 执行引擎，自动提升了 y 的声明，但不会提升 y 的赋值；
规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
'use strict';
function xx(){
var x = 'x' + y;
console.log(x);
var y = 'y';
}
全局函数：定义在外部
全局对象 window：默认所有的全局变量，都会自动绑定在 window 对象下
var x = '123';
alert(x);
alert(window.x);
alert() 这个函数本身也是 window 对象的变量：window.alert(x)
JS 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用域范围内找到，就会向外查找，如果在全局作用域找不到，报错：RefrenceError
规范：
'use strict';
// 唯一全局变量
var Test = {};
// 定义全局变量
Test.name = 'zhangsan';
Test.add = function (a, b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
let 关键字，解决局部作用域冲突问题
const 常量关键字（全部大写的变量名）
2.3.方法
方法：就是把函数放在对象的里面，对象只有两个东西：属性和方法
'use strict';
var test = {
name: 'zhangsan',
birth: 2009,
// 方法
age: function (){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
test.name;
//方法
test.age();
'use strict';
function getAge(){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var test = {
name: 'zhangsan',
birth: 2009,
age: getAge
}；
在 JS 中可以控制 this 的指向-apply
'use strict';
function getAge (){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var test = {
name: 'zhangsan',
birth: 2009,
age: getAge
};
getAge.apply(test,[]);// this 指向了 test，参数为空
3.常用对象
3.1.内部对象
标准对象：number、string、boolean、object、function、undefined
3.2.Date
基本使用
var now = new Date();
now.getFullYear(); // 年
now.getMonth();// 月 0-11
now.getDate();// 日
now.getDay();// 星期几
now.getHours();// 时
now.getMinutes();// 分
now.getSeconds();// 秒
now.getTime();// 时间戳，统一：1970-1-1 0:00:00
console.log(new Date("时间戳"));// 时间戳转时间
3.3.JSON
JSON：轻量级的数据交换格式
在JavaScript中一切皆对象，任何JS支持的类型都可以用 JSON 来表示，格式：
- 对象都用 {}
- 数组都用 []
- 所有的键值对都用：key:value
'use strict';
var user = {
name: "xiaoming",
age: 3,
sex: "男"
};
// 对象转化为 JSON 字符串：{"name":"xiaoming","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//JSON 字符串转化为对象,参数为 JSON 字符串
var obj = JSON.parse('{"name":"xiaoming","age":3,"sex":"男"}');
4.面向对象编程
- 类：模板
- 对象：具体的实例
JavaScript：
- 原型：
'use strict';
var Student = {
name: "zhangsan",
age: 3,
run: function (){
console.log(this.name + " run ...");
}
};
var xiaoming = {
name: "xiaoming"
};
var Bird = {
fly: function (){
console.log(this.name + " fly ...");
}
};
//小明的原型是 Student
xiaoming.__proto__ = Student;
// 小明的原型是 Bird
xiaoming.__proto__ = Bird;
class 继承
'use strict';
// 定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
class XiaoStudent extends Student{
constructor(name, grade) {
super();
this.grade = grade;
}
myGrade(){
alert("我是个小学生");
}
}
let xiaoming = new Student("xiaoming");
let xiaohong = new XiaoStudent("xiaohong", 89);
5.操作 BOM 元素
BOM：浏览器对象模型
5.1.window
window 代表浏览器窗口
window.innerHeight //内部窗口高度
window.innerWidth //内部窗口宽度
window.outerHeight //外部窗口高度
window.outerWidth
5.2.Navigator
Navigator：封装了浏览器的信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform
大多数时候，不会使用navigator对象，因为会被人为修改
5.3.screen
screen：屏幕
screen.windth
screen.height
5.4.location
location：代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("URL")
5.5.document
document：代表当前的页面
document.title //网站标题，可以赋值
document.getElementById('id') //获取网页文档树节点
document.cookie
// 服务器端可以设置 cookie: httpOnly
5.6.history
history：浏览器的历史记录
history.back() //后退
history.forward() //前进
6.操作 DOM 元素
DOM：文档对象模型
6.1.获得DOM节点
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();
document.getElementById('father').children;// 获取父节点下的所有子节点
6.2.更新节点
// div id="id1"
var id1 = document.getElementById("id1");
操作文本：
- id1.innerText = 'ddd'
- id1.innerHTML = '<strong>123</strong>' //解析HTML文本标签
操作CSS：
- id1.style.color = 'yellow';
- id1.style.fontSize = '20px';
6.3.删除节点
步骤：先获取父节点，再通过父节点删除自己
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
删除多个节点的时候，children 是时刻在变化的
6.4.插入节点
获得的DOM节点如果是空的，可以通过 innerHTML 增加一个元素，如果有元素，那么会覆盖
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js); //追加到后面
// 创建新节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'hello';
</script>
7.操作表单（验证）
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username" required>
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var boy_raido = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输入框的值
input_text.value;
//修改输入框的值
input_text.value = '123';
// 对于单选框、多选框等固定的值，boy_radio.value 只能的取到当前的值
boy_raido.checked;// 查看返回的结果，是否为true
boy_raido.checked = true;// 赋值
</script>
提交表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5 工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件
onsubmit 绑定一个提交检测的函数，true false
将这个结果返回给表单，使用 onsubmit 函数
-->
<form action="https://www.baidu.com/" method="post" onsubmit="aaa()">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<!--<span>密码:</span><input type="password" id="password" name="password">-->
<span>密码:</span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onclick 被点击-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5Pwd = document.getElementById('md5-password');
md5Pwd.value = md5(md5Pwd.value);
// 可以校验判断表单内容，true：提交；false：阻止提交
return true;
/*console.log(uname.value);
// MD5 算法
pwd.value = md5(pwd.value);
console.log(pwd.value);*/
}
</script>
</body>
</html>
8.jQuery 库
获取 jQuery：https://jquery.com
在线链接（CND jQuery）：
API 中文文档：https://www.32r.com/soft/41594.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
$(选择器).事件(函数)
-->
<a href="" id="test-jquery">点我</a>
<script>
// 选择器就是 css 的选择器
$('#test-jquery').click(function () {
alert('hello');
});
</script>
</body>
</html>