JavaScript入门（一）＜遇见狂神说＞

1、什么是JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言

大部分都是在做网络通信，交互，和DOM

JS控制网页的行为

好处：

弊端：支持不了高并发

1.2、历史

ECMAScript它可以理解为是JavaScript的一个标准

目前到es6的标准，但大部分的浏览器还是停留在es5代码上

2、快速入门

2.1、引入JavaScript

1、内部标签

<script>
   //...
</script>

2、外部引入

abs.js

//...

test.html

<script src="abc.js"></script>

2.2、 基本语法入门

2.3 、数据类型

数值、文本、图形、音频，视频…

number

JS不区分小数和整数，Number

123  //整数123
123.1  //浮点数123.1
123e3  //科学计数法
-99  //负数
NaN  //NOT a number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true , false

逻辑运算符

&&  两个为真，才是真
||  一个为真，结果为真
！  取反

比较运算符

=
== 等于(类型不一样，值一样，也会判断为true；  如数字的1  和字符串的"1" ， js会判断其相等)
=== 等于(类型一样，值一样，结果才为true)

这是JS的一个缺陷，坚持不要用 == 做比较

注意：

• NaN===NaN ，这个与所有的数值都不相等，包括自己
• 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3));  //false

尽量避免使用浮点数进行运算，因为存在精度问题

Math.abs((1/3)-(1-2/3))<0.000000001;  //true

null和undefined

• null 空
• undefined 未定义

数组

为了保证代码的可读性，数组尽量用 [ ]

Java中的数组必须是相同类型的对象，JS中不需要这样！

var arr=[1,2,3,'hello',"world"];

new Array(2,3,4,'hellt');
//JS的数组下标：如果越界了，就会报 undenfined

对象

定义一个对象，取对象的值

//Person person=new Person(1,2,3,4);

var Person={

    name:"xilige",

    age:"10",
    
    tags:['js','java','web']

    }

2.4、严格检查模式Strict

//'user strict';  严格检查模式，预防JavaScript的随意性导致一些问题产生  必须写在JS的第一行

'user strict';

//定义一个局部变量，用let 定义
//全局变量： var

let o=10;

var i=1;

3、 数据类型

3.1、字符串 String

1、正常字符串 我们用 单引号 ’ ‘ 或 双引号 " " 包裹

2、 注意转义字符 \

\'   
\n   
\t
\u4e2d   \u####  unicode字符

3、多行字符串编写 使用：`` 符号包裹（关注）

var name= `
	hello
	world
	你好
	你好
`

4、模板字符串

let name="Tom";
let msg=`你好，${name}`;
console.log(msg);    //得到   你好，Tom

5、字符串长度

字符串名.length

6、字符串的可变性，不可变（关注）

7、字符串大小写的转换，利用方法

大写: 字符串名.toUppeCase()
小写: 字符串名.toLowerCase()

8、获取指定字符的下标

字符串名.indexOf('对应字符')

9、截取字符串（关注）

字符串名.substring(对应字符位置)
1.这里截取的是对应位置和位置之后的字符串(如图是截取了student中的2的位置，
即s—>0  ; t->1 ; u->2，  是从2开始截取，所以2之前，0和1的字符串都不保留)

2.student.substring(1,3)  得到tu 
//其实表示的就是[1,3)，1和2位置上的字符传保留，3位置上的字符串不取

3.2、数组 Array

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6]

1、数组长度（可赋值产生变化）

arr.length
arr.length=10
arr.length=2

给长度赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf 查找元素获得下标索引

arr.indexOf(2);   //得到 1
这里的（A）  指的是在对应数组里出现A 是第几位
上面因为  0位->1；  1位->2;  所以得到1

3、slice()

截取Array的一部分，返回一个新的数组，类似于String中的 substring

4、push() 、pop()

push: 压到尾部
pop：弹出尾部的一个元素

5、unshift()、shift()

unshift：压入到头部
shift：弹出头部的第一个元素

6、sort() 排序 （默认是正序排列，尝试了未改变，了解即可）

var arr=["A","B","C"];
arr.sort();
["B","A","C"];

7、reverse() 元素反转

var arr=["A","B","C"];
arr.reverse();
["C","B","A"];

