前端知识体系
什么是JavaScript
JavaScript是一门世界上最流行的脚本语言。
ECMAScript可以理解为是JavaScript的一个标准。
最新版本es6。
但是大部分浏览器还只停留在支持es5代码上。
开发环境和生产环境版本不一致。
快速入门
引入JavaScript
- 内部标签
- 外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部标签-->
<script>
// alert('hello,world');
</script>
<!--外部引入-->
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
alert('hello,world');
基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定义变量 变量类型 变量名 = 变量值;
var num = 1;
// 2.条件控制
alert(num);
if (2>1) {
alert("true");
}
// 3.在浏览器控制台打印变量
console.log(num);
</script>
</head>
<body>
</body>
</html>
数据类型
Number 数字
js不区分整数和小数
123 // 整数
123
123.1 // 浮点数
123.1
1.231e2 // 科学计数法
123.1
-123 // 负数
-123
NaN // not a number
NaN
Infinity // 表示无限大
Infinity
String 字符串
'abc'
"abc"
"abc"
"abc"
Boolean 布尔
console.log(2>1)
VM520:1 true
console.log(2<1)
VM568:1 false
Null 对空
Undefined 未定义
Symbol 独一无二的值
Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
Array 数组
var arr = [1,2,3,4,'ab',null,true];
new Array(1,2,3,4,'ab',null,true);
console.log(arr[2]);
Object 对象
var person = {
name:'zhangyq',
age:18,
tags:['java','js','web']
}
console.log(person.age);
Function 函数
严格检查模式strict
/*
前提：IDEA需要设置支持ES6语法
'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let去定义，如：let i = 1;
*/
//严格检查模式strict，严格加成模式下，i = 1报错
'use strict';
//全局变量
//i = 1;
IDEA设置支持ES6语法
数据类型
字符串
'use strict';
// 1.正常字符串使用单引号或双引号包裹
console.log('a');
console.log("a");
// 2.注意转义字符
console.log('a\'');
console.log("a\'");
console.log('a\nb');
console.log('\u4e2d'); // Unicode
console.log('\x41'); // Ascll
// 3.多行字符串编写，使用反引号`
var msg = `hello
world
你好`;
console.log(msg);
// 4.模板字符串，使用反引号`和$
let name='zhangyq';
console.log(`nihao,${name}`);
数组
// 数组可以包含任意的数据类型
var arr=[0,1,2,3,4,5];
// slice() 截取数组的一部分，返回一个新的数组
var arr1=arr.slice(3);
// push() 压入到尾部
arr.push('a','b');
// pop() 弹出最后一个
arr.pop();
// unshift() 压入到头部
arr.unshift('a','b');
// shift(); 弹出第一个
arr.shift();
// sort() 排序
var arr=['B','C','A'];
arr.sort();
console.log(arr);
// reverse() 反转
arr.reverse();
console.log(arr);
// concat() 拼接，返回新的数组，不改变原来的数组
var arr2=arr.concat([1,2,3]);
console.log(arr2);
console.log(arr);
// join() 打印拼接数组，使用特定的字符串连接
console.log(arr.join('-'));
// 多维数组
var arr=[[1,2],[3,4],['a','b']];
对象
var person={
name:"zhangyq",
age:18,
phone:"13299998888"
}
person.name="zhangsf";
//删除对象属性
delete person.name
//添加对象属性
person.email="zhangsf@163.com"
//判断属性是否在这个对象中
'age' in person
//判断方法是否在这个对象中
'toString' in person
判断属性或方法是否是自身拥有的
person.hasOwnProperty('age');
person.hasOwnProperty('toString');
流程控制
- if判断
- while循环
- for循环
- forEach循环
- for...in
- for...of
//forEach循环
var arr=[1,2,2,3,4,5];
arr.forEach(function(value){
console.log(value);
});
//for...in的值是索引
for(var index in arr){
console.log(arr[index]);
}
//for...of循环的是具体的值
for(var v of arr){
console.log(v);
}
Map和Set ES6新特性
//Map
var map=new Map([['tom',100],['jack',90],['join',80]]);
var name=map.get('tom');
map.set('admin',123);
map.delete('admin');
//Set 无序不重复集合
var set=new Set([1,2,2,3,3]); // set可以去重
set.add(4);
set.delete(1);
console.log(set.has(2)); // 是否包含某个元素
函数
定义函数
- 定义方式一
// 一旦执行到return代表函数结束，返回结果！
// 如果没有执行return，函数执行完也会返回结果，结果就是undefined。
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(-10);
- 定义方式二
// function(x){...}是匿名函数，通过abs就可以调用函数！
var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(-10);
JavaScript可以传任意个参数，也可以不传递参数！
var abs=function(x){
//手动抛出异常
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
- arguments代表所有的参数，是一个数组
var abs=function(x){
if(arguments.length=1){
return x;
}else if(arguments.length>1){
return arguments.length;
}
}
rest
- ES6引入的新特性，获取除了已经定义的参数之外的所有参数
- rest参数只能写在最后面，必须用...标识
function fun(a,b,...rest){
console.log("a->"+a);
console.log("b->"+b);
console.log(rest);
}
变量的作用域
- 函数体中声明的变量，函数体外不可以使用（非要实现的话，可以研究下闭包）
function fun(){
var x=1;
x=x+1;
}
x=x+2; // Uncaught ReferenceError: x is not defined
- 内部函数可以访问外部函数的变量，反之则不行
function funA(){
var x=1;
function funB(){
var y=x+1;
}
var z=y+1; // Uncaught ReferenceError: y is not defined
}
- 全局变量：定义在函数外部
var x=1;
function f(){
console.log(x);
}
console.log(x);
- 全局对象window：默认所有的全局变量，都会自动绑定在window对象下
var x=1;
console.log("x->"+x);
console.log("window.x->"+window.x);
- JavaScript实际只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，直到全局作用域window也没有找到，就会报错
- 由于所有的全局变量都会绑定在window上，如果不同的js文件，使用了相同的全局变量，会冲突，如何减少冲突？把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
// 唯一全局变量
var main={};
//定义全局变量
main.name='zhangyq';
main.add=function(a,b){
return a+b;
}
let 局部变量声明
function f(){
for(var i=0;i<100;i++){
console.log(i);
}
console.log(i+1); // 101 问题？i出了作用域还可以使用
}
ES6 let关键字，解决局部作用域问题！
function f(){
for(let i=0;i<100;i++){
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
建议使用let去定义局部作用域的变量
const 常量声明 只读变量
const PI=3.14; // 只读变量
console.log(PI);
pi=3.15; // TypeError: Assignment to constant variable
方法
- 方法就是把函数放在对象的里面
var qing={
name:'zhangyq',
birth:2000,
age:function(){
var now=new Date().gerFullYear();
return now-this.birth;
}
}
qing.name;
qing.age();
- apply指定调用方法的对象
内部对象
Date
方法自查
Json
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
var user={name:"zhangyq",age:18,sex:'男'}
//对象转化为json字符串
var jsonStr=JSON.stringify(user);
//对象{name: "zhangyq", age: 18, sex: "男"}
//json字符串{"name":"zhangyq","age":18,"sex":"男"}
//json字符串转化为对象
var obj=JSON.parse(jsonStr);
面向对象编程
原型继承
var user={name:"zhangyq",age:18,sex:'男'}
var xiaoming={name:"xiaoming"}
//xiaoming的原型是user
xiaoming.__proto__=user
/*xiaoming
{name: "xiaoming"}
name: "xiaoming"
__proto__:
age: 18
name: "zhangyq"
sex: "男"
__proto__: Object
*/
class继承
class关键字是在ES6引入的
//定义一个类，属性，方法
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('xiaohong');
//继承
class XiaoStudent{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert('我是一名小学生');
}
}
操作BOM对象
- 浏览器介绍
- IE6~11
- Chrome
- Safari
- FireFox
- window 代表浏览器窗口
window.alert(1)
window.innerHeight
window.outerHeight
- navigator 封装了浏览器的信息
- screen 代表屏幕
screen.width
screen.height
- location 代表当前页面的URL信息
location
//刷新页面
location.reload()
//跳转页面
location.assign('www.baidu.com');
- document 代表当前的页面
document.title
document.title='我的页面'
//获取cookie
document.cookie
- history 代表浏览器历史记录
history.back()
history.forward()
操作DOM对象
DOM 文档对象模型
浏览器网页就是一个DOM树形结构
<div id="div1">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
//根据标签名查询
var h1Array=document.getElementsByTagName('h1');
//根据ID查询
var p1=document.getElementById('p1');
//根据class名查询
var p2Array=document.getElementsByClassName('p2');
var div1=document.getElementById('div1');
//获取子节点
var childrens=div1.children;
//修改文本值
p1.innerText='123';
//修改html
p1.innerHTML='<strong>123</strong>';
//修改css样式
p1.style.color='red';
//删除节点，只能通过父节点删除子节点
div1.removeChild(p1);
p1.parentElement.removeChild(p1);
div1.removeChild(div1.children[2]);
div1.removeChild(div1.children[1]);
div1.removeChild(div1.children[0]);
//追加已有标签
div1.appendChild(p2);
//创建标签并追加
var p4=document.createElement('p');
p4.id='p4';
p4.innerText='p4';
p4.setAttribute('class','p2');
div1.appendChild(p4);
//插入p2节点到p1前
div1.insertBefore(p2,p1);
操作表单（MD5加密密码）
<!--MD5工具类-->
<script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form method="post" action="#">
<p><span><label>用户名 </label></span><input type="text" id="username" name="username"></p>
<p><span><label>密码 </label></span><input type="password" id="password"></p>
<input type="hidden" id="md5_password" name="password">
<p><button type="submit" onclick="submit()">提交</button></p>
</form>
//获取input
var input_username=document.getElementById('username');
//获取input的值
var username=input_username.value;
//修改input的值
input_username.value='zhangyq';
function submit(){
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
console.log(username);
console.log(password);
//MD5加密密码
md5_password=md5(password);
console.log(md5_password);
document.getElementById('md5_password').value=md5_password;
}
jQuery
jQuery库 封装了大量JavaScript函数
下载引用jQuery库
下载：https://jquery.com
<!--引用在线或本地的-->
<!--在线版-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<!--开发版-->
<script src="js/jquery-3.5.1.js"></script>
<!--生产压缩版-->
<script src="js/jquery-3.5.1.min.js"></script>
公式 $(selector).action()
<a id="a1"></a>
$('#a1').click(function(){
alert('hello');
});
jQuery与JavaScript对比
//JavaScript
document.getElementsByTagName();
document.getElementById();
document.getElementsByClassName();
//jQuery css中的选择器全部可以使用，如：层级选择器，伪类选择器，属性选择器等
$('p').click();
$('#id').click();
$('.class').click();
事件
- 鼠标事件
- 键盘事件
- 其他事件
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<!--获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标</div>
<script>
//当网页元素加载完毕后，响应事件
//$(document).ready(function(){});
//可简化为
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
});
});
</script>
操作DOM元素
$('#test_ul li[name=python]').text();
$('#test_ul li[name=python]').html();
$('#test_ul li[name=python]').css({"color":"#ff0011","background":"blue"});
$('#test_ul li[name=python]').css("color","#ff0011");
$('#test_ul li[name=python]').css("color");
$('#test_ul li[name=python]').hide();
$('#test_ul li[name=python]').show();
$('#test_ul li[name=python]').toggle();
$(window).width();
$(window).height();
jQuery中文文档：https://jquery.cuishifeng.cn/
小技巧
巩固JS 看jQuery源码，看小游戏源码-源码之家
源码之家：https://www.mycodes.net/
巩固HTML/CSS 扒网站，down下来，对应修改看效果
扒网站步骤：
- 打开网站，选择Elements，选中代码，按Delete删除，不影响页面继续删除，影响页面回退，删除下一行，直到没有删除的为止。
- 右键选择Copy->Copy outerHTML，复制代码，然后将代码粘贴到自己的HTML文件中，修改相应的html和css。
经验首页