javaScript是一门世界上最流行的脚本语言!
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

javaScript的历史故事:
值得一提的是:javaScript脚本语言是Brendan Eich只花了10天时间制作而成的!
web history-----JavaScript 的起源故事_weixin_30883271的博客-CSDN博客
ECMAScript可以理解为javaScript的一种标准!
javaScript的最新版本已经到9了

2.javaScript的引入方式

html内部标签
```
<script>//js代码</script>
 
```
html外部引入 js代码:
```
//js代码如:
alert("Hello World");
```
引入:
```

<script src="js文件" type="text/javascript"></script>
```

3.基本语法

定义变量:

在javaScript中变量的定义很随意,并没有整数,浮点数定义类型的概念,统一用关键字var来表示如:

<script>
    var temp01=1;
    var temp02=1.1;
    var temp03="你好";
    var temp04=true;
</script>

条件控制:

<!-- 注意:javaScript严格区分大小写! -->
<script>
    var score=10;
    if(score===100){
        alert("大天才");
    }else if (score>=90){
        alert("小天才");
    }else if (score>=75){
        alert("还不错")
    }else if (score>=60){
        alert("小糊涂");
    }else{
        alert("大糊涂")
    }
</script>

浏览器调试:

在javaScript代码中并没有向java一样有命令调试窗口供我们使用,但是可以在浏览器中按下F12打开,开发者工具供我们调试如:

可以在这里进行javaScript的调试!

常见命令:

alert("打印的信息!");
console.log("输出的信息!"); //同java中的System.out.println(“输出的信息!”);

同:

数据类型(大致)

数据类型有很多种如:数值,文本,视频,音频等等...但是在javaScript里是没有细别的区分的如:不区分小数和整数.

Number 来表示数字类型

132 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN //表示:not a Num ber 不是一个数字
Infinity //无穷大

字符串

同样可以用双引号或单引号来表示如:
var a="abc";
var b='abc';
其他的转移字符与java是一样的如:
var c="\n"; //\n表示换行的意思

布尔值

var a=1>2; //a为false
var b=2>1' //b为true

逻辑运算

&&  两个为真即结果为真 同 并且

||  一个为真即结果为真 同 或者
   
!   真即假,假即真 同取反

比较运算符

= 表示赋值

== 表示等于(类型不一样.值一样,也会判断为true)

=== 表示绝对等于(必须类型一样,值一样,才会为true)

如:

所以建议大部分情况下使用三个等于符号！

须知:NaN===NaN,这个与所有的数值都不相等,包括自己,只能通过isNas();方法来判断是否相同

浮点数

尽量避免使用浮点数的运算,因为会有精度损失!

null和undefined

null是空的意思,而undefined是未定义的意思

数组

java数组是一列相同类型的对象，js中不需要这样~

var a=[1,2,3,4,5,6,"你好",true,null,'1'];

如果输出数组下标越界了则会undefined.

对象

注意:对象是大括号,而数组是中括号! 每个属性之间用逗号隔开,最后一个属性不需要添加如:

<script>
    var Object={
        name:"小步",
        age:16,
        sex:"男"
    };
</script>

对象取值:

严格检查模式:

前提:严格检查模式需要ES6的支持！

“use strict”严格语法模式用来检查一些应为javaScript的随意导致的一些问题，必须写在第一行！

<script>
    "use strict"
    let i=10;
</script>

小知识:局部变量建议使用let去定义~~~

4.数据类型(详细)

字符串

正常字符串我们使用单引号,或者双引号包裹
注意转移字符如:\b(删除一下) \n(换行) \t(Tab键) \'(转移单引号) \"(转移双引号)

多行字符串编写使用``包裹可以写多行字符如:

 var String = `
    你好
    嘿
    Hello
    World
    `;

模板字符串,可以不用在进行拼接了直接支持EL表达式如:

<script>
    "use strict";
    let name="小步";
    let String = `你好呀${name}`;
</script>

字符串长度

var temp="Hello World";
temp.length;    //获取长度
temp[0] ;       //通过下标获取

字符串是不可变的

字符串常见AIP