8、concat() 粘合

var arr=["A","B","C"];
arr.concat([1,2,3]);
["C", "B", "A", 1, 2, 3]

9、join() 连接符 打印拼接数组， 使用特定的字符串连接

arr1
["C", "B", "A"]
arr1.join("a");
"CaBaA"
arr1.join("+");
"C+B+A"

10、多维数组

arr=[[1,2],[3,4],["5","6"]];
arr[1][1];
4

数组总结：存储数组（如何存、如何取、方法都可以自己实现）

3.3、对象

若干个键值对

var 对象名={
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}

//定义了一个person对象，它有四个属性
var person ={
    name:"cc",
    age:3,
    email:"jintao_chen@163.com",
    score:20
}

JS中对象，{…} 表示一个对象，键值对描述属性 xxx:xxx ，最后一个不加逗号

1、对象赋值

person.name="AA"   //得到"AA"
person.name        //得到"AA"

2、使用一个不存在的对象属性，不会报错，只会出现 undenfined

person.hh          //得到undenfined 

3、动态的删减属性 delete 类名.属性值 直接删除

person             //得到 {name: "AA", age: 3, email: "jintao_chen@163.com", score: 20}
delete person.age  //得到true
person             //得到{name: "AA", email: "jintao_chen@163.com", score: 20}

4、动态的添加 直接添加即可

person.age=3;      //得到3
person             //得到{name: "AA", email: "jintao_chen@163.com", score: 20, age: 3}

5、判断属性名是否在这个对象中！ xxx in xxx

'age' in person    //得到true
//继承  'toString' in person   //得到true     而person里没有toString但是得到true的原因是在于 其父类是有toString的

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

personone.hasOwnProperty('toString')         //得到false
personone.hasOwnProperty('age')              //得到true

3.4、流程控制

while(){};

do{}while();

for(a;b;c){};

forEach循环;              //ES5.1引入的特性

for(var x in 属性名);     //循环出来的是下标位置值

for(var x of 属性名);     //循环出来的是属性值
示例：
let arr=["A","b","c"]    //这里就是定义了一个数组，let表示该数组为局部变量
for(let x in arr){ console.log(x)  }    //可以看到得到的是下标位置值
0
1
2

for(let y of arr){console.log(y)}      //可以看到得到的是属性值
A
b
c

3.5、Map 和 Set

ES6的新特性

Map：定义时里面得是键值对

//ES6 Map
//学生的成绩，学生的名字
//var map=new Map([['Tom',100],['jack',90],['haha',80]]);

var name=map.get('Tom');        //通过key获得value   得到100
map.set('admin',123456);		//新增
map.delete('Tom');              //删除

Set：无序不重复的集合 定义时里面也得是键值对

var set=new Set([3,1,1,1]);     
set                             //得到 Set(2) {3, 1}    ，可以看到这是无序不重复的
set.add(2);						//增加
set.delete(1);				    //删除
console.log(set.has(3));        //判断是否包含这个元素

3.6 iterator

ES6的新特性

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) //得到 10

参数问题：JavaScript可以传任意个参数，也可以不传递参数

那么参数进来是否会存在问题？

如果传进来一个空参数，如何规避？

var abs=function(x){
	 //手动抛出异常
    if(typeof x!=='number'){
        throw 'Not A Number';
    }
    if(x>=0){
         return x;
      }else{
         return -x;
           }
}

arguments

arguments 是一个JS免费赠送的关键字 （需要考虑参数问题时用到他，JavaScript不限定参数）

代表，传递进来的所有参数是一个数组！

function abs(x){
     console.log("x=>"+x);
     for(let i=0;i<arguments.length;i++){
        console.log(arguments[i]); }
     if(x>=0){
        return x;
     }else{  return -x;
          }
}

abs(10,20,30,40)   
得到：
x=>10
10
20
30
40
10

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数

rest

ES6新特性，获取除了已经定义的参数之外的所有参数

function aaa(a,b,...rest){
	console.log("a=>"+a);
	console.log("b=>"+b);
	console.log(rest);
}

4.2变量的作用域

在JavaScript中，var定义变量是有作用域的。

假设在函数体中声明，则在函数体外不可使用 (非要实现的话可以研究一下 闭包)

