P2 基本使用及Helloworld

创建HTML文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script代码写在script标签里，script可以写在head和body标签里面-->
    <script>
        alert('hello,world'); //弹窗显示hello，world
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

JavaScript文件方式导入

在这里插入图片描述

JavaScript代码

alert('hello,world');

HTML导入包代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/js导入.js"></script>

</body>
</html>

P3 浏览器控制台使用

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    // JavaScript严格区分大小写

    // 1.定义变量
    //          1）变量类型    变量名 = 变量值；
    var num = 1;// 变量类型都是 var ，当赋值为数字，则为数字类型
    var name = "ha";// 当赋值为字符串时候就是字符串类型，可以说没有变量类型的说法
    //alert(name);// 以弹窗的形式打印 name 值（弹窗显示ha）


    // 2.条件控制
    var score = 65;
    if (score<60){
        alert("小于60")
    }else if (score>60 && score<70) {
        alert("60~70")
    }else {
        alert("大于70")
    }
    // （弹窗显示60~70）

    //console.log(score);// 在控制台打印(Console中打印) score 

</script>
</body>
</html>

P4 数据类型快速浏览

数据的类型有：数值、文本、图形、音频、视频··· ···

number：JavaScript不区分小数和整数
NaN：不是数字
Infinity：表示无限大的数字，计算机承载不了了显示
字符串：JavaScript字符串和java是一样的
布尔值：true，false
逻辑运算符：&& 与运算、|| 或运算、！非运算
比较运算符：= 赋值运算符、== 等于（类型不一样，值一样，也会为true）、=== 绝对等于（要求类型和值都一样才会判断为true）。注意一：NaN=== NaN判断为false，要想知道是不是NaN需要通过方法isNaN()判断。注意二：1/3===（1-2/3）返回为fales，精度丢失问题，尽量避免浮点数运算，如果需要则采用Math.abs(1/3===(1-2/3))<0.0000001
null 和undefined：null空、nudefined：未定义
数组：Java数组值必须是相同类型的对象，JavaScript可以类型不同。如：var arr = [1,2,3, null,tuer,‘hello’]，数组也可以这样写 new Array(1,2,3, null,tuer,‘hello’)
对象：var 对象名 = {内容}。例：var s = {name:“ha”,age:2,tags:[1,2,3, null,tuer,‘hello’]} 取值方法为 s.name 返回为 ha 。

P5 严格检查模式strict

将类型改为局部变量，则是将var改为let，为了判断不好的写法，在javaScript的第一行写 ‘use strict’

P6 字符串类型详解

1. 字符串单引号、双引号、换行、TAB等采用转译符号，跟Java一样。
2. 多行字符串编写采用var a = ` 内容 ` 方法去写，一个字符串占用一行。
3. 字符串连接方法。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   'use strict';
   let name= "ha";
 let msg= `你好${name}`;
console.log(msg)
</script>
</body>
</html>
4. 字符串长度：字符串名.length
5. 大小写转换：字符串名.toUpperCase() 转为大写、字符串名.toLowerCase()转为小写。
6. 获取指定字符串的下标：字符串名.indexOf(‘字符串某一个元素’)
7. 字符串截取：字符串名.substring(数字)，从数字下标开始截取到结束。字符串.subtring(开始下标，结束下标)，截取方式为前闭后开（开始下标截取到结束下标的前一个）

P7 数组类型详解

Array可以包含任意数据类型

1.长度：字符串不可以用下标方法改数据

var arr = [1,2,3,4]
arr[0]=0;// 帮小标为0的数据1，改为了数据0，结果arr=[0,2,3,4]
arr.length=10;// 随让帮arr多大长度改变为10了，但是5~10都为空(undefined)
arr.length=2;// 长度为2后，后面的数据被丢失

2. indexOf()获取下标索引

arr = [1,2,3,4,5,6,7];
arr.indexOf(2);//获得arr的元素2得到下标索引为1
arr = [1,2,3,4,"1","2"];
arr.indexOf(2);//得到arr  2元素的下标为 1
arr.indexOf("2"); // 得到下标arr  “2”元素的下标为5

3. slice() 截取array的部分，返回一个新的数组