student.toUpperCase()； //转大写
student.toLowerCase();  //转小写
student.indexOf('e');   //查找字符串第一次出现的位置
student.substring(0,2); //字符串截取,包头不包尾

数组

Array可以包含任意数据类型如:

let arr = new Array(1,2,3,4,"5",6,7);

arr.length=10;

注意:如果修改数组长度则会生变化,多余的会用空f来代替,如果赋值过小,元素会丢失!

常见API:

let arrays=new Array(1,2,3,4,5,6); //定义数组

//从前往后找,找到返回下标
arrays.indexOf(1);
//截取数组返回新的数组,包头不包尾
arrays.slice(0,5);
//从数组后面加入一个元素
arrays.push(1);
//从数组后面弹出一个元素
arrays.pop();
//从数组前面插入元素
arrays.unshift(0);
//从数组前面弹出一个元素
arrays.shift();
//数组从小到大排序
arrays.sort();
//元素反转
arrays.reverse();
//拼接数组,返回一个新的数组
arrays.concat(array);
//链接符join 用来链接数组变成一个字符串
arrays.join("+");
>"1+2+3+4+5+6"

多维数组:

var arr=[[1,2],[3,4],["5","6"]];
console.log(arr[0][0]);
>1

对象

对象定义:

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

//同:这是定义了四个属性的preson对象
var preson = {
    name: "小步",
    gae: 16, 
    email: "3068384097@qq.com",
    score: 100
}

JS中对象,{...}中表示一个对象,采用了键值对的方式描述属性,多个属性之间需要加上逗号,最后一个不需要加.

对象中所有的键都是字符串所以可以这样取值:preson['name']

对象赋值:

preson.name="小小步";
preson.age=15;

使用一个不存在的对象属性不会报错,而会undefined;

动态删除属性:

 delete preson.name

动态添加属性:

preson.name="小步";

判断属性是否在这个对象中使用in!(包括父类继承的!)

'name' in preson
>true

判断一个对象自身是否拥有这个元素使用preson.hasOwnProperty("判断的属性");

preson.hasOwnProperty('age');
>true

5.流程控制

if判断

var age=5;
if(age<5){
    alert("wuwu~");
}else{
    alert("haha~");
}

while循环

let age=0;
while (age<100){
    console.log(age);
    age+=1;
}

尽量避免死循环！

for循环

let age=0;
for (let i = 0; i < 100; i++) {
    console.log(age);
    age+=1;
}

forEach遍历数组>es5.6新特性

let age=[1,58,2,6,3,5,9,5,6,56,6,66];
age.forEach(function (value) {
    console.log(value)
})

for...in遍历数组

    let age=[1,58,2,6,3,5,9,5,6,56,6,66];
    for (let i in age) {
        console.log(age[i]);
    }

6.Map和Set集合

Map与Set是ES6新出的特性！

Map集合:键值对

//定义Map集合
let map=new Map([["admin",123],["xiao","123456"]]);
//同键获取值
console.log(map.get("admin"))
//设置键值
map.set("xiaomi",654321)

Set集合:无序不重复的集合

    //定义set集合，无序不重复
    let set=new Set([1,2,1,1]);
    set.add(3);//增加元素
    set.delete(1);//删除元素
    set.has(2);//是否包含元素

iterator:迭代器

遍历数组:

    //遍历数组
    let sz=[1,2,5,8,97,1];
    for (let i of sz){
        console.log(i);
    }

遍历map:

    //遍历Map集合
    let map=new Map([["admin",123],["xiao","123456"]]);
    for (let i of map){
        console.log(i);
    }

遍历Set:

    //遍历set集合，set特点无序不重复
    let set=new Set([1,2,1,1]);
    for (let i of set){
        console.log(i);
    }

7.函数

定义函数(方式一):

    //比大小函数
    function ContrastSize(x,y){
        if (x>y){
            return x;
        }else {
            return y;
        }
    }

一旦执行到return代表函数结束,返回结果!

如果没有执行return,函数执行完也会返回结果,结果为undefined;

定义函数(方式二):

    //比大小函数
    let size=function (x,y){
        if (x>y){
            return x;
        }else {
            return y;
        }
    }

