1.大致了解前端
1.CSS缺陷：
-
语法不够强大，不能嵌套书写，导致模块化开发中需要重复书写很多选择器；
-
没有变量，也没有合理的样式复用机制，导致难以维护。
2.CSS预处理器
定义：为了解决CSS的缺陷，开发了CSS预处理器，它是用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用。
常见的CSS预处理器：
- SASS：基于Ruby语言，通过服务器处理
- LESS：基于NodeJS，通过客户端处理
3.JavaScript定义：它是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行。
4.Native原生JS开发：
按照【ECMAScript】标准的开发方式，简称ES
- ES3
- ES4(内部，未正式发布)
- ES5(全浏览器支持)
- ES6(常用，webpack打包成为ES5支持的)
- ES7
- ES8
- ES9(草案阶段)
5.JavaScript框架
-
jQuery： 封装了很多方法
-
Angular：Google收购的前端框架，增加了模块化开发的理念
-
React： facebook出品，提出了新概念【虚拟DOM】
-
Vue： 一款渐进式框架，可以实现模块化开发，路由，状态管理等新特性，综合了前两种的优点
-
Axlos： 前端通信框架，也可以用jQuery提供的AJAX
6.JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
- webpack：模块打包器，主要用于打包，压缩，合并，以及按序加载
7.UI框架
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ElementUI，iview，ice：饿了么出品，基于Vue的UI框架
- Bootstrap：Twitter推出的一个用于前端开发的开源工具包
- AmazeUI：又叫”妹子UI“，一款HTML5跨屏前端框架
8.三端统一
混合开发（Hybrid App）
一套代码三端统一：pc，Android：.apk，IOS：.ipa
- 云打包
- 本地打包
9.微信小程序：微信官网，UI开发框架：WeUI
?
?
2.JS快速入门
1.导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<script>
alert("hello world");
</script>-->
<!--外部引入中script必须成对出现-->
<script src="alert1.js"></script>
<!--不用显示定义，type默认也是javascript-->
<script type="text/javascript"></script>
</head>
<body>
行内样式:这里也可以存放script
</body>
</html>
alert("hello world");
?
2.基本语法
JS严格区分大小写！
JS里的变量类型全是var
规范：局部变量建议都使用let定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义变量
var score = 1;
//条件控制
if (score>=60 && score<=100){
alert("及格")
}else if(score<60){
alert("不及格")
}
</script>
</head>
<body>
</body>
</html>
?
3.数据类型
-
number JS不区分整数，小数
56//整数 12.3//小数 -10//负数 9e3//科学计数 NaN//not a number Infinity//无限大 -
浮点数精度问题
console.log((1/3)===(1-2/3)) false尽量避免用浮点数进行计算
console.log(Math.abs(1/3-(1-2/3))<0.000000001) true -
比较运算符
=//赋值 ==//等于，类型不一样，值一样也相等 ===//绝对等于，类型和值必须都一样-
JS的缺陷，不要使用==，要使用===
-
NaN===NaN结果为false，NaN与所有数值都不相等，包括它自己
-
isNaN(NaN)结果为true，只能通过isNaN来判断这个数是否是NaN
-
?
4.浏览器必备调试须知
快捷键F12调出控制台
快捷键PgUp是在console里复制上一行
浏览器console—>直接输入alert(score)---->或者console.log(score)
浏览器source相当于debug可以打断点
?
5.严格检查模式
前提：ES6以上
?
'use strict'
预防JS随意性产生的问题，一般第一行就写上
?
?
3.数据类型详解
1.字符串
"A"
>A
"a\'"
>a'
"a\nb"
>a
b
"a\tb"
>a b
"\u4e11"
>丑
"\x48"
>H
多行字符串用``包起来，``在Tab键上面
var a = `h
d
年后
`
模板字符串
let name = "小明";
let age = 10;
let msg = `你好呀,${name}`;
字符串的不可变性
var str = "student";
console.log(str[1])
>t
str[1]=str[2]
>'u'
console.log(str)
>student
大小写转换，注意是方法不是属性
console.log(str.toUpperCase())
>STUDENT
console.log(str.toLowerCase())
>student
console.log(str.indexOf("t"))
>1
console.log(str.substring(1))
>tudent
console.log(str.substring(1,3))
>tu
?
2.数组
1.不需要同类型
Java的数组是相同类型数据的有序集合，而JS不需要同类型
var arr =[1,2,3,3.4,"小明",null,true]
数组下标越界，显示undefined
2.arr.length
数组内容可以改变，并且数组大小也可以改变，但是如果arr.length赋值较小会造成数据丢失
var arr = [1,2,3,4,5,6]
arr[0]=0
console.log(arr)
>[0, 2, 3, 4, 5, 6]
arr.length=10
console.log(arr)
>[0, 2, 3, 4, 5, 6, empty × 4]
3.indexOf()
获得下标索引
arr.indexOf(3)
>2
4.slice()
截取数组的一部分，类似字符串中的subString()
arr.slice(2,4)
>[3, 4]
5.添加，删除
push()添加元素到尾部，pop()删减元素到尾部
unshift()添加元素到头部，shift()删减元素在头部
arr.push("a")
>[0, 2, 3, 4, 5, 6, empty × 4, 'a']
arr.pop()
>[0, 2, 3, 4, 5, 6, empty × 4]
arr.unshift("a","b")
>['a', 'b', 0, 2, 3, 4, 5, 6, empty × 4]
arr.shift()
>['b', 0, 2, 3, 4, 5, 6, empty × 4]
6.sort()，reverse()
arr1=["a","c","b"]
arr1.sort() //排序
>['a', 'b', 'c']
arr1.reverse() //反转
>['c', 'b', 'a']
7.concat()
拼接，它不会改变数组
arr1.concat([1,2,3])
>['c', 'b', 'a', 1, 2, 3]
arr1
>['c', 'b', 'a']
8.join()
连接符，打印拼接数组，使用特定的连接符连接
arr1.join('-')
>'c-b-a'
?
3.对象
对象是大括号，数组是中括号
JS中的属性以键值对方式表示，所有键都是字符串，值任意。每个属性间用逗号隔开，最后一个不需要。
var a={
name:"小明",
age:10,
tags:["JS","..."]
}
使用不存在的属性不会报错
a.hahh
>undefined
动态删减属性，动态的添加，直接给新属性添加值即可
delete a.name
>true
a
>{age: 10, tags: Array(2)}
判断这个属性是否在对象中xxx in xxx
"age" in a
>true
'toString' in a
>true
判断这个属性是否是对象自身拥有的
a.hasOwnProperty('age')
>true
a.hasOwnProperty('toString')
>false
?
4.循环
if,while,for同java
forEach
var age = [1,2,3,4,5,5]
age.forEach(function(value){
console.log(value)
})
for…in打印下标，for…of打印值
var age = [1,2,3,4,5,5]
for(var num in age){
console.log(age[num])
}
?
5.Map和Set集合
Map
//获得学生成绩
var map = new Map([["tom",78],['jak',99],['ali',33]])
var tom = map.get('tom'); //通过key获得value
console.log(tom)
>78
map.set('q',99);
map.delete('ali');
Set无序不重复集合
var set = new Set([1,1,1,1,3]);
console.log(set) //去重
>{1,3}
set.add(2);
set.delete(1);
set.has(3)
>true
for…of遍历Map，Set
var set = new Set([1,1,1,1,3]);
for (let x of set){
console.log(x);
}
var map = new Map([["tom",78],['jak',99],['ali',33]]);
for (let x of map){
console.log(x);
}
?
?
4.函数
函数和方法本质上是一样的，只是放的位置不同
1，定义函数
方式一：
定义一个绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(10)
>10
方式二：
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){…}这是一个匿名函数，但是可以把结果赋值给变量abs，通过abs可以调用函数。
?
2.参数问题
1.多个参数
abs(1,2,3)
>1
arguments
是js免费赠送的关键字，代表传进来的所有参数是一个数组
for (var i=0; i < arguments.length;i++){
console.log(arguments[i]);
}
console.log("x=>"+x);
abs(1,2,3)
>1
>2
>3
>x=>1
但是有一个问题，arguments会接收所有参数，但有时候我们只想用第一个参数后面的参数来进行附加操作，就需要来排除已有的参数。
?
rest
获取已经定义参数之外的所有参数，只能写在最后用…rest表示
function a(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest)
}
a(1,2,3,4,6,8,9)
>a=>1
>b=>2
>[3, 4, 6, 8, 9]
?
2.不传参数
手动抛出异常
abs()
>NaN
规避不传参数问题，加一个if判断typeof,可以手动抛出异常
if (typeof x !== "number"){
throw "not a number";
}
abs()
>Uncaught not a number
//判断类型typeof
typeof 123
>'number'
?
?
3.变量作用域
1.局部变量
- 实际上在js中var定义的变量是有作用域的。
? ???? 在函数体中的变量，在函数外不能使用（非要实现的话，用闭包）
function d() {
var x = 1;
x=x+1;
}
x=x+2;
>Uncaught ReferenceError: x is not defined at 变量作用域
- 如果两个函数使用了相同的变量名，只要在函数内部就不冲突
function d() {
var x = 1;
x=x+1;
}
function d1() {
var x = 1;
x=x+1;
}
- 内部函数可以调用外部函数的成员，反之不成立
function d() {
var x = 1;
function d1() {
var y = x+1;
}
var z=y+1;
}
console.log(z)
>Uncaught ReferenceError: z is not defined
-
内部函数变量和外部函数变量重名
函数查找变量从自身函数开始，由内向外查找
function d() {
var x = 1;
function d1() {
var x='a';
console.log('inner'+x);
}
console.log('outer'+x);
d1();
}
d();
>outer1
innera
-
提升变量作用域
js执行引擎，自动提升y的声明
function d() { var x = 'x'+y; console.log(x); var y='y'; } d(); >xundefined规范：所有的变量定义都在头部，便于维护
var x=1, y=2, z,i,a; //之后随便用 a=1;
?
2.全局变量
var x=1;
function d() {
console.log(x);
}
d();
console.log(x);
>1
1
js实际上只有一个全局作用域，任何变量（函数也视为变量）默认都会自动绑定在window对象下。假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError。
var x=1;
alert(x);
alert(window.x);//alert()这个函数本身也是一个window变量
>弹窗弹出两次1
var x=1;
window.alert(x);
var oldalert = window.alert;
oldalert(x);
window.alert = function(){};
//alert失效，没有弹出123
window.alert(123);
//恢复
window.alert = oldalert;
alert(456);
规范：由于我们所有的全局变量都会帮在我们的window上。如果不同的js文件，使用了相同的全局变量，就会造成冲突，因此为了避免冲突我们重新定义一个属于自己的全局变量
//唯一全局变量
var wang = {};
//定义全局变量
wang.name = 'a';
wang.ab = function (a,b) {
return a+b;
}
?
3.常量
在ES6之前，约定俗成只要用全部大写的字母命名的变量就是常量
var PI = '3.14';
console.log(PI);//3.14
PI = '123';//可以改变这个值
console.log(PI);//123
ES6提出了const
const PI = '3.14';
console.log(PI);
PI = '123';
console.log(PI)
>TypeError: Assignment to constant variable.
?
4.方法
方法就是将函数放在对象里面，对象就两个东西：方法和属性
var xiaoming = {
name:'小明',
birth:2000,
//方法
age:function () {
//获得今年年份
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性：
xiaoming.name;
//方法：调用方法要加（）
xiaoming.age();
另一种写法
var getAge = function () {
//获得今年日期
var now = new Date().getFullYear();
return now-this.birth;
}
var xiaoming = {
name:'小明',
birth:2000,
//方法
age:getAge
}
xiaoming.age()
>21
getAge()
>NaN //this无法指向window所以调用失败
this是无法指定的，默认指向调用它的那个对象
apply可以改变this指向
var getAge = function () {
//获得今年日期
var now = new Date().getFullYear();
return now-this.birth;
}
var xiaoming = {
name:'小明',
birth:2000,
//方法
age:getAge
};
a=getAge.apply(xiaoming,[]);//getAge指向了xiaoming这个对象，参数为空
?
5.特殊对象
1.Date的基本使用
var now = new Date();//Sat Oct 02 2021 10:11:30 GMT+0800 (中国标准时间)
now.getFullYear(); //2021
now.getMonth(); //0~11代表月 9
now.getDay(); //星期 6
now.getDate(); //2
now.getHours(); //10
now.getMinutes(); //11
now.getSeconds(); //30
now.getTime(); //时间戳：从1970.1.1 00：00：00到现在的毫秒数，全世界统一 1633140690595
console.log(new Date(1633140690595));//时间戳转为时间，Sat Oct 02 2021 10:11:30 GMT+0800
now.toLocaleString();//'2021/10/2 上午10:11:30'
now.toGMTString() //'Sat, 02 Oct 2021 02:11:30 GMT'
?
2.JSON
-
早期所以数据传输习惯使用XML文件。
-
JSON ( JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
-
它基于 ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
-
JSON是字符串！
在js中一切皆对象，任何js支持的类型都可以用JSON来表示。
格式：
- 对象都用{}
- 数组都用[]
- 所以键值对都用key：value
var user = {
name:'x',
sex:'男',
age:19
}
//对象转化为json字符串
var s = JSON.stringify(user); //{"name":"x","sex":"男","age":19}
//将JSON字符串转化为对象
var parse = JSON.parse('{"name":"x","sex":"男","age":19}');//{name: 'x', sex: '男', age: 19}
?
3.Ajax
- 原生的js写法 xhr异步请求
- jQuey封装好的方法$("#name").ajax("")
- axios请求
?
?
5.面向对象编程
1.原型
var student = {
name:'小明',
age:10,
run:function () {
console.log(this.name+'正在跑')
}
};
var hong = {
name:'小红'
};
//原型：小红的原型是student,类似继承
hong.__proto__=student;
console.log(hong.run())
>小红正在跑
原型链：
?
2.class继承
//定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hell0(){
alert('你好')
}
}
//继承
class XiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('小学生');
}
}
var student = new Student('小明');
var student1 = new Student('小红');
var xiaoStudent = new XiaoStudent('小小');
console.log(student.name)
>小明
student.hello();
console.log(xiaoStudent.name)
>小小
?
?
6.操作BOM对象
BOM：浏览器对象模型
1.window
window代表浏览器窗口
window.alert(1)
>undefined
window.innerHeight
>304
window.innerWidth
>1366
window.outerHeight
>728
window.outerWidth
>1366
?
2.navigator
navigator:封装了浏览器的信息
大多数时候我们不会使用navigator对象，因为会被人人为修改
navigator.appVersion
>'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.userAgent
>'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.platform
>'Win32'`
?
3.screen
代表屏幕尺寸
screen.width
>1366
screen.height
>768
?
4.location
代表当前页面的url信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=98010089_dg&ch=7"
protocol: "https:"
reload: ? reload()//重新加载，刷新网页 location.reload()
//设置新的地址
location.assign('新地址')
?
5.document
document代表当前页面，HTML DOM树
document.title
>"百度一下，你就知道"
document.title = '1'
>"1"
获得具体的文档树节点
<dl id="app">
<dt>JAVA</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
console.log(dl)
?
6.cookie
获取cookie
document.cookie
劫持cookie原理
<script scr="aa.js"></script>
//恶意人员，获取你的cookie上传到他的服务器
服务器端可以设置cookie：httpOnly来保证我们的安全
?
7.history
代表浏览器的历史记录
history.back()//后退
history.forward()//前进
?
?
7.操作DOM对象
Dom：文档对象模型，浏览器网页就是一个Dom树形结构
核心：
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的的节点
?
1.获得
要操作一个Dom节点，就必需要先获得这个Dom节点
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var father = document.getElementById("father");
var childrens = father.children;//获得父节点下的所有子节点
//father.firstChild
//father.lastChild
</script>
这是原生代码，之后我尽量都使用jQuery();
?
2.更新
<div id="id1"></div>
<script>
var id1 = document.getElementById('id1');
id1.innerText='abc';
</script>
id1.innerText='123' //修改文本值
>'123'
id1.innerHTML='<strong>123</strong>' //可以解析HTML文本标签
>'<strong>123</strong>'
id1.style.color='red'//属性都使用了字符串进行包裹
>'red'
id1.style.fontSize = '100px'//- 转 驼峰命名
>'100px'
id1.style.padding='2em'
>'2em'
?
3.删除
先获取父节点，再通过父节点进行删除
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
</div>
<script>
var p1 = document.getElementById("p1");
var father = p1.parentElement;
father.removeChild(p1);
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])//报错已经不存在第三个元素了
</script>
?
4.添加
我们获得了某个Dom节点，假如这个节点是空的，我们通过innerHTML可以添加元素；但是要是本身就有元素，使用innerHTML会覆盖原来的元素。
- 把已有的元素移到任何一个元素后面
- 创建一个新的标签，然后追加到元素的后面
1.append
追加到尾部
<p id="j">j</p>
<div id="d">
<p id="w">w</p>
<p id="l">l</p>
</div>
<script>
var j = document.getElementById('j')
var w = document.getElementById('w')
w.appendChild(j); //追加到尾部
//创建一个新的p标签
var newp = document.createElement('p');
newp.id='newp';
newp.innerText= 'hello';
w.appendChild(newp);
//创建一个新的标签，通过setAttribute可以动态的设置值
var myscript = document.createElement('script');
myscript.setAttribute('type','text/js');
w.appendChild(myscript);
//创建一个style标签
var mystyle = document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML = 'body{background-color:red;}';
var h = document.getElementsByTagName('head')[0];
h.appendChild(mystyle);
</script>
?
2.insert
<p id="j">j</p>
<div id="d">
<p id="w">w</p>
<p id="l">l</p>
</div>
<script>
var j = document.getElementById('j');
var d = document.getElementById('d');
var l = document.getElementById('l');
//newNode插到targetNode
d.insertBefore(j,l);
</script>
?
?
?
8.操作表单（验证）
1.获得及设置表单信息
<form action="#">
<p>
<span>用户名</span><input type="text" id="usename">
</p>
<p>
<input type="radio" value="man" id="boy" name="sex">男
<input type="radio" value="woman" id="girl" name="sex">女
</p>
</form>
<script>
var input_text =document.getElementById('usename');
var boy_radio =document.getElementById('boy');
var girl_radio =document.getElementById('girl');
//得到输入框的值
input_text.value;
>'123'
//修改输入框的值
input_text.value='456';
//获取单选框选中的是哪个
boy_radio.checked;
>false
boy_radio.checked = 'true';
>'true'
</script>
?
2.表单提交验证
md5加密密码，表单优化隐藏密码
<!--表单绑定提交事件，onsubmit=返回绑定的提交检测函数，true和false将这个结果返回表单-->
<form action="#" method="post" onsubmit="return aa()">
<!--不加name抓不到包-->
<p>
<span>用户名</span><input type="text" id="usename" name="us">
</p>
<p>
<span>密码</span><input type="password" id="input_pwd" >
</p>
<!--更安全的写法，把密码隐藏起来hidden，上面的密码框删掉name-->
<input type="hidden" name="true_pwd" id="true_pwd"></input>
<p>
<!--绑定一些事件：onclick被点击的时候-->
<button type="submit" onclick="aa()">提交</button>
</p>
</form>
<script>
function aa() {
var uname = document.getElementById('usename');
var pwd = document.getElementById('input_pwd');
var true_pwd = document.getElementById('true_pwd');
console.log(uname.value);
//MD5算法
true_pwd.value = md5(pwd.value);
console.log(true_pwd.value);
//可以校验判断表单内容，true就是通过
return false;
}
</script>
?
?
9.jQuery
jQuery封装了大量js函数的工具类，可以称之为库。
1.获得jQuery
-
去jQuery官网下载，然后粘到自己的项目文件里，通过scr引用就可以了
-
搜索CDNjQuery获得
公式：$(selector).action()
帮助手册：https://jquery.cuishifeng.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//CDN获取jQuery
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--使用jQuery公式：$(selector).action()，其中选择器就是css的选择器-->
<a href="" id="textjQuery">点我</a>
<script>
document.getElementById('textjQuery');
$('#textjQuery').click(function () {
alert('hello');
});
</script>
</body>
</html>
?
2.jQuery事件
鼠标事件$(selector).mouse…(），键盘事件，其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//引入jQuery
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<style>
#divMove{
height: 200px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求：-获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div>
<script>
//当网页元素加载完毕后，响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
</html>
?
3.jQuery操作Dom元素
节点文本操作
<ul id="ul">
<li id="js">js</li>
<li name ="python">python</li>
</ul>
<script>
// 原来的：document.getElementById('')
//获得值
$('#ul').html();
$('#ul li[name =python]').text();
>'python'
//设置值
$('#ul li[name =python]').text('123');
$('#ul').html('<strong>123</strong>');
</script>
css操作
$('#ul').css('color','red');
元素的显示和隐藏：本质上是display:none;
$('#ul li[name =python]').show();
$('#ul li[name =python]').hide();
?
?
10.总结
-
多去看源码，特别是游戏的，看起来更轻松
-
学习别人的代码，按住那一行Delete删掉，你就知道了哪些是核心元素了，剩下的就可以解析学习，css要进行改动
-
多去看网页，提升眼界