arr =  [1,2,3,4,"1","2"];
arr.slice(3); // 返回新数组 [4,"1","2"]

4. push和pop：从尾部压入和弹出元素

arr = [1,2,3,4,"1","2"];
arr.push("a","b"); // 得到 arr =  [1,2,3,4,"1","2","a","b"]; 从后面添加了元素
arr.pop(); // 得到 arr =  [1,2,3,4,"1","2","a"] ，从后面弹出一个元素
// arr.length 都跟着变了

5.unshift和shift：从数组前面压入和弹出元素

arr = [1,2,3,4,"1","2"];
arr.unshift("a","b"); // 得到arr = ["a","b",1,2,3,4,"1","2"]; 头部压入了元素
arr.shift();// 得到arr = ["b",1,2,3,4,"1","2"]; 头部弹出了一个元素

6. sort ：排序

arr = [2,3,1]; // 注意字母也可以排序
arr.sort();// 得到arr = [1,2,3];

7.reverse 元素反转

arr = [1,2,3,4,5,6]
arr.reverse(); // 得到 arr = [6,5,4,3,2,1];

8. concat帮元素添加到尾部形成一个新的数组，原来的不变

arr = ["a","b","c"]
arr.concat([1,2,3]); // 得到一个新数组 ["a","b","c",1,2,3];
console.log(arr); // 看出arr还是等于["a","b","c"]

9. join 数组通过字符串连接

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   'use strict'
   let arr = [1,2,3,4,5]
   alert(arr.join('+')) // 弹窗显示 1+2+3+4+5
</script>
</body>
</html>

10.多维数：多维数组和Java是一样的
arr = [[1,2],[3,4],[“a”,“b”]]
arr[2][2]=“b”

P8 对象类型详解

对象的格式

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值，
	··· ··· 
	属性名：属性值    // 最后一个不用逗号
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    let person = {
        name: 'ha',
        age: 3,
        email: '1103349536@qq.com',
        score: 99,
    };
    alert(person.name)// 警告窗显示ha
    alert(person.score)// 警告窗显示99
    
 
    // 一、name赋值方法
    person.name = 'koko' 
    alert(person.name) // 弹窗显示koko


    // 二、使用一个不存在的对象属性，不会报错，返回undfined
    console.log(person.password );//返回undfined

     
    // 三、delete 动态情况下删除属性
    console.log(person.name);//返回结果true， person的属性变为{age: 3,email: '1103349536@qq.com'score: 99,};
    

    // 四、动态的添加属性
    person.name='haha' // person属性变为{age: 3,email: '1103349536@qq.com'score: 99,name:'haha'};

    // 五、判断属性是否在对象中
    'age' in person // 返回为true 
    'toString' in person // 返回为true 原因是继承


    // 六、判断一个属性是否是这个对象自身拥有。hasOwnProperty()
    person.hasOwnProperty('toString') //返回为false
    person.hasOwnProperty('age')//返回为true
</script>
</body>
</html>

P9 分支和循环详解

流程控制

一、if判断

var age = 3;
if (age<3){ //第一个判断
	alert("小于3")
}else if(age>3){//第二个判断
	alert('大于3')
}else{//第三个判断
	alert('等于3')
}

二、while循环

var age = 1;
while(age<100){
	age = age+1;
}
console.log(age); //返回100

三、for循环

for (ler i = 0; i < 100 ; i++){
	console.log(i)
}

四、forEach循环

var age = [1,2,3,4,5,6,7]
age.forEach(function(value){
	console.log(value)
})

五、for_in 循环

var age = [1,2,3,4,5,6,7,8]
for(var num in age){
	if(age.hasOwnProperty(num)){
		console.log('存在')
		console.log(age[num])
	}
}

P10 Map和Set集合

这两个是ES6才出来的新特性，现在IDAE中输入new Map()和new Set()看是否会报错，确定自己ES版本是否满足。

一、Map集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    let map = new Map([['tom',100],['jack',99],['tim',98]]);
    let name = map.get('tom');// 通过key获得value
    map.set('hermione',101);// 通过set 给map添加或者修改元素
    map.delete('jack');// 通过delete删除key来删除想删除的元素
    console.log(name); // 返回 100