function(x,y){......}这是一个匿名函数,但是可以把结果赋值给变量,通过变量调用函数!

调用函数

方式一:ContrastSize(1,2); //3
方式二:size(3,4); //7

参数问题:javaScript函数可以传入任意个参数,也可以不传入参数！

验证判断抛出异常:

    //比大小函数
    let size=function (x,y){
        //抛出异常
        if (typeof x !== "number"||typeof y !== "number"){
            throw "传入的参数不能为字符串!";
        }

        if (x>y){
            return x;
        }else {
            return y;
        }
    }

arguments

arguments是JS免费赠送的一个关键词

arguments代表传入的所有参数,他是一个数组!

    let size=function (x,y){
        if (arguments.length === 0) {
            throw "传入参数不能为空";
        }
        //抛出异常
        if (typeof x !== "number"||typeof y !== "number"){
            throw "传入的参数不能为字符串!";
        }

        if (x>y){
            return x;
        }else {
            return y;
        }
    }

rest

ES6新特性,rest可以获取除了已经定义的全部传入参数,如:

    function test(x,... rest){
        console.log(rest);
    }

注意:rest本质也是一个数组,必须写在最后一个参数;

8.变量的作用域

在javaScript中定义的var实际是有作用域的.

假设在函数体外部调用函数体内部是不可以调用的,如:

    function test(){
        var x="2";
    }
    //报错:Uncaught ReferenceError: x is not defined
    console.log(x);

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

内部函数可以访问外部函数成员,如:

    function test01(){
        var x=1;
        function test02(){
            var y=x+1;
        }
    }

反之外部函数不能调用内部函数.

假设内部函数和外部函数的变量重名,则会优先调用进的变量,如:

  function test01(){
        var x=1;
        function test02(){
            var x=2;
            console.log("内:"+x)
        }
        console.log("外:"+x)
        test02();
    }

函数查询变量是从自身变量开始，由内向外查找~

提升变量的作用域

    function test(){
        var x="你好"+y;
        console.log(x)
        var y="小步"
    }

结果:你好undefined

说明:JS执行引擎自动提升了y的声明,但是不会进行y的赋值同:

     function test02(){
        var y;
        var x="你好"+y;
        console.log(x)
        y="小步"
    }

这是在javaScript建立之初就存在的特性,所有变量定义都放在函数的头部,不要乱放,便于代码维护.

    function test(){
        var a,c,v,b,n;
        //之后随意使用...
    }

全局函数

    let x;
    x=1;
    function f(){
        console.log(x);
    }
    f();
    console.log(x)

全局对象window

    var x="xxx";
    alert(x);
    alert(window.x);//默认全局变量都是绑定在window对象下

alert(); 这个函数本身也是window的一个变量

    var x="xxx";
    window.alert(x);
    //接收属性
    var y=window.alert;
    //重新赋值window.alert属性
    window.alert =function (){

    };
    //发现window.alert失效了
    window.alert("123");
    //重新赋值
    window.alert=y;

javaScript实际只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到就会向外查找.如果在全局作用域都没有找到就会报错:ReferenceError

规范

由于我们全部的全局变量都会绑定到window上，如果不同的js文件,使用了相同的全局变量,则会冲突~ 如何能减少冲突~

    //定义全局唯一变量
    var XiaoBu={};

    //定义全局变量
    XiaoBu.name="小步";
    XiaoBu.age="16";
    XiaoBu.add=function (x,y){
        return x+y;
    }

把自己的代码全部放入自己定义的唯一空间名字中,降低全局命令冲突问题！

局部作用域let

    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//i出了for循环还能生效!!!

ES6又新出了let关键字解决了这个冲突~

    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//这次便不能生效了!!!

建议使用let去定义局部作用域的变量~

常量const

在ES6之前使用全大写命令的变量是常量,建议不要修改~ 在ES6引入了const关键字

    //被常量定义后将不能在被修改    
    const IP="3.1415926"
    //报错:Uncaught TypeError: Assignment to constant variable.
    IP="12654";
    console.log(IP)

9.方法

