- A+
所属分类：Web前端
前端知识体系
什么是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; 
数据类型
字符串
'use strict'; // 1.正常字符串使用单引号或双引号包裹 console.log('a'); console.log("a"); // 2.注意转义字符 console.log('a''); console.log("a'"); console.log('anb'); 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="[email protected]" //判断属性是否在这个对象中 '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(); 内部对象
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库
<!--引用在线或本地的--> <!--在线版--> <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源码，看小游戏源码-源码之家
巩固HTML/CSS 扒网站，down下来，对应修改看效果
扒网站步骤：
- 打开网站，选择Elements，选中代码，按Delete删除，不影响页面继续删除，影响页面回退，删除下一行，直到没有删除的为止。
- 右键选择Copy->Copy outerHTML，复制代码，然后将代码粘贴到自己的HTML文件中，修改相应的html和css。