</script>
</body>
</html>

二、Set集合： set是无序不重复集合

set.add()    //添加元素
set.delete() // 删除元素
set.has()  // 判断元素是否包含

P11 Iterable迭代和下周安排

for_in

'use strict'
var arr = [3,4,5];
for(let x in arr){
console.log(x); // 打印的是下标
}

for_of

var arr = [3,4,5];
for (let x of arr ){
console.log(x); // 遍历值（注意：这是ES6出来的新特性）该特性map，set都可以遍历
}

var map = new Map([["tom",100],["jeck",90],["tim",80]])
for (var y of map){
console.log(y); //遍历map
}

var set = new Set([3,4,5])
for (var z of set){
console.log(z); //遍历set
}

P12 函数的定义和参数获取

定义方式一：绝对值函数

function abs(x){
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}
console.log(abs(-10)); // 返回了10

在这里插入图片描述

一但执行return，则方法结束，返回一个结果，如果没有执行return，返回结果为NaN

定义方式二：

var abs = function(x){
if(x>=0){
		return x;
	}else{
		return -x;
	}
}
console.log(abs(-10)); // 返回了10

手动抛出异常的写法

if(typeof x!== 'number'){
	throw 'Not a Number';
}

该语句意思是再x不等于number的时候会返回一个错误，返回Not a Number

arguments：代表传递进来的所有参数是一个数组。常用的是下面的rest

rest：ES6引入的新特性，rest必须写再最后面，并且前面要…表实

function asd(a,b,c,...rest){
	console.log(a);
	console.log(b);
	console.log(c);
	console.log(rest); //传递进来的自动变为数组（因为abc被用过了所以没有被传递进来了），被中括号抱起来，
}

P13 变量的作用域、let、const详解

1、变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function f() {
        var x=1;
        x=x+1;
    }
    x=x+2;//Uncaught ReferenceError: x is not defined
</script>
</body>
</html>

说明了，再JavaScript中，var定义变量是有作用域的，假如再函数中声明的，则再函数外不能使用

注意一： 同一变量两个方法的使用问题
function f1() {
     var x=1;
     x=x+1;
}
function f2() {
       var x=1;
       x=x+1;
}
两个方法内部变量互相不影响

注意二： 两个叠加方法内外部调用问题
function f1() {
           var x=1;
           function f2() {
     		var y=x+1;
           }
   	        var z = y+1;//Uncaught ReferenceError: y is not defined
}
内部函数可以调用外部函数声明的变量，但是外部函数不可以调用内部声明的函数

注意三： 两个叠加方法用同一个名字声明问题
function f1(){
	var x=1;
	function f2(){
		var x='A';
		console.log('inner'+x);
	}
	console.log('outer'+x);
	f2(); // 第二个执行，返回结果为innerA
}
f1(); // 先执行了这个结果为 outer1
同名变量互不影响，函数变量是由‘内’向‘外’查找，如果外部出现了内部相同名字的变量，则会自动屏蔽外部的变量。

注意四：
function f(){
	var x='x'+y;
	console.log(x);
	var y = 'y';
}
返回结果为xundefined，说明了由于引擎的问题，console.log(x);没有执行y的赋值，所以要帮y赋值写再前面

2、全局函数

全局变量

var x=1;
function f(){
	console.log(x); //返回1
}
f();
console.log(x);// 返回1

3、全局对象

var x=‘xxx’；
alert(x);
alert(window.x);// 返回结果相同，说明全局变量会自动绑定在window对象下

在alert前面加window对象，发现alert也是在window下面的一个变量

4、规范
由于我们所用的全局变量都绑定到为我们的window上。如果不同JavaScript文件，使用了相同的变量就会发生冲突，为了尽量减少冲突采用下面方法

//定义一个唯一的全局变量
var bsApp = {}；

//定义全局变量
bsApp.name = 'beishan';
bsApp.add = function(a,b){
	return a+b;
} 
//目的就是将自己的东西变唯一，并且放入自己创建的唯一空间里面

5、局部作用域

function f(){
	for(var i = 0;i < 100 ; i++){
		console.log(i)
	}
	console.log(i); // 出现问题！当 i 出了for的作用域却还能使用
}