function va(){
            var x=1;
            x=x+1;
        }
        x=x+2;   //得到的是 Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qq(){
    var x=1;
    x= x +1;
}

function qq2(){
    var x='A';
    x= x +1;
}

内部函数可以访问外部函数的成员，反之则不行！

当内部函数变量名和外部函数变量名重名时，会存在一个查找的规则，内部函数就近原则会优先找内部的那个成员变量值，本质就还是用内部的！

var x=10;
function va(){
   var x=1;
   x=x+1;
   console.log(x);
}
console.log(x);    //得到 10
va;                //得到 2

提升变量的作用域

function vv(){
    var x="x"+y;
    console.log(x);
    var y='y';
}
//结果得到  xundefined

说明：JS执行引擎，自动提升了y的声明，但是不会把对y的赋值提上去;

所以需要养成 所有的变量定义都放在函数头部，便于代码维护；

function vv1(){
    var x=1,
        y=x+1,
        z,a,c;  //undefined
    
    //之后可以随意用
}

全局变量的规范！

背景：由于我们所有的全局变量都会绑定到 window 上，如果不同的 JS 文件，使用了相同名字的全局变量，那在合代码的时候容易造成冲突，那么如何减少这种冲突呢？

—自己定义一个唯一的全局变量

//唯一的全局变量
var chen={};

