1.什么是Javascript
1、什么是Javascript
1.1、概述
JavaScript是一门世界上最流行的脚本语言
Java、javaScript
10天~
一个合格的后端人员，必须要精通JavaScript
1.2、历史
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到了es6版本~
但是大部分浏览器还停留在支持es5代码上~
开发环境–线上环境，版本不一致
2、快速入门
2.1、引入JavaScript
-
内部标签
alert（‘xxx’）:弹窗
<!--内部js--> <script> alert('hello word!') /*弹窗 alert*/ </script> -
外部引入
<script src="../JS/MW.js"></script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hnm13Jh9-1636732352338)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211010110620228.png)]
注意：Script成对出现
//不用显示定义type，也默认就是javascript
<script type="text/javascript"></script>
2.2、基本语法入门
浏览器调试须知：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-13DR9uOi-1636732352341)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211012162248432.png)]
Elements：元素
Console：控制台
Sources：源码调试
Network：互联网抓包
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkHirD2e-1636732352342)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211012162006203.png)]
<script>
<!--script严格区分大小写！-->
/*1、定义变量*/
var source=66;/*变量类型只有一个var 变量名=变量值*/
/* alert(source);*/
/*2、条件控制*/
if(source>60 && source<70){
alert(source)
}else if (source>70 && source<80){
alert(source);
}
alert('999');
// 在浏览器的控制台打印变量！
console.log('我的宝儿！')
script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uzmuPGdT-1636732352345)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211012163403768.png)]
2.3、数据类型
数值，文本，图形，视频，音频。。。。
变量
var _$
//变量名不能用数字开头
number
js不区分小数和整数，都用number
123//整数123
123.12//浮点数123.1
1.12e3//科学技术法=1120
-88//负数
NaN//not a number 不是一个number
Infinity //表示无限大
字符串
‘abc’ “abc”
布尔型
ture， flase
<script>
var a=5;
console.log(a>4);
</script>
逻辑运算
&& and
|| or
! not
比较运算符
= //赋值
== //等于(类型不一样，值一样，会判断ture)
==== //等于（类型一样，值一样，判断ture）
这是js的缺陷，坚持不要使用==比较
须知
- NaN==NaN ，这个与所有的数值都不相等，包括自己
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M9uNJhzy-1636732352349)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019221458871.png)]
- 只能通过isNaN(NaN)来判断
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhQHjJgt-1636732352350)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019221956575.png)]
-
浮点数问题
<script> /* var a=5;*/ console.log((1-1/3)===1/3); </script>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NECeUUyg-1636732352352)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019222629704.png)]
尽量避免使用浮点数运算，存在精度问题
函数绝对值Math.abs
使用绝对值比较
<script> /* var a=5;*/ console.log((Math.abs(1-2/3)===1/3)<0.00000001); </script>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewnuvdFG-1636732352353)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019223106756.png)]
数组
JAVA的数组必须是相同类型的对象~，JS不用这样
对象定义数组new Array
<script>
/* var a=5;*/
/* console.log((Math.abs(1-1/3)===1/3)<0.00000001);*/
var arr = [1,2,3,4,5,null,'hello',true]//面向程序
new Array(1,2,4,5) //面向程序
console.log(arr[6]);
</script>
取数组下表如果越界会报
undefined
null和undefined
-
null 表示空
-
undefined 未定义
对象
对象是大括号，数组是中括号
var person ={
name:'chengmingwei',
age:20,
arr:[1,2,4,5,null]
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZNq28Li-1636732352355)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019230430627.png)]
取对象的值
person.age
>20
person.name
>'chengmingwei'
2.4、严格检查格式
//未定义 的变量 ，默认全局变量
前提是是ES6模式下
局部变量建议使用let去定义，必须写在第一行script
用严格检查格式，use strict就会报错变量未定义类型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pT6T6WgA-1636732352356)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020105854965.png)]
<script>
/* 'use strict' 严格检查模式，防止JAVAScrip的随意性导致出现问题t*/
'use strict';
let i=1;
console.log(i);
</script>
3、数据类型
3.1、字符串
1、正常字符串我们使用，单引号或者双引号包裹
2、注意转义字符\
\'
\n
\u4e2d \u#### unicode字符
\x41 ASCLL字符
3、多行字符串编写
<script>
//tab 上面的飘号
var msg=`
hello
world
英雄联盟
`
</script>
4.模板字符串
'use strict';//严格检查格式
let name='chengmingwei';
let age=3;
let msg=`你好呀,${name}`;
console.log(msg);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBWhJv1X-1636732352358)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020185316242.png)]
5、字符串长度
//str.length
var student='student';
console.log(student.length);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJZH6cto-1636732352359)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020190705354.png)]
6、字符串的可变性，不可变
7、大小写转换
//注意，这里是方法，不是属性了
student.toupperCase()
student.toLowerCase()
8、student.lindexof(‘t’)
9、substring
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
3.2、数组
Array可以包含任意的数据类型
//控制台打印数组
var arr=[1,2,3,4,56];
console.log(arr);
1、长度
var arr=[1,2,3,4,56];
arr[0]=99;
arr.length=10;
console.log(arr);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8I8Itqo-1636732352361)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020203531774.png)]
注意：加入arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失，如果过大就会用空来替补。
2.indexOf 通过元素查找索引
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7pWnUcHU-1636732352362)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020205235620.png)]
字符串的‘’1‘’和数字的1不同
3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xIU0EB0-1636732352364)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020205626544.png)]
4、push，pop //类似数据结构中的栈
push压入尾部
pop弹出尾部
5、unshift(),shift()头部
unshift压入头部
shift弹出头部
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0lp5dTq-1636732352365)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020210438424.png)]
6.排序sort
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScblfbTE-1636732352366)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020210927097.png)]
7.元素反转reverse()
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2WEANLC5-1636732352368)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020211046480.png)]
8.concat()拼接
arr.concat('a','b','c')
(10) [9, 8, 7, 4, 3, 2, 1, 'a', 'b', 'c']
注意：concat()并不会修改数据，只会返回数据新的数组
9.连结符号join
打印拼接数组，使用特定的字符串连结
arr.join('-')
'9-8-7-4-3-2-1'
10.多维数组
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cw8VBreO-1636732352370)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020212526367.png)]
注意：多维数组打印的时候，arr[M] [N]表示M行的N个数组，只有一行的时候，看N,M可以未任意值，也可以为null
3.3、对象
若干个键对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值，
}
//定义一个person的对象，他有四个属性！
var person ={
name:'chengmingwei',
age:9,
email:1092705638@qq.com,
score:59
}
JS中对象，{。。。}表示一个对象，键值对描述属性xxxx：xxx,属性之间使用逗号隔开，最后一个不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
<script>
'use strict';
var person={
name:'chengmingwei',
age:9,
email:'[email protected]',
score:59
}
console.log(person.name);
1、对象赋值
person.name='chengmingwei'
'chengmingwei'
2、动态的删除属性，通过delete删除对象属性
person
{name: 'chengmingwei', age: 9, email: '[email protected]', score: 59}
delete person.name
true
3、使用一个不存在的属性,不会报错 undefined
//person kk
undefined
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaSAPPSO-1636732352371)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020215649545.png)]
4、动态的添加，直接给新的属性添加值即可
person.name='chengmingwei'
'chengmingwei'
5、判断属性值是否在这个对象中
'age'in person
ture
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4、流程控制
if判断
var age=3;
if (age>3){
alert('倔强青铜')
}else{
alert('最强王者')
}
While循环
let age=0;
while(age<100){
age=age+1;
console.log(age);
}
//do while
do{
age=age+1;
console.log(age);
}while(age<100);
for循环
for (let i = 0; i <100 ; i++) {
console.log(i)
}
forEach循环遍历数组
var age=[1,2,3,4,5,6,7,9,8];
age.forEach(function (value) {
console.log(value)
}
for in…
3.5、Map和Set
ES6的新特性
Map
//var name=["Tom","Jack","Luse"];
//var source=[100,80,60];
var map=new Map([['Tom',100],['Jack',80],['Luese',60]]);
var name=map.get('Tom');
map.set('Admin',1234567);//增加或修改
map.delete('Admin',1234567);//删除
console.log(name);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-46xH0eA2-1636732352373)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021151420244.png)]
Set无序不重复的集合//去重
var set =new Set([1,2,3,3,3,3])
console.log(set);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xh2jJEHy-1636732352374)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021151736662.png)]
set.add(11)//增加
Set(4) {1, 2, 3, '9'}
set.delete('1')//删除
false
set
Set(4) {1, 2, 3, '9'}
set.delete(1)
true
set
Set(3) {2, 3, '9'}
console.log(set.has(2))//是否包含这个元素
3.6、iterator
使用iterator来遍历迭代我们Map，Set
遍历数组
//for(var x in arr)遍历索引
//for(var x of arr)遍历数组值
var arr=[1,2,3,4,5]
for(var x of arr){
console.log(x);
}
遍历Map
var map=new Map([['chengmingwei',20],['liqinglan',20]]);
for(let x of map){
console.log(x);
}
//遍历结果
(2) ['chengmingwei', 20]
5、循环判断.html?_ijt=k6ght20dek5dh3oga80dunf7tn:25 (2) ['liqinglan', 20]
遍历Set
var set =new Set([1,2,3,4,5,88]);
for (let x of set){
console.log(x);
}
区别：for of 不会遍历手动添加的值，而for in会
4、函数及面向对象
4.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(10)//10
abs(-10)//
参数问题：JavaScript可以传递任意个参数，也可以不传递任何参数
参数进来是否存在的问题？
假设不存在参数，如何规避？
var abs=function(x){
//手动抛出异常
if(typeof x !=='number'){
throw 'Not a Number';
}
if(x>0){
return x;
}else{
return -x;
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftybChLi-1636732352376)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021230326261.png)]
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;
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrsvpP23-1636732352377)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021232712021.png)]
问题：arguments包含所有的参数，我们有时候想使用多余的参数进行附加操作。需要排除已有参数~
rest
Es6引入的新特性，获取除了已经定义的参数之外的所有参数。。。
function ab(a,b，...rest){
console.log('a=>'+a);
console.log('b=>'+b);
console.log(rest);
}
rest参数只能写再函数的最后面 ，必须用…标识
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5q4781B-1636732352378)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021235609616.png)]
4.2、变量的作用域
在JavaScript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数外不能使用~(闭包)
function f(x) {
var x=1;
x=x+1;
}
x=x+1;//Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在内部就互不影响。
function f1() {
var x=1;
x=x+1;
}
function f2() {
var x=1;
x=x+1;
}
嵌套，外部内能给内部内用，内部内不能给外部内用
function f1() {
var x=1
console.log('外部'+x)
function f2() {
var y=x+1
console.log('内部：'+y)
}
f2()
var z=x+y;
console.log('底部'+z);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oU0QnSdZ-1636732352380)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211022220230453.png)]
假设，内部函数变量和外部函数的变量，重名~
function f1() {
var x=1
console.log('外部'+x)
function f2() {
var x=2
console.log('内部：'+x)
}
f2()
}
内部变量和外部变量重名，会由内到外查找（就近原则）,会自动屏蔽外部变量
提升变量的作用域
<script>
'use strict';
function f1(){
var x='x'+y;
console.log('x');
var y='y';
}
结果：Xundefined
当未定义y调用的时候，JS引擎会自动默认提升y的申明，但是不会提升赋值。
这个在JavaScript建立之初就存在的特性。
养成规范：所有的变量的定义都写函数头部，不要乱放，方便代码的维护。
function f1(){
var x=1;
var y=x+1;
// z,v..
//以后随便用
}
全局函数
var x=1;
function f1(){
console.log(x);
}
f1();
console.log(x);
全局对象window
var x=1;
alert(x);
window.alert(x);
var old_alert =window.alert(123);
//alert失效了
var old_alert= function (){
}
//恢复
window.alert= old_alert;
window.alert=old_alert(456);
JavaScript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突——>如果能够减少冲突？
结果:ReferenceError: x is not defined
<script>
//报错内外都没定义直接使用，找不到x
window.alert(x);
</script>
结果：x is not defined
把自己的代码全部放入自己定义的唯一空间名中，降低全局命名的冲突问题
jQuery=$()
//定义全局变量
var chenmingwei={};
//添加属性
chenmingwei.name='chengmingwei';
chenmingwei.age=20;
chenmingwei.add=function (a,b) {
return(a,b);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YTf1erxo-1636732352381)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211024220851302.png)]
Es6 let关键字，解决局部作用域的冲突问题。
function aa() {
//建议使用let解决局部变量冲突的问题
for (let i = 0; i <100 ; i++) {
console.log(i)
}
//var全局作用冲突的作用
console.log(i+1);
}
建议大家都是用let去定义局部作用域的变量：
常用const
在Es6，怎么定义常量：只有用全部大写字母重命名的就是常量；建议不要修改它的值。
var PI='3.1415';
console.log(PI);
PI=123;
console.log(PI);
在Es6引入了常量关键字const
const PI='3.1415';
console.log(PI);
PI=123;
console.log(PI);
结果：Assignment to constant variable.
4.3、方法
var chenmingwei={
name:'chenmingwei',
birth:2000,
age:function(){
now=new Date().getFullYear();
//this 指向它
return now-this.birth;
}
//属性
chenmingwei.name
//方法
chengmingwei.age()
拆开写
function getAge() {
now=new Date().getFullYear();
return now-this.birth;
}
//拆开
var chenmingwei={
name:'chenmingwei',
birth:2000,
age:getAge
}
//调用的方法写方法名不用写括号
直接调用getAge不会返回数据，结果NaN。因为这个方法this指向了对象chenmingwei
Apply定向指向对象
在js中可以用apply控制this的指向
getAge().apply(chenmingwei,[])
function getAge() {
now = new Date().getFullYear();
return now - this.birth;
}
//拆开
var chenmingwei={
name:'chenmingwei',
birth:2000,
age:getAge
}
getAge().apply(chenmingwei,[]);//指向对象chenmingwei，参数空参
5、内部对象
标准对象
typeof '123'
'string'//字符
typeof 123
'number'//数字
typeof []
'object'//数组
typeof {}
'object'
typeof true
'boolean'//布尔
typeof undefined
'undefined'//未定义
typeof Math.abs
'function'//函数
5.1、DATE日期
基本使用
var now=new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getHours();//时
now.getSeconds();//秒
now.getMinutes()//分
now.getDay();//星期
now.getTime();//时间戳
//转换成本地时间
转换
now.toDateString
now.toLocaleString();
结果：'2021/10/25 上午10:38:09'
5.2、JSON
json是什么
早期，所有数据传输习惯使用XML文件！
- JSON(JavaScript Object Notion,JS对象简朴)是一种轻量级级的数据交换格式。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效提升网络传输效率
在JavaScript一切皆是对象、任何js支持的类型都可以用JSON来表示，
- 对象用{}
- 数组用[]
- 所有的键值对都是用key.value
JSON字符串和JS对象的转化
JSON.stringify—转字符串
JSON.parse_解析
var user={
name:'chenmingwei',
age:20,
sex:'男'
}
//对象转JSON字符串
var jsonUser=JSON.stringify(user);
//JSON字符串转对象 Parse解析
var obj=JSON.parse('{"name":"chenmingwei","age":20,"sex":"男"}')
//{name: 'chenmingwei', age: 20, sex: '男'}
JSON和对象区别
var obj={name:'chenmingwei',age:20};
var json={"name":'chenmingwei',"age":20};
5.3、Ajax
- 原生的js写法 xhr 异步请求
- JQuery封装好的方法$("#name").ajax("")
- axios请i求
6、面向对象编程
原型对象
javascript、java、c#。。。面向对象；javascript有什么区别！
类：模板 原型对象
对象：具体的实例
类是对象的抽象，对象是类的一个具体表现
在JavaScript这个需要换一下思维
原型：
xiaoming.proto = obj; //前后两个下划线
var obj={
name:'chenmingwei',
age:20,
pb:function(){
console.log(this.name+'+return')
}
};
//继承obj的属性和方法
var xiaoming={
name:'xiaoming'
};
var Bird={
fly:function{
console.log(this.name+"fly")
}
};
//可以继承父类全部数据，有的就替换
//继承方法1 原型对象
xiaoming.__proto__ = obj;
//小明的原型是obj
xiaoming.__proto__ = Bird;
//继承方法2
Object.setPrototypeOf(xiaoming,obj);
function student(name) {
this.name=name;
}
//增加一个方法，原型继承
student.prototype.hello=function () {
alert('JAVA')
}
class继承
class关键字，在ES6引入的
1、定义一个类，属性，方法
class student{
constructor(name) {
this.name=name;
}
hello(){
alert('狂神')
}
}
var xiaoming=new student('xiaoming')
//调用——xiaoming.hello()
2、继承
class xiaostudent{
constructor(name,age) {
this.name=(name);
this.age=function () {
alert('今年3岁了')
}
}
}
var xiaoming=new student('xiaoming')
var xiaohong=new xiaostudent('xiaohong')
//xiaohong.age()
本质：查看原型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUxM6VD7-1636732352383)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211025192009259.png)]
原型链
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aIHfE1W6-1636732352384)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211025194358920.png)]
7、操作BOM对象(重要)
浏览器介绍
JavaScript和浏览器有什么关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
- IE6~11
- Chrome
- Safari
- FireFox
三方：
- QQ浏览器
- 360浏览器
Window(重要)
window代表 浏览器窗口
window.innerHeight
406
window.innerWidth
923
window.outerHeight
419
window.outerWidth
222
Navigator
Navigator封装了浏览器的信息
Navigator.arguments
大多数时候，我们不会使用Navigator对象，因为会被人修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1536px
screen.height
864px
location(重要)
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新地址
location.assign('https://www.baidu.com')
document(内容)
document代表当前页面，HTML,DOM文档树
document.title
'百度一下，你就知道'
document.title='你是个大傻逼'
'你是个大傻逼'
获取具体的文档树节点
<dl id="app">
<dd>java</dd>
<dd>C++</dd>
<dd>C语言</dd>
</dl>
<script>
var dl=document.getElementById(app);
</script>
获取cookie
document.cookie
劫持原理
www.taobao.com
<script src="aa.js"> </script>
//恶意人员：获取你的cookie
history
history代表浏览器的历史纪录
history.back()//后退
history.forward(//
8、操作DOM对象(重要)
核心
浏览器网页就是一个Dom树形结构！
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新节点
要操作一个Dom节点，就必须要获得这个Dom节点
8.1、获得dom节点
<div id="father">
<h1>标题一</h1>
<p id="p1">段落1</p>
<p class="p2">段落2</p>
</div>
<script>
'use strict';
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
//获取父节点下的全部子节点
var children=father.children;
var firstchidren=father.firstChild;//第一个孩子
var lastchildren=father.lastChild;//最后一个孩子
var p1text=p1.textContent;//下一个孩子
</script>
这是原生代码，之后我们尽量使用JQuery
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bh9KRwsy-1636732352386)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026133237990.png)]
8.2、更新节点
id1.innerText='abc';修改文本的值id1.innerHTML='超链接修改文本的超文本标记语言id1.style.color='red'; id1.style.fontFamily='楷体'修改文本的样式
<div id="id1"></div>
<script>
var id1=document.getElementById('id1');
id1.innerText='abc';
id1.innerHTML='超链接';
id1.style.color='red';
id1.style.fontFamily='楷体'
</script>
8.3、删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id="father">
<h1>标题一h1>
<p id="p1">段落1p>
<p class="p2">段落2p>
div>
<script>
//通过父类删除子节点
var self=document.getElementById('father');
self.removeChild(p1);
//获取子节点的父亲然后删除
var father=p1.parentElement;
father.removeChild(p1)
script>
//删除一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意！
8.4、插入节点
我们获得了某个节点，假设这个dom节点是空的， 我们通过innerHTML就可以增加一个元素，但是这个dom节点已存在元素，就不能这干了，会覆盖
‘追加’
<p id="js">javaScriptp>
<div id="list">
<p id="se">javasep>
<p id="ee">javaeep>
<p id="me">javamep>
div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
//追加
list.appendChild(js);
script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ux8DWkhX-1636732352387)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026151051777.png)]
创建一个新节点(实现插入)
<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);
//创建一个节点newP
var newP=document.createElement('p');
//新节点赋id选择器
newP.id='id1';
//修改文本
newP.innerText='Hello,Word!';
//追加
list.appendChild(newP);
//创建一个标签
var mystyle=document.createElement('style');//创建一个空style
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color: red;}'//设置标签内容
document.getElementsByTagName('head')[0].appendChild(mystyle);
</script>
insertbefore
<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');
var ee=document.getElementById('ee');
list.insertBefore(js,ee);
</script>
9、操作表单
<form action="post">
<span>用户名：</span><input type="text" id="usename"><br>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="man">男
<input type="radio" name="sex" value="girl" id="girl">女
</p>
</form>
<script>
'use stricr'
var usename = document.getElementById('usename');
var man_radio = document.getElementById('man');
var girl_radio = document.getElementById('girl');
//获取usename的值
usename.value;
//修改usename的值
usename.value='hello word!'
//对于单选框，多选框等等固定的值，man_radio,value只能取到当前的值
//判断是否会选中、查看返回的结果，是否为ture，如果为ture，则选中
man_radio.checked=ture//赋值
girl_radio.checked
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1CKEX8y-1636732352389)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026183553819.png)]
MD5算法加密
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVrS3i1u-1636732352390)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026223503440.png)]
按钮-绑定事件onclick
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的验证title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
head>
<body>
<form action="#" method="post" onsubmit="aa()">
<p>
<span>UserName:span><input type="text" name="username" id="username">
p>
<p>
<span>PassWord:span><input type="password" name="psd" id="input_password">
p>
<input type="hidden" id="password">
<button type="submit" onclick="aa()">提交button>
form>
<script>
function aa() {
var uname = document.getElementById('username');
var pwd = document.getElementById('input_password');
var MD5d = document.getElementById('password');
MD5d.value=md5(pwd.value);
/*console.log(uname.value);
console.log(pwd.value);
uname.value=md5(uname.value)
pwd.value=md5(pwd.value)*/
}
script>
body>
html>
表单提交-绑定事件- return ‘onsubmit‘
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的验证title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aa()">
<p>
<span>UserName:span><input type="text" name="username" id="username">
p>
<p>
<span>PassWord:span><input type="password" id="input_password">
p>
<input type="hidden" id="md5_pwd" name="password">
<button type="submit">提交button>
form>
<script>
function aa() {
var uname = document.getElementById('username');
var pwd = document.getElementById('input_password');
var md5_pwd = document.getElementById('md5_pwd');
//pwd.value=md5(pwd.value);
md5_pwd.value=md5(pwd.value);
return true;
}
script>
body>
html>
注意：使用隐藏的标签hidden，password的name标识取消，写道的hildden里才能成功加密！
10、jQuery
javascript
jQuery库，里面存在大量的javascript
获取jQuery
URL:https://jquery.com/
CDN外部引入和本地引入
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKv0UGsj-1636732352392)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211027110855632.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuerytitle>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">script>
<script src="lib/jquery-3.6.0.js">script>
head>
<body>
body>
html>
公式：$(selector).action()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuerytitle>
<script src="lib/jquery-3.6.0.js">script>
head>
<body>
<a href="" id="id1">点击我跳转a>
<script>
//var id=document.getElementById(id)
$('#id1').click(function () {
alert('123')
})
script>
body>
html>
选择器
<script>
//标签
document.getElementsByTagName()
//id
document.getElementById()
//class
document.getElementsByClassName()
//jQuery css中的选择器全部能进
$(selector).action()
$('#id1').click()
$('.class1').click()
</script>
工具网站：https://jquery.cuishifeng.cn/
事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdGXPJby-1636732352393)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211027171908464.png)]
通过jQuery控制鼠标的移动mousemove，获取鼠标当前的位置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件title>
<style>
#div{
width: 500px;
height: 500px;
border: 2px solid red;
}
style>
<script src="lib/jquery-3.6.0.js">script>
head>
<body>
mouse：<span id="mouse">span>
<div id="div">div>
<script>
//获取到整个文档的节点 ready载入
/*$('document').ready(function () {
$('#div').mousemove(function (e) {
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
})*/
//等价上面
$(function () {
$('#div').mousemove(function (e) {
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
})
script>
body>
html>
自我小练习，点击出弹窗
<a href="#" id="my_a">点击我出弹窗！a>
<script>
$(function () {
$('#my_a').mousedown(function () {
alert('123')
})
})
script>
jQuery操作Dom
<ul id="list">
<li id="id1">javacriptli>
<li id="id2">Phtyonli>
ul>
<script>
$(function () {
$('#list li[id=id1]').text()//获取当前值
$('#list li[id=id1]').text('12')//重新赋值
$('#id2').html('哈哈哈')//g
$('#id2').css("color","red");//修改样式
})
script>
})
选择器
<script>
//标签
document.getElementsByTagName()
//id
document.getElementById()
//class
document.getElementsByClassName()
//jQuery css中的选择器全部能进
$(selector).action()
$('#id1').click()
$('.class1').click()
</script>
工具网站：https://jquery.cuishifeng.cn/
事件
[外链图片转存中…(img-UdGXPJby-1636732352393)]
通过jQuery控制鼠标的移动mousemove，获取鼠标当前的位置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件title>
<style>
#div{
width: 500px;
height: 500px;
border: 2px solid red;
}
style>
<script src="lib/jquery-3.6.0.js">script>
head>
<body>
mouse：<span id="mouse">span>
<div id="div">div>
<script>
//获取到整个文档的节点 ready载入
/*$('document').ready(function () {
$('#div').mousemove(function (e) {
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
})*/
//等价上面
$(function () {
$('#div').mousemove(function (e) {
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
})
})
script>
body>
html>
自我小练习，点击出弹窗
<a href="#" id="my_a">点击我出弹窗！a>
<script>
$(function () {
$('#my_a').mousedown(function () {
alert('123')
})
})
script>
jQuery操作Dom
<ul id="list">
<li id="id1">javacriptli>
<li id="id2">Phtyonli>
ul>
<script>
$(function () {
$('#list li[id=id1]').text()//获取当前值
$('#list li[id=id1]').text('12')//重新赋值
$('#id2').html('哈哈哈')//g
$('#id2').css("color","red");//修改样式
})
script>