ES6 添加了let关键字，解决局部作用域冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    function f() {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+'外部');//Uncaught ReferenceError: i is not defined
    }
</script>
</body>
</html>

所以建议使用let定义局部作用域变量，少用或者不要用var定义

6、常量const
ES6之前在全部大写字母命名的变量尽量不要修改

var PI='3.1415'
console.log(PI);
PI='123';
console(PI);//发现这个PI被修改了

在ES6 引入了const

const PI = '3.14';
PI = '123'; // PI发现报错

P14 方法的定义和调用、apply

1、方法：方法就算把函数放在对象里面，对象只有两个东西：属性和方法

var xue = {
	name: 'xuezhe',
	bitrh：2019,
	
	//方法
	age: function(){
		//获取当前日期-出身日期=年龄
		var now = new Date().getFullYear(); // 获取当前年份
		return now-this.bitrh;
	}
}
xue.name；//属性
xue.age();//方法要带()

this.代表什么？拆开上面的代码，拆开方法

function getAge(){
		//获取当前日期-出身日期=年龄
		var now = new Date().getFullYear(); // 获取当前年份
		return now-this.bitrh;
}
var xue = {
	name: 'xuezhe',
	bitrh：2019,
	age: getAge
}
xue.age(); // 可以使用，返回正常
getAge(); // 返回NaN，说明在window上没有bitrh

this是无法指向的，是默认指向调用它的那个对象的

2、apply：在js中可以控制this的调用

function getAge(){
		//获取当前日期-出身日期=年龄
		var now = new Date().getFullYear(); // 获取当前年份
		return now-this.bitrh;
}
var xue = {
	name: 'xuezhe',
	bitrh：2019,
	age: getAge
}
getAge.apply(xue,[]);// this指向xue，参数为空

P15 Date日期对象

内部对象

1、标准对象

typeof 123; //返回 "number"
typeof NaN;//返回 "number"
typeof "123";//返回 "string"
typeof true; //返回 "boolean"
typeof []; //返回 "object"
typeof{};//返回 "object"
typeof Math.abs;//返回 "function"
typeof undefined;//返回 "undefined"

2、Date

var now = new Date(); // 返回——>Wed Oct 21 2020 14:57:11 GMT+0800 (中国标准时间) {}
now.getFullYear(); // 返回——>年
now.getMonth(); // 返回——>月，月份是0~11
now.getDate(); // 返回——>日
now.getDay(); // 返回——>星期几
now.getHours(); // 返回——>时
now.getMinutes(); // 返回——>分
now.getSeconfs(); // 返回——>秒

now.getTime(); // 返回——>时间戳
console.log(new Date(1603263840134)); // 返回——>时间返回——>Wed Oct 21 2020 14:57:11 GMT+0800 (中国标准时间) {}
now.LocleString(); // 返回——>时间

P16 JSON对象

早期，所有数据传输都比较习惯使用XML文件！

1、什么是JSON？了解JOSN点击这里

在JavaScript中一切皆为对象，任何js支持的类型都是可以用JSON来表实；
格式：
对象都是用{}
数组都是用[]
所有的键值对,都是用key:value

2、JSON字符串和JS对象的转换

// JS对象
var user = {
	name: 'tim',
	age: 4,
	sex: '男'
}

//对象转换成JSON字符串
var jsonUser = JSON.stringify(user);
console.log(jsonUser);//返回——>{"name":"tim","age":4,"sex":"男"}

//JSON字符串转换为对象
console.log(JSON.parse('{"name":"tim","age":4,"sex":"男"}'));

P17 面向对象原型继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    let student = {
        name:"tim",
        age: 11,
        run: function () {
            console.log(this.name+"在跑")
        }
    };
    let jack={
        name:'jack'
    };
    jack.__proto__=student;
    jack.run();
</script>
</body>
</html>

function Student(name){
	this.name = name;
}
//给Student新增加一个方法
Student.prototype.hello = function(){
	alert('hello')
};
//该方法是ES6之前添加的方法，下面P18是ES6的新方法

对于原型,可以看成java中父类,但是又有区别。

P18 *面向对象class继承

1、class
calss关键字，是在ES6引入的