//定义全局变量
chen.name='chenjintao';
chen.add = function(a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一的空间名字中，就可以降低全局命名冲突的问题了 —JQuery 就是这么做的

局部作用域 let

function a(){
            for(var i=0;i<100;i++){
                console.log(i);
            }
            console.log(i+1);
}
//通过调用a这个函数，得到在for循环外 i+1 还是生效的  得到101

所以需要将var全局声明关键字替换成 let 局部声明关键字

function a(){
            for(let i=0;i<100;i++){
                console.log(i);
            }
            console.log(i+1);
}
//通过调用a这个函数，得到  Uncaught ReferenceError: i is not defined

常量 const ES6新特性

使用 const去定义一个常量，不易改变

const PI='3.14';
console.log(PI);   //3.14
PI='123';          //Uncaught TypeError: Assignment to constant variable

const PI='3.14';
console.log(PI);   //3.14
PI='123';          //Uncaught TypeError: Assignment to constant variable

4.3、方法

定义方法 （关注它定义和调用）

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

<script>

var chen={
    name:'cc',
    brith:2000,
    age:function(){
        //今年-出生那年
        var now=new Date().getFullYear();
        return now-this.brith;
    }
}
</script>

//属性   chen.name     得到 cc
//方法   chen.age()    注意：方法调用要带()

这里的this代表的是什么？拆开代码分开来看，将function()函数放到上面去

<script>
function getAge(){
  var now=new Date().getFullYear();
  return now-this.brith;
}

var chen={
    name:'cc',
    brith:2000,
    age:getAge
}
</script>
//chen.age()   得到21
//getAge()     NAN   即 Not A Number   因为this是window里使用，没有去调用chen里的brith

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

apply 这个是所有函数都可以调用的，作用在于 在js中可以控制this的指向，但在狂神视频中感觉讲的很乱，有兴趣了解即可

5、内部对象

标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

now.getFullYear() //年      当前是2021年  得到  2021 
now.getMonth();   //月 0~11 当前是7月, 所以得到  6
now.getDate();    //日      当前是7月7日   得到  7
now.getDay();     //星期几   当前是星期3    得到  3
now.getMinutes(); //秒                   得到  31
now.getSeconds(); //分钟                 得到  43         
now               //日期时间  Wed Jul 07 2021 11:31:43 GMT+0800 (中国标准时间)
now.toDateString();//日期    "Wed Jul 07 2021"
now.toGMTString();//世界时间  "Wed, 07 Jul 2021 03:31:43 GMT"
now.toLocaleString();//本地时间  比如现在是下午的2点57   所以得到  "2021/7/7下午2:57:07"
now.getTime();    //时间戳                得到 1625628703959
console.log(new Date(1625628703959));//  得到 Wed Jul 07 2021 11:31:43 GMT+0800 (中国标准时间)

5.2、JSON

json是什么

• JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象，任何JS支持的类型都可以使用JSON来表示；

• 对象使用： { }

• 数组使用： [ ]

• 所有的键值对 都使用： key：value

JSON字符串和 对象 的转换

//对象user
var user={
name:"chen",
age:20,
sex:"男"
}
console.log(user)  //得到
    {name: "chen", age: 20, sex: "男"}
    age: 20
    name: "chen"
    sex: "男"
    __proto__: Object


//将对象转换为json字符串       stringify转换
var jsonuser=JSON.stringify(user);
console.log(jsonuser)  //得到    {"name":"chen","age":20,"sex":"男"}


//将json字符串转换为json对象    parse解析
var obj=JSON.parse(jsonuser);
console.log(obj);  //得到
    {name: "chen", age: 20, sex: "男"}
    age: 20
    name: "chen"
    sex: "男"
    __proto__: Object

注意 JSON 和 JS对象的区别

var obj={a:'hello',b:'helloworld'};
var json={"a":"hello","b":"helloworld"}

5.3、Ajax （了解即可）

• 原生的js写法 xhr异步请求
• JQuey封装好的方法 $("#name").ajax("")
• axios请求

6、面向对象编程

原型对象

JavaScript、Java、C++、C# …均为面向对象语言，而 JavaScript有点不同

类：模板 原型对象

对象：具体的实例

原型：”__ proto __“ （仅做了解，因为这个不好用所以 JS 才选择JAVA的class类继承

    var user={
        name:"chen",
        age:20,
        sex:"男",
        run:function(){
        console.log(this.name+"run...");
        }
    }

   
    var xiaoming={
    name:"xiaoming"
    }

    //小明的原型指向了user
    xiaoming.__proto__=user;
此时 xiaoming.run();  //得到xiaomingrun...


    var bird={
        fly:function(){
        console.log(this.name+"fly...");
        }
    }
    //小明的原型指向了user
    xiaoming.__proto__=bird;
此时 xiaoming.fly();  //得到xiaomingfly...
此时再 xiaoming.run();   //得到Uncaught TypeError: xiaoming.run is not a function  at <anonymous>:1:10

Class类继承

class关键字，是在ES6引入的

1.定义一个类，属性，方法

2.集成

//定义一个学生的类，实际上就是类似上面的模板
class Student{
        constructor(name){
            this.name=name;
        }
        hello(){
            alert("hello")
        }
    }
var xiaoming=new Student("xiaoming");   //定义一个变量，这里定义完就可以去调用了
var xiaohong=new Student("xiaohong");   //定义一个变量，这里定义完就可以去调用了
xiaoming.hello();     //得到一个弹窗  hello
xiaohong.hello();     //得到一个弹窗  hello

class pupil extends Student{
    constructor(name,grade){
    super(name);
    this.grade=grade;
    }
    myGrade(){
    alert("我是一个小学生")
    }
}

var xiao=new pupil("xiao",3);
console.log(xiao);    //得到 pupil {name: "xiao", grade: 3}
xiao.myGrade();       //得到一个弹窗  我是一个小学生

本质：查看对象原型

可以看到这个pupil类继承了Student类，他的原型就是Student

而原型链：指的就是这些类是一个 圆环状的原型，最终还是到object

7、操作BOM对象(重点)

浏览器

JavaScript 和 浏览器的关系 =》 JavaScript诞生就是为了让它在浏览器中运行！

BOM：浏览器对象模型

• IE 6~11
• Chrmoe
• Safari
• FixFox …

window窗口
window 对象 是浏览器的顶级对象，它具有双重角色，代表浏览器窗口

• 它是 JS 访问浏览器窗口的一个接口
• 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

// 定义在全局作用域中的变量会变成window对象的属性
var num = 10;
console.log(window.num);
// 10

// 定义在全局作用域中的函数会变成window对象的方法
function fn() {
    console.log(11);
}
console.fn();
// 11
————————————————
原文链接：https://blog.csdn.net/Augenstern_QXL/article/details/115406408

window.alert(1);
window.innerHeight;
window.innerWidth;
等等
alert(11);    也可以省略 window

7.2、Navigator （了解）

Navigator 对象 封装了浏览器的信息， 但是大多数不会使用，因为容易被人为修改，不建议使用（了解即可）

7.3、Screen

screen 对象 代表屏幕的尺寸

screen.height    //1080 px
screen.width     //1920 px

7.4、Location & URL补充知识 (重点)

7.41、URL

统一资源定位符（uniform resouce locator）

url 的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议 常用的http,ftp,maito等
host	主机(域名) www.itheima.com
port	端口号，可选
path	路径 由零或多个'/'符号隔开的字符串
query	参数 以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容 常见于链接 锚点

7.42、location对象属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接 锚点

7.43、location对象方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 ，如果参数未true 强制刷新 ctrl+f5

location 对象 代表当前页面的URL信息 (重要)

location   //可以得到以下
href: "https://www.baidu.com/",
origin: "https://www.baidu.com"
protocol: "https:"
host: "www.baidu.com"
//以上
location.reload();    //重新加载当前网页

loaction.assign('https://www.csdn.net/');  //直接从当前网页跳转到csdn

7.5、Document (重点)

document 对象 代表当前的页面 ，HTML DOM文档树

document.title;    //得到对应的网站title，如当前页面是百度    "百度一下，你就知道"

可以获取具体的文档树节点， 所以后面也可以动态的删除和控制节点

<body>

<dl id="app">
    <dt>JAVA</dt>
    <dt>JAVASE</dt>
    <dt>JAVAEE</dt>
</dl>

<script>
    var dl=document.getElementById('app');
</script>

</body>

获取cookie （前端获取的方式） （网页cookie就是客户端的一些信息，这些信息会发送给服务器）

document.cookie
"Hm_lvt_eefa59dfd5fb29fcc57a8b2437ad5ab1=1621585476; Hm_lpvt_eefa59dfd5fb29fcc57a8b2437ad5ab1=1621589418; CCT_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHAiOiJvcHBvLW10biIsInN1YiI6Ilc5MDA1MTc2IiwiaXNzIjoiVEdULTI1MzM1MTMtRnkwT3l5ZzUyNndJZGdkQmp3SXBNNVl4WFk5UjRkZmtSV1NqVmhTdjY0YVhTRE9KeUwtU0lBTSIsIm5hbWUiOiJTSUFNVEdUIiwidHlwZSI6IlRHVCIsImlhdCI6MTYyNTU1MzkyNn0.oHHN3nCFSc4E36R3h_e7hN4mudrGAfn3TQFiipKgPJk"

劫取cookie原理

www.taobao.com

<script src="aa.js"></script>
<!--恶意的人员,获取你的cookie上传到他的服务器,隐私就没了，或者会伪造一个假的cookie-->

服务器端可以设置 cookie：httpOnly

7.6、History

history 代表浏览器的历史记录

history.forward();    //向前
history.back();	      //退后
history.go(x);        // x为1时表示向前1页  ，x为-1时表示向后1页   正数x向前x页，负数x向后退x页

8、操作DOM对象(重点)

DOM：文档对象模型 Document Object Model

它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。

核心：整个浏览页就是一个DOM树形结构！

• 更新DOM节点
• 遍历得到DOM节点
• 删除一个DOM节点
• 增加一个DOM节点

而要操作一个DOM节点，首先就要先获取这个DOM节点

8.0、获得节点

获得DOM节点

<body>

<h1>标题一</h1>

<p id="p1">p1</p>
<p class="p2">p2</p>

<div id="father">
    <h1>标题</h1>
    <p id="p0">p0</p>
    <p class="pp">pp</p>
</div>

<script>
    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   //找到父类最后一个节点
</script>
</body>

这是原生得代码，后面学习使用 JQuery()

8.1、更新节点

更新节点

<body>
<div id="id1">
</div>

<script>
    var id1=document.getElementById('id1');
    id1.innerText='123';
</script>
</body>

更新操作文本

• id1.innerText=‘123’; 修改文本的值(其实也是往空白的页面里加一个文本123)
• id1.innerHTML=’< strong>123</ strong> ’ 可以解析HTML文本标签

操作 CSS，即直接在当前页面改样式

步骤： 1.先找到对应的元素，并将它赋给一个变量 2.通过变量去做自己要做的操作

var search=document.getElementById('su');    //例如在百度网页，可以看到id为su的"百度一下"，id是唯一的，所以直接获取
search.style.color='yellow';      //改颜色
search.style.fontSize='20px';     //改大小
search.style.padding='2em';       //改框的大小

8.2、删除节点

删除节点

步骤： 1.先获取父节点 2.再通过父节点删除自己

<div id="father">
    <h1>标题</h1>
    <p id="p1">不相关的标签p1</p>
    <p class="pp">不相关的标签pp</p>
</div>

<script>
var self=document.getElementById('p1');     //先把自己的节点 赋值标记
var father=p1.parentElement;                //通过标记将父值 再赋值
father.removeChild(self);                   //这里就把 不相关的标签p1  给删除了

father.removeChild(father.removeChild[0]); //因为childern是时刻变化的，所以不能这么操作
father.removeChild(father.removeChild[1]);
father.removeChild(father.removeChild[2]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

8.3、插入节点

插入节点 将原来某个节点移到另外一个节点去

<body>
    
<p id="js">JavaScript</p>

<div id="list">
    <p id="se">JAVASE</p>
    <p id="ss">JAVASS</p>
    <p id="me">JAVAME</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);  //将上面的id为js的节点移到list标签里去
</script>

</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4x1vQFMc-1625822509789)(C:\Users\W9005176\AppData\Roaming\Typora\typora-user-images\image-20210709153636975.png)]可以看到 原本在