方法就是把函数放在对象里,对象只有两个东西:属性和方法.

        var tang={
            name:"小步",
            birthYear:2006,
            //定义age方法
            age:function (){
                let fullYear = new Date().getFullYear();
                return fullYear-this.birthYear;
            }
        }

this在这里指向了调用它这个方法的对象.

方法拆开:

        function age(){
            return new Date().getFullYear()-this.birthYear;
        }

        var tang={
            name:"小步",
            birthYear:2006,
            //定义age方法
            age:age
        }

java中:this是无法指向的,只能默认指向调用函数的对象！

javaScript可以控制this指向,也是默认指向调用函数的对象！

apply

在js中可以通过apply()方法控制this的指向！所有函数都有这个方法如:

        function age(){
            return new Date().getFullYear()-this.birthYear;
        }

        var tang={
            name:"小步",
            birthYear:2006,
            //定义age方法
            age:age
        }
        
        //控制age函数的this指向tang,参数为[]
        age.apply(tang,[]);

10.内部对象

标准对象:

typeof 123
>'number'(数字类型)

typeof "123"
>'string'(字符串类型)

typeof true
>'boolean'(布尔类型)

typeof NaN
>'number'(数字类型)

typeof []
>'object'(对象)

typeof {}
>'object'(对象)

typeof Math.abs
>'function'(函数)

typeof undefined
>'undefined'(未定义类型)

Date(时间)

基本使用:

    //Sun Apr 10 2022 17:00:47 GMT+0800 (中国标准时间)
    let date = new Date();  // var day1 = date.getDay(); 代表星期几
    let fullYear = date.getFullYear();//年
    let month = date.getUTCMonth();//月  外国人的月份是0-11月而我们的月份是1-12月!!!!!
    let day = date.getDate();//日
    let hours = date.getHours();//时
    let minutes = date.getMinutes();//分
    let seconds = date.getSeconds();//秒

    let time = date.getTime(); //获取时间戳(从1970年1月1日0时0分0秒到现在的毫秒数)
    let d= new Date(time);//将时间戳转换为时间
    
    //获取时间
    function getDate() {
        return fullYear+"-"+month+"-"+day+"  "+hours+":"+minutes+":"+seconds;
    }

转换:

    //转换时间戳
    let date1 = new Date(1649582381584); //输出:Sun Apr 10 2022 17:19:41 GMT+0800 (中国标准时间)
    date1.toLocaleString(); //调用方法转换格式为:'2022/4/10 17:19:41'
    date1.toUTCString();    //调用方法转换格式为:'Sun, 10 Apr 2022 09:19:41 GMT'

11.JSON

JSON是什么?

早期所有数据习惯使用XML文件！

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

在javaScript中一切皆为对象,任何js类型都支持使用JSON表示，number,String等等...

格式:

所有对象都用{}
所有数组都用[]
所有键值对都是用 key:value

    //创建一个对象
    let tang={
        name:"小步",
        age:16
    }
    //将对象转换为字符串:'{"name":"小步","age":16}'
    let s = JSON.stringify(tang);
    //将字符串解析为对象:
    let parse = JSON.parse('{"name":"小步","age":16}');

12.面向对象

什么是面向对象？

在编程语言中有很多都是拥有面向对象的概念的如:java,javaScript,C#等等.

面向对象:万物皆为对象实例对象
类:模板,设计图纸原型对象

而在javaScript中需要换一下思维模式。

原型:

    "use strict"
    var people={
        name:"QingJiang",
        age:30,
        run:function (){
            console.log(this.name+"正在跑步~~")
        }
    }

    var XiaoBu={
        name:"小步",
    }

    //表示XiaoBu的原型是people（同java中的继承类似）注意:这里的__proto__ 是两个_
    XiaoBu.__proto__=people;

注意:这里的__proto__ 是两个_！！！！

给原型增加方法：

      function Test(){
          alert("Test");
      }

      //给Test()增加一个方法
      Test.prototype.hello=function (){
        alert("你好");
      }

Class 继承

class关键字是在ES6引入的

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

    //定义一个类
    class Student {
        //类的构造器使用constructor来表示!
        constructor(name) {
            this.name = name;
        }

        Hello(){
            console.log(this.name+"Hello World");
        }
    }
    let XiaoMing=new Student("小明");