//定义一个类、属性、方法并且使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    class student{
        constructor(name){//构造器
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }
    let xiaoming = new student('小明');
    let xiaohong = new student('小红');
    console.log(xiaoming.name);
    console.log(xiaohong.name);
    xiaoming.hello();
</script>
</body>
</html>

2、继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    class student{
        constructor(name){//构造器
            this.name = name;
        }
        hello(){
            alert('hello');
        }
    }
    class PrimaryStudent extends student{
        constructor(name,grade){
            super(name);
            this.grede = grade;
        }
        myGrade(){
            alert('我是小学生');
        }
    }
    let xiaoming = new student('小明');
    let xiaohong = new PrimaryStudent('小红',100);
    console.log(xiaoming.name);
    console.log(xiaohong.name);
    xiaoming.hello();
</script>
</body>
</html>

在这里插入图片描述
3、原型链
这个为面试内容，了解即可
理解该链接的图就行了

P19 操作BOM对象

BOM（浏览器对象模型）。
浏览器模型：

IE 浏览器
Chrome 谷歌浏览器
Safari 苹果浏览器
FireFox 火狐浏览器
Opera 欧朋浏览器（用得少）

这些都是内核浏览器

三方浏览器：

QQ浏览器
360浏览器
··· ···

1、window
window代表浏览器窗口

2、Navigator
封装了浏览器的信息

3、screen
获取屏幕信息

screen.width  // 获取屏幕的宽
screen.height  //获取屏幕的高

4、location
当前页面URL信息

5、document
代表当前页面HTML的DOM文档树
document.title // 获取当前页面的标签
document.title = ‘s’ //修改当前页面标签为s
获取具体的文档树节点
<dl id="app">
	<dt> java</dt>
	<dd>javase</dd>
	<dd>javaee</dd>
</dl>
<script>
	var dl = docunment.getElementById('app');//获取id名字app的
</script>
获取cookie
document.cookie
history
浏览器的历史记录
history.back() //网页后退
history.forward() //网页前进

P20 获取DOM节点

学习核心

浏览器网页就算一个DOM树形结构，我们需要做的是：

更新DOM节点
遍历DOM节点
删除DOM节点
添加DOM节点

操作一个DOM节点就必须获得这个DOM节点

1、获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="P2">P2</p>
</div>
<script>
    'use strict'
    //对应css选择器
    let h1 = document.getElementsByName('h1');//获取h1
    let p1 = document.getElementById('p1');//获取id为p1
    let p2 = document.getElementsByClassName('p2');//获取class为p2的
    let father = document.getElementById('father');//获取id为father
    let c = father.children;//获取父类下面所有子节点
</script>
</body>
</html>

P21 更新DOM节点

1、操作文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="name">p1</div>
<script>
    'use strict'
    let name = document.getElementById('name');

    var int = self.setInterval('clock()',3000);//定时器
    function clock(){
        name.innerText='被修改了';//三秒后将’p1‘改为了’被修改了‘
    }
</script>
</body>
</html>

//解析文本标签
name.innerHTML='<strong>被修改了</strong>'//被修改了被加粗

2、操作css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--创建一个div-->
<div id="id1"></div>
<script>
    'use strict'
    let testId = document.getElementById('id1');//获取id1
    testId.innerText='abc';//给id1文本显示abc
    testId.style.color='red';//给id1显示文本字体颜色改为红色
    testId.style.fontSize='200px';//将字体大小该为200px
    testId.style.padding = '2em';//将内边距改为2em
</script>
</body>
</html>

P22 删除DOM节点

1、删除方法为：先获取父节点，在通过父节点删除自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "id1">
    <h1 id="h1">h1</h1>
    <p id="p1">p</p>
</div>
<script>
    let f = h1.parentElement;//获取h1的父类
    f.removeChild(h1);//删除h1
</script>
</body>
</html>

P23 创建和插入DOM节点

我们获得某个DOM节点，假设这DOM为空的，我们可以通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素就不能用这个了，会覆盖原来的元素。

追加方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
    'use strict';
    let js = document.getElementById('js');
    let list = document.getElementById('list');//捕捉接口
    
    self.setInterval('clock()',1000);
    function clock(){
        list.appendChild(js);//将id=js接口追加到list后面
    }
