1、快速入门
1.1 引入Javascript
-
内部标签
<script> //...... </script>
-
外部引入
<script src="js文件地址"></script>
-
测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个Javascript程序</title> <!-- script标签内,写Javascript代码--> <!-- <script>--> <!-- alert('hello world!');--> <!-- </script>--> <!-- 外部引入--> <!-- 注意:script标签必须成对出现--> <script src="js/Pan.js"></script> </head> <body> </body> </html>
1.2 基本语法入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本语法入门</title> <!--Javascript严格区分大小写--> <script> //1.定义变量 变量类型 变量名 = 变量值 var num = 1; // alert(num); //2.条件控制 if (num>1){ alert("true"); }else { alert("false"); } //console.log(num) 在浏览器的控制台打印变量! </script> </head> <body> </body> </html>
1.3 数据类型
数值,文本,图形,音频,视频
-
变量:var a
-
JS不区分小数和整数,Number。
123 // 整数123 123.1 // 浮点数123.1 1.123e3 // 科学计数法 -99 // 负数 NaN // not a number Infinity // 表示无限大
-
字符串:‘abc’ “abc”
-
布尔值:true,false
-
逻辑运算符
-
&& 两个都为真,结果为真
-
|| 一个为真,结果为真
-
! 真即假,假即真
-
-
比较运算符
-
=,如:1与"1"
-
== 等于(类型不一样,值一样,也会判断为true)
-
=== 绝对等于(类型一样,值一样,结果为true)
-
尽量不要使用 == 比较,因为:
-
NaN === NaN,这个与所有的数值都不相等,包括自己。
-
只能通过isNaN(NaN)来判断这个数是否是NaN。
-
-
-
浮点数
-
尽量避免使用浮点数进行运算,存在精度问题!
console.log((1/3) === (1-2/3)); Math.abs(1/3-(1-2/3))<0.00000001;
-
-
null 和 undefined
-
null 空;
-
undefined 未定义;
-
-
数组
-
Java的数组必须是相同类型的对象,JS中不需要这样。
-
// 保证代码的可读性,尽量使用[] var arr = [1,2,3,4,5,'hello',null,true]; // 第二种定义方法 new Array(1,2,3,4,5,'hello');
-
取数字下标:如果越界了,就会报undefined。
-
对象:是大括号,数组是中括号。
-
每个属性之间使用逗号隔开,最后一个属性不需要逗号。
-
// Person person = new Person(1,2,3,4,5); var person = { name:'Tom', age:3, tags:['js','java','web','...'] }
-
取对象值。
person.name // "Tom" person.age // 3
1.4 严格检查模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>严格检查模式</title> <script> 'use strict';//严格检查模式,预防Javascript的随意性导致产生的一些问题,必须写在JS的第一行 let i = 1;//局部变量建议使用let定义 </script> </head> <body> </body> </html>
2、 数据类型
2.1 字符串
-
正常的字符串使用单引号或者双引号包裹
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符串</title> <script> 'use strict' console.log('a\''); console.log("a"); let name = 'Pan'; let age = 3; let msg = `你好,${name}`; </script> </head> <body> </body> </html>
-
需要注意转义字符
-
\' \n \t \u4e2d \u### Unicode字符 \x41 ASCLL字符
-
-
多行字符编写
-
var msg = `hello world 你好 666`
-
-
模板字符串
-
let name = 'Pan'; let age = 3; let msg = `你好,${name}`;
-
-
字符串长度
-
str.length
-
-
字符串的可变性,不可变
-
大小写转换
-
//注意:这是方法,不是属性 student.toUpperCase() student.toLowerCase()
-
-
获取指定的下标
-
studeny.indexof('x')
-
-
substring
-
[) 含前不含后 student.substring(1) //从第一个字符开始截取到最后一个字符串 student.substeing(1,3) //截取[1,3)
-
2.2 数组
Array可以包含任意的数组类型
var arr = [1,2,3,4,5,'hello'];//通过下标取值和赋值 arr[0]; arr[0] = 1;
-
长度
arr.length
注意:假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
-
indexOf:通过元素获得下标索引
arr.indexof(2) 1
字符串的“1”和数字1是不同的
-
slice()截取数组的一部分,返回一个新的数组
-
push、pop
push:压入到尾部 pop:弹出尾部的一个元素
-
unshift()、shift()
unshift:压入到头部 shift:弹出头部的一个元素
-
排序shot()
-
元素反转:reverse()
-
concat()
arr.concat([1,2,3]) Array(6) [ "C", "B", "A", 1, 2, 3 ] arr Array(3) [ "C", "B", "A" ]
注意:concat()并未修改数组,只是返回了一个新的数组
-
连接符:join()
打印拼接数组,使用特定的字符串连接
arr Array(3) [ "C", "B", "A" ] arr.join('-') "C-B-A"
-
多维数组
arr = [[1,2],[2,3],[3,4]] Array(3) [ (2) […], (2) […], (2) […] ] 0: Array [ 1, 2 ] 1: Array [ 2, 3 ] 2: Array [ 3, 4 ] length: 3 <prototype>: Array [] arr[1,1] Array [ 2, 3 ]
2.3 对象
若干个键值对
var 对象名 = { 属性名:属性值, 属性名:属性值, 属性名:属性值, 属性名:属性值 }
-
对象赋值
person.name = "Zhang" "Zhang" person.name "Zhang"
-
使用一个不存在的对象属性,不会报错!
person.ah undefined
-
动态的删减属性
delete person.name true person Object { age: 20, email: "1951984883@qq.com", score: 60 } age: 20 email: "1951984883@qq.com" score: 60 <prototype>: Object { … }
-
动态的添加属性
person Object { age: 20, email: "1951984883@qq.com", score: 60 } age: 20 email: "1951984883@qq.com" score: 60 <prototype>: Object { … } person.haha = "haha" "haha" person Object { age: 20, email: "1951984883@qq.com", score: 60, haha: "haha" } age: 20 email: "1951984883@qq.com" haha: "haha" score: 60 <prototype>: Object { … }
-
判断属性值是否在这个对象中
'age' in person true //继承 'toString' in person true
-
判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
2.4 流程控制
if判断
var age = 3; if (age>3){ alert("true"); }else { alert("false"); }
for循环
for (let i = 0; i < 1000; i++) { console.log(i); }
while循环
var age = 3; while (age<100){ age = age + 1; console.log(age); }
forEach循环
var age = [1,2,85,21654,12,54,212,4,51,2415,45,21,54,5]; age.forEach(function (value) { console.log(value) })
for...in
var age = [1,2,85,21654,12,54,212,4,51,2415,45,21,54,5]; //函数 for(var index in object){} for (var num in age){ if (age.hasOwnProperty(num)){ console.log("存在"); console.log(age[num]); } }
2.5 Map和Set
ES6的新特性
Map:
//ES6 Map //学生的成绩,学生的名字 var map = new Map([["tom",100],["jerry",90],["merry",80]]); var score = map.get('tom'); console.log(score); map.set('jack',70);//新增或修改 map.delete('tom');//删除一个元素
Set:无序不重复的集合
var set = new Set([3,1,1,1,1,1,1]);//set可以去重 set.add(2); set.delete(1); console.log(set.has(3));//是否包含某个元素
2.6 iterator
遍历数组
var arr = [1,2,3]; for (var x of arr) { console.log(x); }
遍历Map
var map = new Map([["tom",100],["jerry",90],["merry",80]]); for (let x of map) { console.log(x); }
遍历Set
var set = new Set([3,2,1]);//set可以去重 for (let x of set) { console.log(x); }
3、函数
3.1 定义函数
定义方式一
绝对值函数
function abs(x){ if(x>=0){ return x; }else{ return -x; } }
一旦执行到return代表函数结束,返回结果!
如果没有执行return,函数执行问也会返回结果,结果为undefined
定义方式二
var abs = function(x){ if(x>=0){ return x; }else{ return -x; } }
function(x){.....}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数。
方式一和方式二等价
调用函数
abs(90) //90 abs(-90)//90
参数问题:js可以传任意个参数,也可以不传递参数
参数是否存在的问题:
假设参数不存在,如何规避
var abs = function(x){ if (typeof x !== 'number'){ throw 'Not a Number!'; } if(x>=0){ return x; }else{ return -x; } }
arguments
arguments
是一个js免费赠送的关键字
代表传递进来的所有参数是一个数组
var abs = function(x){ console.log("x="+x); for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } if(x>=0){ return x; }else{ return -x; } }
问题:arguements会包含所有的参数,我们有时候想使用多余参数进行附加操作。需要排除已有的参数
rest:获取除了已经定义的参数之外的所有参数
以前:
if (arguments.length>2){ for (var i = 2; i < arguments.length; i++) { //....... } }
现在:
function a(a,b,...rest){ console.log("a=>"+a); console.log("b=>"+b); console.log(rest); }
rest只能写在最后面,必须用...标识。
3.2 变量的作用域
在js中,var定义变量实际是有作用域的。
-
假设在函数体中声明,则在函数体外不能使用
function a(){ var x = 1; x = x + 1; } x = x + 2;//Uncaught ReferenceError: x is not defined
-
内部函数可以访问外部函数的成员,反之则不行
-
假设内部函数变量和外部函数变量重名,函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量
提升变量的作用域
function a(){ var x = "x" + y; console.log(x); var y = "y"; }
结果:x undefined
说明:js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值
建议:所有的变量定义都放在函数头部,便于代码维护
全局函数
//全局变量 var x = 1; function f(){ console.log(x); } f(); console.log(x);
全局对象window
var x = "xxx"; alert(x); alert(window.x);//默认所有的全局变量都会绑定在window对象下。
js实际上只有一个全局作用域,任何变量(函数 也可视为变量),假设没有在函数的作用范围内找到,就会向外查找,如果在全局作用域都没找到,报错ReferenceError
规范
由于所有的全局变量都会绑定到window上,如果不同的js文件,使用了相同的全局变量,会导致冲突。
解决:把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
//唯一全局变量 var Pan = {}; //定义全局变量 Pan.name = 'pan'; Pan.add = function (a,b){ return a + b; }
局部作用域let
function a(){ for (var i = 0; i < 100; i++) { console.log(i); } console.log(i+1);//i出了作用域还能使用 }
let关键字:建议使用let关键字定义局部作用域的变量
function a(){ for (let i = 0; i < 100; i++) { console.log(i); } console.log(i+1);//Uncaught ReferenceError: i is not defined }
常量const
-
在ES6之前,常量的定义:全部使用大写字母命名的变量就是常量,开发过程中不建议修改此类变量的值!!
-
在ES6引入了关键字
const
const PI = '3.14'; console.log(PI); PI = "123";//Attempt to assign to const or readonly variable
3.3 方法
定义方法
-
方法就是把函数放在对象里,对象只有两个东西:属性和方法
var a = { name:'张三', birth:'2002', //方法 age:function (){ //今年 - 出生的年 var now = new Date().getFullYear(); return now - this.birth; } } //属性 a.name //方法,一定要带() a.age()
-
this是无法指向的,默认指向调用它的那个对象
function getAge(){ //今年 - 出生的年 var now = new Date().getFullYear(); return now - this.birth; } var a = { name:'张三', birth:'2002', //方法 age:getAge } //a.age() 成功 //getAge() NaN
apply:在js中可以控制this指向
function getAge(){ //今年 - 出生的年 var now = new Date().getFullYear(); return now - this.birth; } var a = { name:'张三', birth:'2002', //方法 age:getAge }; //a.age() 成功 //getAge() NaN getAge.apply(a,[]);//this指向了a这个对象,参数为空
4、 内部对象
标准对象
typeof 123 "number" typeof '123' "string" typeof true "boolean" typeof NaN "number" typeof [] "object" typeof {} "object" typeof Math.abs "function" typeof undefined "undefined"
4.1 Date
基本使用
var now = new Date();//Date Sun Oct 02 2022 16:47:09 GMT+0800 (中国标准时间) now.getFullYear();//年 now.getMonth();//月 now.getDate();//日 now.getDay();//星期几 now.getHours();//时 now.getMinutes();//分 now.getSeconds();//秒 now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00 到现在的毫秒数 console.log(new Date(1664701331985))//通过时间戳获取时间 Date Sun Oct 02 2022 17:02:11 GMT+0800 (中国标准时间)
转换
now = new Date(1664704390128) Date Sun Oct 02 2022 17:53:10 GMT+0800 (中国标准时间) now.toLocaleString()//注意:调用的是一个方法,不是属性 "2022/10/2 17:53:10" now.toGMTString() "Sun, 02 Oct 2022 09:53:10 GMT"
4.2 JSON
json是什么
早期,所有的数据传输习惯用XML文件!
-
JSON(JavaScript Object Notation,JS 对象简谱)是一种轻量级的数据交换格式。
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
-
易于人们阅读和编写,同时也易于机器解析和生成,并且有效的提升网络传输效率。
在js中一切皆为对象,任何js支持的类型都可以用JSON来表示!
格式
-
对象都用{}
-
数组都用[]
-
所有的键值对都是用key:value
JSON字符串和JS对象的转换
var user = { name:"Pan", age:20, sex:"男" } //对象转化为JSON字符串 var json_user = JSON.stringify(user);//{"name":"Pan","age":20,"sex":"男"} //JSON 字符串转化为对象,参数为JSON字符串 var obj = JSON.parse('{"name":"Pan","age":20,"sex":"男"}')
JS和JSON的区别
var obj = {a:'hello',b:'world'}; var json = '{"a":"hello","b":"world"}'
4.3 Ajax
-
原生的JS写法 xhr异步请求
-
jQuey封装好的方法 $("name").ajax("")
-
axios 请求
5、 面向对象编程
原型对象
var user = { name:"Pan", age:20, sex:"男", run:function (){ console.log(this.name + "run.....") } }; var xiaoming = { name:"xiaoming" } var Bird = { fly:function (){ console.log(this.name + " fly......"); } }; //小明的原型 是user xiaoming.__proto__ = Bird; //小明的原型 是user xiaoming.__proto__ = user;
//原始方法 function Student(name) { this.name = name; } //给Student新增一个方法 Student.prototype.hello = function (){ alert('Hello!'); }
class 继承
class关键字是在ES6引入的
-
定义一个类,属性,方法
// ES6之后 class Student{ constructor(name) { this.name = name; } hello(){ alert('Hello!'); } } class xxs extends Student{ constructor(name,grade) { super(name); this.grade = grade; } myGrade(){ alert("我是一名小学生!"); } } var a = new Student("Pan"); var b = new xxs("Zhang",5);
本质:查看对象原型
console.log (b) Object { name: "Zhang", grade: 5 } • grade: 5 • name: "Zhang" • <prototype>: Object { … } •• constructor: class xxs { constructor(name, grade) }•• myGrade: function myGrade()•• <prototype>: Object { … }
6、操作BOM对象(重点)
浏览器介绍
JavaScript和浏览器关系?
JavaScript诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型
window
window代表浏览器窗口
window.alert(1) undefined window.innerHeight 176 window.innerWidth 1152 window.outerHeight 624 window.outerWidth 1177
Navigator
Navigator封装了浏览器的信息
window.Navigator.appName undefined navigator.appName "Netscape" navigator.appVersion "5.0 (Windows)" navigator.appCodeName "Mozilla" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0" navigator.platform "Win32"
大多数时候不使用navigator对象,因为有可能会被人为修改
screen
//代表屏幕尺寸 screen.width 1152 screen.height 648
location (重要)
location 代表当前页面的URL信息
host: "cn.bing.com" //主机 href: "https://cn.bing.com/?FORM=Z9FD1" //跳转的网页 protocol: "https:" //协议 reload: function reload() //刷新网页 //设置新的地址 location.assign('地址')
document
document 代表当前的页面,HTML DOM文档树
document.title "Bing" document.title='Pan' "Pan"
获取具体的文档树节点
<dl id="app"> <dt>Java</dt> <dd>JavaSE</dd> <dd>JavaEE</dd> </dl> <script> var d1 = document.getElementById('app'); </script>
获取cookie
document.cookie ""
history:代表浏览器的历史记录
history.back()//后退 history.forward()//前进
7、操作DOM对象
DOM:文档对象模型
核心
浏览器网页就是一个DOM树形结构!
-
更新:更新DOM节点
-
遍历DOM节点:得到DOM节点
-
删除:删除一个DOM节点
-
添加:添加一个新的节点
要操作一个DOM节点,必须要先获得这个DOM节点!
获得DOM节点
//对应css选择器 var h1 = document.getElementsByTagName('h1'); var p1 = document.getElementById('p1'); var p2 = document.getElementsByClassName('p2'); var father = document.getElementById('father'); var children = father.children;//获取父节点下的所有子节点 // father.firstChild // father.lastChild
更新节点
-
id1.innerText = '123'
修改文本的值 -
id1.innerHTML = '<strong>123</strong>'
可以解析HTML文本标签 -
操作JS
id1.style.color = 'red'//属性使用字符串 "red" id1.style.fontSize = '200px' "200px" id1.style.padding = '2em' "2em"
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> var self = document.getElementById('p1'); var father = p1.parentElement; father.removeChild(self) //删除是一个动态过程 father.removeChild(father.children[0]); father.removeChild(father.children[1]); father.removeChild(father.children[2]); </script>
注意:删除多个节点的时候,children是在时刻变化的,删除节点时,一定要注意!!!
插入节点
当获得某个DOM接待你,假设这个DOM节点是空的,可以通过innerHTML增加一个元素。如果这个DOM节点已经存在元素了,则会产生覆盖!!
<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);//追加节点到最后 </script>
创建一个新的标签
//通过JS创建一个新的节点 var newP = document.createElement('p');//创建一个新的p标签 newP.id = 'newP'; newP.innerText = 'Hello World!'; list.append(newP); //创建一个标签节点(通过这个属性,可以设置任意的值) var myScript = document.createElement('script'); myScript.setAttribute('type','text/javascript') //修改body var body = document.getElementsByTagName('body'); body[0].style.background = "#0fe198";
insert
<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 ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); //insertBefore(js,ee):将js节点插入在ee节点前 list.insertBefore(js,ee); </script>
8、操作表单(验证)
表单是什么 from DOM树
-
文本框 text
-
下拉框 select
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
表单的目的:提交信息
获得要提交的信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作表单</title> </head> <body> <form action="" method="post"> <p> <spqn>用户名:</spqn><input type="text" id="username"> </p> <!-- 多选框的值就是定义好的value值--> <p> <span>性别:</span> <input type="radio" name="sex" value="man" id="boy">男 <input type="radio" name="sex" value="women" id="girl">女 </p> </form> <script> var input_text = document.getElementById('username'); //只能取得当前的值 var boy_radio = document.getElementById('boy'); var girl_radio = document.getElementById('girl'); //使用XXX.checked查看返回结果,如果为true则被选中,如为false则未被选中 boy_radio.checked; boy_radio.checked = true;//选择赋值 //得到输入框的值 input_text.value; //修改输入框的值 input_text.value = 'xxx'; </script> </body> </html>
提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提交表单</title> <!-- MD5工具类--> <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <!--表单绑定提交事件 οnsubmit=绑定一个提交检测的函数 将这个结果返回给表单,使用onsubmit接收 --> <form action="https://www.baidu.com" method="post" οnsubmit="return a()"> <p> <spqn>用户名:</spqn><input type="text" id="username" name="username"> </p> <p> <spqn>密码:</spqn><input type="password" id="input_password"> </p> <input type="hidden" id="md5_password" name="password"> <!-- 绑定事件 onclick 被点击--> <button type="submit">提交</button> </form> <script> function a() { var username = document.getElementById('username'); var password = document.getElementById('input_password'); var md5_password = document.getElementById('md5_password'); md5_password.value = md5(md5_password.value); //可以校验判断表单内容,true就是通过提交,false为阻止提交 return true; // console.log(username.value); // //MD5算法 // password.value = md5(password.value); // console.log(password.value); } </script> </body> </html>
9、jQuery
引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="lib/jquery-3.6.1.js"></script> </head> <body> <!-- 公式:$(selector).action() --> <a href="" id="test_jQuery">点击</a> <script> document.getElementById('id'); //选择器就是CSS选择器 $('#test_jQuery').click(function (){ alert('Hello World!'); }) </script> </body> </html>
选择器
//原生js:选择器少,不方便记忆 //标签 document.getElementsByTagName(); //id document.getElementById(); //类 document.getElementsByClassName(); //jQuery:CSS中的选择器都可使用 #('p').click()//标签选择器 #('#id').click()//id选择器 #('.class').click()//类选择器
事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <script src="lib/jquery-3.6.1.js"></script> <style> #divMove{ width: 500px; height: 500px; border: 2px 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+'\ny: '+e.pageY) }) }) </script> </body> </html>
操作DOM
节点文本操作
$('#test_ul li[name=EE]').text();//获得值 $('#test_ul li[name=EE]').text('设置值');//设置值 $('#test_ul').html();//获得值 $('#test_ul').html('<strong>xxx</strong>');//设置值
CSS的操作
$('#test_ul li[name=EE]').css({"color","red"});
元素的显示与隐藏
本质:display:none $('#test_ul li[name=EE]').show()//显示 $('#test_ul li[name=EE]').hide()//隐藏