2.继承

  //定义一个学生类
    class Student {
        //类的构造器使用constructor来表示!
        constructor(name) {
            this.name = name;
        }

        Hello(){
            console.log(this.name+"Hello World");
        }
    }

    //再次定义一个小学生类继承学生类
    class SmallStudent extends Student{ //这里的继承同原型一样
        constructor(name) {
            super(name);
        }

        SelfIntroduction(){
            console.log("I Yes SmallStudent!");
        }
    }
    let XiaoMing=new Student("小明");
    let XiaoHong = new SmallStudent("小红");

本质:还是查看了对象的原型！

原型链:

原型链就是实例对象和原型对象之间的链接,每个对象同java一样都有一个老祖宗(原型链),最多链接到了Object原型中,则会循环链接,可以想象为一条链子,循环链接,Object的原型链接调用Object的构造方法(或者get,set方法)进行循环链接！

13.操作BOM对象

浏览器介绍:

javaScript和浏览器的关系:

javaScript的诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型===操作浏览器对象模型

IE6 ~ IE11
Chrome
Safari
FireFox

第三方浏览器:

QQ浏览器
360浏览器
火狐浏览器
谷歌浏览器

Window

Window代表了浏览器的窗口

    //浏览器弹窗
    window.alert("Hello World");
    //获取浏览器内部宽高(内部表示浏览器页面目前的宽高)
    let innerHeight = window.innerHeight;
    let innerWidth = window.innerWidth;
    //获得浏览器外部宽高(外部表示浏览器本身的宽高)
    let outerHeight = window.outerHeight;
    let outerWidth = window.outerWidth;

这里可以尝试调整浏览器窗口试一下就知道了！

小知识:Window下的所有属性方法都是全局的！

Navigator

Navigator:封装了浏览器的信息,该对象在window下。

navigator.appName (获取创建者)
》'Netscape'

navigator.appVersion (获取版本)
》'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.36'

navigator.platform(获取平台)
》'Win32'

大多数我们不会用到Navigator对象,应为会被人为修改！不建议使用这些属性来判断编写代码！

Screen

Screen代表了屏幕的对象,同样该对象在window下.

screen.height (获取屏幕高度单位为像素)
》1080 px 
screen.width  (获取屏幕宽度单位为像素)
》1920 px

Location(重要)

Location代表了当前界面的URL信息

//表示主机
host: "www.baidu.com" 
//表示正指向的地址
href: "http://localhost:63342/javaScript/study04/%E7%B1%BB.html?_ijt=vgsr8at965gjao6hs9o4bc45tj&_ij_reload=RELOAD_ON_SAVE"
//网站协议
protocol: "https:"
//网站方法 
reload: ƒ reload() 
//设置新的地址
location.assign("http://tangmingyong.com")

Document

document代表当前页面

document.title;
》'百度一下，你就知道'
document.title='小步';
》'小步'

获取具体的文档数节点:

<body>
    <dl id="app" style="border: 1px solid #000000">
        <dt>java</dt>
        <dd>javaSE</dd>
        <dd>javaEE</dd>
    </dl>
<script>
    //通过id获取文档数节点
    let id = document.getElementById("app");
</script>
</body>

获取Cookie

//获取cookie
document.cookie

劫持cookie的原理:
当进入了恶意网站时,可能会去执行获取恶意的js脚本而通常浏览器又不会进行js的扫描所以可能有恶意js脚本进行获取Cookie信息再上传到别人的服务器上进行获取信息!

服务器端可以设置:Cookie:httpOnly

history

history:代表了浏览器的历史记录,同样存在于window对象下！

//前进一步
history.forward();
//后退一步
history.back();

不建议使用！如果需要跳转网页尽量使用重定向或转发！不要偷懒用这个！

14.操作DOM对象(核心)

DOM：文档对象模型

核心:

浏览器网页就是一个DOM树形结构！

跟新:跟新DOM节点
删除:删除DOM节点
增加:增加DOM节点
遍历:遍历DOM节点得到DOM节点