</script>
</body>
</html>

创建一个新的节点标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    'use strict';
    let newP = document.createElement('p');//创建一个p标签
    newP.id='newP';//将newP这个p标签设置id为newP
    newP.innerText = '建的新节点';
    self.setInterval('clock()',2000);
    function clock() {
        list.appendChild(newP);//将节点放在list后面
    }
</script>
</body>
</html>

添加id的方式用一条

let my = document.createElement('p');//创建一个p标签
my.setAttribute('id','my');//给标签添加一个id并且赋值为my

insert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">java</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE------上走</p>
    <p id="me">javaME</p>
</div>

<script>
    'use strict';
    let ee = document.getElementById('se');
    let se = document.getElementById('ee');
    let list = document.getElementById('list');
    self.setInterval('clock()',2000);
    function clock(){
        list.insertBefore(se,ee);
    }

</script>
</body>
</html>

P24 获得和设置表单的值

什么是表单
文本框(text
下拉框(select
单选框(radio
多选框(checkbox
隐藏框(hidden
密码框(password
··· ···

表单的目的：提交信息

1、获取提交信息

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<p>
<form action = "post">
   <span>用户名</span><input type="text" id="username">
</form>
</p>
<p>
   <span>性别：</span>
   <input type="radio" name="sex" value="man" id="boy">男
   <input type="radio" name="sex" value="woman" id="girl">女
</p>
<script>
   let input_text=document.getElementById('username');
   let boy_radio=document.getElementById('boy');
   let girl_radio=document.getElementById('girl');
   console.log(input_text.value); //获取表单的值信息
   input_text.value='修改';//修改表单的值
   boy_radio.checked=true;//选中男
   console.log(boy_radio.checked);// 选中的时候为true，没有选中返回false

</script>
</body>
</html>

P25 *表单提交验证及前端密码MD5加密

1、提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--MD5工具类-->
    <script src="https://cdn.boot.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input_password">
    </p>
    <input type="hidden" id="md5_password" name="password">

    <!--事件绑定-->
    <button type="submit">提交</button>
</form>

<script>
    'use strict';
    function aaa() {
        alert('判断按钮是否绑定');
        let uname = document.getElementById('username');
        let pwd = document.getElementById('input_password');
        let md5pwd= document.getElementById('md5_password');
        md5pwd.value=md5(pwd,value());
        //可以校验判断表单内容，true就是通过提交，false阻止提交
        return true;
    }
</script>
</body>
</html>

P26 *初识JQuery及公式

JQuery是一个库，存放JavaScript函数的库

获取JQuey：

通过CDN JQuey引入，百度搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="http://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点击</a>
<script>
    $('#test-jquery').click(function () {
        alert('hello,JQuery!');
    })
</script>
</body>
</html>

P27 JQuery选择器

原选择器和JQuery选择器的对比

//原选择器
document.getElementsByName();//标签选择器
document.getElementsById();//id选择器
document.getElementsByClassName();//类选择器
//JQuery选择器
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//类选择器

手册官网https://www.jq22.com/chm/jquery/index.html

P28 JQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="http://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>

    <style>
        #divMove{
            width: 500px;
            height: 500px;
            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>

P29 *jQuery 操作DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="http://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<ul id="test_ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //text和html都是可以获取和修改值的，html修改样式用<>设置样式
    $('#test_ul li[name=python]').text(); //类选择器，绑定li中name=python这个，获取它的值
    $('#test_ul li[name=python]').html('<strong>设置值<strong>');//修改设置html值,strong为加粗

    $('#test_ul li[name=python]').css("color","red");// 操作css，修改字体颜色

    $('#test_ul li[name=python]').show();//显示元素
    $('#test_ul li[name=python]').hide();//隐藏元素，本质就是display : none

</script>
</body>
</html>

ajax需要学习一下

jQuery手册https://www.jq22.com/chm/jquery/index.html

P30 *前端小结及开发技巧分享

这一页适合看视频https://www.bilibili.com/video/BV1JJ41177di?p=30

JavaScript完结

··· ··· ···
··· ···
···
·

原文链接：https://blog.csdn.net/beishanqiye/article/details/109161609