外面的

JavaScript

标签被移到了里面

8.4、创建节点

创建节点 即创建一个新的节点 createElement 实现插入

<body>

<p id="js">JavaScript</p>

<div id="list">
    <p id="se">JAVASE</p>
    <p id="ss">JAVASS</p>
    <p id="me">JAVAME</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);

    var num=document.createElement('p');   //1.先创建一个标签
    num.id='newP';						   //2.给这个标签id
    num.innerText='hello,world!';		   //3.给这个标签加内容 TEXT、HTML...
    list.appendChild(num);				   //4.再把这个标签放到对应的标签下
</script>

9、操作表单（验证）

表单是什么 可以联想到-- form标签 DOM 树

• 文本框 text
• 下拉框 < select >
• 单选框 radio
• 多选框 checkbox
• 隐藏框 hidden
• 密码框 password
• …

表单的目的： 提交信息

获得提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作表单</title>
</head>

<body>

<form method="post">
    <p>
    <span>用户名:</span>
    <input type="text" id="username">
    </p>

    <!--多选框的值,就是定义好的value-->
    <p>
        <span>性别:</span>
        <input type="radio" id="boy" name="sex" value="man">男
        <input type="radio" id="girl" name="sex" value="woman">女
    </p>
</form>

<script>
    var input_username=document.getElementById('username');   //定义上面数据里id为 username的变量名
    var boy_radio=document.getElementById('boy');             //定义上面数据里id为 boy的变量名
    var girl_radio=document.getElementById('girl');           //定义上面数据里id为 girl的变量名

    //通过下面可以得到输入框的值
    input_username.value;

    //通过这个可以给输入框赋值
    input_username.value='123';

    //对于单选框,通过判断checked,来取得当前的值
    boy_raido.checked;  								//查看返回的结果,是否为true  如果是true,则为选中

    gril_radio.checked;  								//同理

</script>

</body>
</html>

提交表单 验证 —从输入账号密码到跳转至baidu，密码适用md5加密，并且无法在后台看到

<!--表单绑定提交时间
onsubmit =绑定一个提交检测的函数, true, false
将这个结果返回给表单,适用onsubmit 接收!

即 onsubmit="return aa()"
-->

<!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>用户名:</span> <input type="text" id="username" name="username">  </P>
    
    <p> <span>密码:</span> <input type="password" id="password">  </p>
    

    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>

</form>

<script>

    function aa(){
        alert(1);
        var uname=document.getElementById('username');
        var pwd=document.getElementById('password');
        var md5pwd=document.getElementById('md5-password');
		//pwd.value=md5(pwd.value);    加上这个可以看到在提交密码的时候,密码会突然变长, 用户体验不好
        
        md5pwd.value=md5(pwd.value);
        //可以校验判断表单内容,true就是通过提交,false就是阻止提交
        return true;
    }
</script>

</body>
</html>