向要操作一个标签节点首先先要获取这个DOM节点！

    //通过标签获取DOM节点
    let h1 = document.getElementsByTagName("h1");
    //通过id获取DOM节点
    let p1 = document.getElementById("p1");
    //通过class获取DOM节点
    let p2 = document.getElementsByClassName("p2");

    let object = document.getElementById("Object");
    //获取object的子节点
    let sonDOM = object.children;
    //获取第一个节点
    let firstChild = object.firstChild;
    //获取最后一个节点
    let lastChild = object.lastChild;
    //获取下一个节点
    let nextSibling = object.nextSibling;

这是原生代码之后会使用jQuery.

跟新节点

<body>
<p id="text"></p>

<script>
    "use static"
    //获取节点
    let text = document.getElementById("text")
    //修改内容
    text.innerText="123";
</script>
</body>

操作文本

text.innerText="123"; 操作文本
text.innerHTML="<i>123</i>"; 修改标签

操作css

text.style.color="#40b6cd";
text.style.backgroundColor="#746111";
text.style.fontSize="15";
text.style.height="100px";
text.style.width="100px";

删除节点

删除节点的步骤,先获取父节点和子节点,在通过父节点删除自己，如:

<body>
<div id="id1">
    <p id="p1">p1</p>
    <i>哈</i>
</div>

<script>
    "use strict"
    //获取父节点
    let id = document.getElementById("id1");
    //获取子节点
    let p1=document.getElementById("p1");
    //通过父节点删除字节点
    id.removeChild(p1);

</script>
</body>

获取:

    let id = document.getElementById("p1");
    //获取父节点
    let parentElement = id.parentElement;
    //获取全部子节点
    let children = parentElement.children;

删除:

    let id = document.getElementById("id1");
    //获取全部子节点
    let children = id.children;
    //删除是一个动态的过程
    id.removeChild(children[0]);
    id.removeChild(children[0]);

注意:删除多个节点的时候一定要注意数组是在时刻变化的！

插入节点:

我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerHMTL就可以增加一个元素，但是这个DOM已经存在元素了，我们就不能这么干了,因为会覆盖！这时就可以进行插入节点！

追加元素:

<body>
<p id="js">javaScript</p>
<div id="java">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>

<script>
    let js = document.getElementById("js");
    let java = document.getElementById("java");
    java.appendChild(js);
</script>
</body>

通过js创建节点:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">javaScript</p>
<div id="java">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    let js = document.getElementById("js");
    let java = document.getElementById("java");

    //通过js创建一个节点
    let node = document.createElement("p");
    node.innerText="java";
    java.appendChild(node);

    //创建一个script标签节点
    let script = document.createElement("script");
    script.setAttribute("type","text/javascript");

    //创建一个style标签节点
    let style = document.createElement("style");
    style.setAttribute("type","text/css");
    style.innerHTML="body{background-color:red;}";
    //将创建的style标签节点放入head标签下
    let head = document.getElementsByTagName("head");
    head[0].append(style);

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

insert

<body>
<div id="java">
    <div id="se">javaSE</div>
    <div id="ee">javaEE</div>
    <div id="me">javaME</div>
</div>

<script>
    //创建节点
    let div = document.createElement("div");
    div.setAttribute("id","javaScript");
    div.innerHTML="javaScript";
    //在ee上方插入节点
    let java = document.getElementById("java");
    let ee = document.getElementById("ee");
    //insertBefore(新插入的节点,新插入的节点在什么前面) 这里表示插入的节点div在ee节之前
    java.insertBefore(div,ee);
</script>
</body>

15.操作表单

表单是什么 form DOM树

文本框
下拉框
单选框
多选框
隐藏域
密码框
.....

表单的目的:提交信息

<body>
<form method="get">
    用户名:<input type="text" name="userName" id="userName"><br>
    性别:<input type="radio" name="sex" value="nan" id="nan">男 <input type="radio" name="sex" value="nv" id="nv">女<br>
    <input type="submit">
</form>
<script>
    let userName = document.getElementById("userName");
    //得到输入框的值
    console.log(userName.value);
    //设置输入框的值
    userName.value = "你好";

    //对于多选框,单选框等固定的值,nan或者nv只能取到固定的值
    let nan = document.getElementById("nan");
    let nv = document.getElementById("nv");
    console.log(nan.checked);//查看当前的值true或者false
    nan.checked=false;//修改当前的值
</script>
</body>

表单按钮绑定事件及其加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入MD5加密 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form>
    <p>
        用户名:<label for="nameUser"></label><input type="text" name="text" id="nameUser">
    </p>
    <p>
        密&emsp;码:<label for="password"></label><input type="password" name="password" id="password">
    </p>
    <p>
        <!-- 绑定事件 onclick点击事件 -->
        <input type="submit" onclick="test()">
    </p>
</form>

<script>
    function test() {
        //获取属性
        let nameUser = document.getElementById("nameUser");
        let password = document.getElementById("password");
        //进行密码加密
        password.value = md5(password.value);
        alert("用户名:" + nameUser.value);
        alert("密码:" + password.value);
    }
</script>
</body>
</html>

表单绑定事件并进行加密处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入MD5加密 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!-- 表单绑定事件
    onsubmit=绑定一个提交检测函数,true false
    将这个结果值返回給表单使用onsubmit接收!
    onsubmit="return test()"
 -->
<form action="nihao.com" onsubmit="return test()">
    <p>
        用户名:<label for="nameUser"></label><input type="text" name="text" id="nameUser">
    </p>
    <p>
        密&emsp;码:<label for="password"></label><input type="password" name="password" id="password">
    </p>
    <p>

        <input type="submit">
    </p>
</form>

<script>
    function test() {
        //获取属性
        let nameUser = document.getElementById("nameUser");
        let password = document.getElementById("password");
        //进行密码加密
        password.value = md5(password.value);
        alert("用户名:" + nameUser.value);
        alert("密码:" + password.value);

        //可以校验判断表单
        return true;
    }
</script>
</body>
</html>

这样可能跳转的一瞬间密码边长则可以加入这个熟悉变为隐藏域:

password.setAttribute("type","hidden");

16.jQuery

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
可以理解为jQuery是一个存放了大量函数的工具的库,里面有大量的工具类！

jQuert官网:j查询 (jquery.com)

CDN jQuery:直接引入版本，CDN引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

同理也可以直接去官网上下载源码进行导入！

jQuery选择器

jQuery公式:$(选择器).action()

<body>
<div id="se">javaSE</div>
<div class="ee">javaEE</div>
<span>javaME</span>

<script>
// 传统方法 
document.getElementById("se");
document.getElementsByClassName("ee");
document.getElementsByName("span");
<!--公式:$(选择器).action() 这里的选择器就是css选择器-->
$("#se").click();
$(".ee").click();
$("span").click();
</script>
</body>

事件

事件一般有:鼠标事件,键盘事件,其他事件

通过事件修改标题:

    //当失去焦点时修改标题
    window.onblur=function () {
        document.title="快回来";
    }
    //焦点回来时修改标题
    window.onfocus=function () {
        document.title="Title";
    }

获得鼠标位置:

<body>
mouse:<span id="Text"></span>
<div id="divMove" style="width: 500px;height: 500px;border: 1px solid red;"></div>

<script>
    //当网页加载完成之后则加载该事件
    $(function () {
        $("#divMove").mousemove(function (x) {
            $("#Text").text("x为" + x.pageX + ",y为" + x.pageY)
        });
    })
</script>
</body>

jQuery在线文档:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

操作DOM

节点文本操作:

<body>
<ul id="test-ul">
    <li class="js">javaScript</li>
    <li name="python">Python</li>
</ul>
<script>
    $("#test-ul li[name=python]").text();//获得值
    $("#test-ul li[name=python]").text("你好");//设置值
    $("#js").html();//获得值
    $("#js").html('<i>js</i>');//设置值
</script>
</body>

css的操作:

$(".js").css("color","red");

元素的显示和隐藏:本质display=none如:

$(".js").css("display","none");

小技巧

如何巩固js(看jQues源码看游戏源码)
巩固HTML,CSS(扒网站！)