JavaScript基础

叁次

已于 2024-06-03 15:18:33 修改

阅读量209

点赞数

文章标签： javascript java 开发语言

于 2023-04-19 21:02:19 首次发布

本文链接：https://blog.csdn.net/qq_41488067/article/details/127029524

版权

了解JavaScript

JavaScript 是 Web 的编程语言，是世界上最流行的脚本语言。所有现代的 HTML 页面都可以使用 JavaScript。
HTML 定义了网页的内容，CSS 描述了网页的布局，JavaScript 控制了网页的行为

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Helloworld</title>
    <!--外部引入，标签必须成对出现-->
    <script src="js/qj.js"></script>
<!--    &lt;!&ndash;script标签内：写js代码    &ndash;&gt;-->
 <!--内部标签，标签必须成对出现-->
<!--    <script>-->
<!--        alert('hello world!');-->
<!--    </script>-->
</head>
<body>
</body>
</html>

基本语法

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

    <script>
        // 1.定义变量  变量类型 变量名 = 变量值；
        var score = 1;
        var name = "wudi";
        // 2.条件控制
        if(score>61 && score<70){
            alert("666");
            }
        else if(score<61){
            alert("true");
        }
        //console.log(score) 在浏览器打印变量！等同于Systen.out.println（）
    </script>
</head>
<body>

</body>
</html>

数据类型

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

//变量，不能以数字和除了$,_等以外的特殊字符开头
var a = 1;

js不区分小数和整数，Number

123//整数123
123.1 //浮点数
1.123e3//科学记数法
-99 //负数
NaN //不是一个数
Infinity //表示无限大

‘abc’,“abc”//字符串
ture,false//布尔值
&&，||，! //逻辑运算

== //等于（类型不一样，值一样，就true）
=== //绝对等于（类型一样，值一样，才true）

null //空
undefined //未定义

NaN===NaN是错的,这个与所有数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN。
尽量避免使用浮点数进行计算，存在精度问题！

//数组
//Java的数值必须是相同类型的对象，JS中不需要这样！
var arr = [1,2,3,'hello',null,true];//保证代码的可读性，尽量使用[]
new Array(1,12,30,'hello');
//取数组下标：如果越界了，就会defined
var person = {
            name:"uss",
            age:3,
            tags:['hh','...']
        }
//取对象的值
person.name
>"uss"

严格检查代码

    <!--
        前提：IDEA需要设置支持ES6语法
        'use script';严格检查模式，预防Javascript的随意性导致产生的一些问题
        必须写在JavaScript第一行
        局部变量建议使用let去定义
    -->
    <script>
        'use script';
        //全局变量,不要使用！！
        i = 1;
        //局部变量
        let a = 2;
    </script>

数据类型

字符串

字符串我们使用‘’单引号，或双引号包裹
注意转义字符\

\' 表示字符串
\n  换行
\t   table
\u4e2d  \u#### unicode字符
\x41  Asc11字符

多行字符串编码

//tab 上面 （`） esc键下面
var msg = 
    `hello 
word
ni`

模板字符串

//tab 上面 （`） esc键下面
let name = "我";
let age = 17;
let msg = `你是，${name}`

字符串长度

var student = "stud";
console.log(student.length);

字符串的可变性：不可变
大小写转换，获取坐标

//注意，这里是方法，不是属性
str.toUppercase();
str.toLowercase();

str.indexOf(‘t’);

str.substring(1)//从第一个字符串截取到最后一个字符串
str.substring(1,3)//[1,3),截取，包头不包尾

数组

Array可以包含任意的数据类型
存储数据（如何存，如何取）

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

//1.长度,假如给arr.length赋值，数组大小就会改变，元素会丢失
arr.length = 10；

//2.indexOf,通过元素或得下标索引,字符串的“1”和数字1是不同的
arr.indexOf(2)
>1

//3.slice()截取Array的一部分，返回一个新数组，类似于String中的substring，包头不包尾
arr.slice(3)

//4.push,pop
arr.push('a') //压入尾部
arr.pop() //弹出尾部的一个元素

//5.unshift(),shift()头部
unshift()  //压入到头部
shift() //弹出头部的一个元素

//6.排序sort()
(3)["B","A","C"]
arr.sort()
(3)["A","B","C"]

//7.元素反转reverse()
(3)["C","B","A"]
arr.reverse()
(3)["A","B","C"]

//8.替换concat(),并没有修改数组，只是会返回一个新的数组
(3)["A","B","C"]
arr.concat([1,2,3])
(3)["A","B","C",1,2,3]
arr
>(3)["A","B","C"]

//9.连接符join,打印拼接数组，使用特定的字符串连接
(3)["A","B","C"]
arr.join('-')
>"A-B-C"

//10.多维数组
arr = [[1,2],[3,4],[5,6]];
arr[1][1]
>4

对象

若干个键值对，JS中对象，{…}表示一个对象，键值对描述属性xx : xx
JavaScript中所有的键都是字符串，值是任意对象

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
var person = {
            name: "yss",
            age: 3,
            score: 99
        }

1.对象赋值

person.name = "yss";

2.使用一个不存在的对象属性，不会报错，显示undefined

person.jj
>undefined

3.动态的删减属性

delete person.name;

4.动态的添加,直接给新的属性添加值即可

person.jj = "jj";

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

'age' in person;
>true
//继承
'tostring' in person
>true

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

person.hasOwnProperty('tostring')
>false
person.hasOwnProperty('age')
>true

流程控制

if判断

var age = 3;
if(age>3){
    alert("kk");
}else if(age<5){
     alert("k1k");
}else{
     alert("kwk");
}

while循环

 var age = 3;
        while (age<100){
            age = age + 1;
            console.log(age);
        }
 do{
           age = age + 1;
           console.log(age);
 }while (age<100)

for循环

for (let i =0;i < 33;i++)
        {
            console.log(i);
        }

forEach循环

//函数
        var name = [2,5,6,3,12,52,22];
        age.forEach(function (value) {
            console.log(value)
        })//对于name数组进行遍历
//     forEach语法：
//     forEach语法中function三个参数
//     value：遍历数组的内容；
//     index：数组索引
//     array：数组本身
// forEach（function（value，index，array）{
//     code；
// }）
//

for…in数组循环

 //for(var index in object){} 索引
        for (var n in name){
            console.log(name[n]);
        }

Map/Set

Map:

 //ES6新特性
        //学生的成绩，学生的名字
        // var score = [100,80,90];
        // var name = ["yss","hl","hh"];
        var map = new Map([['yss',100],['hl',88],['hh',99]]);
        var name = map.get('yss');//通过key获得value
        map.set('admin',123456);//新增或修改
        // map.delete("yss");剔除
        console.log(name);

Set:无序不重复的集合

var set = new Set([3,1,1,1,1]);//set可以去重
        set.add(2);
        set.delete(1);

iterator：遍历
遍历数组

//通过for..of遍历数组
var ar = [2,3,4];
for(var x of ar){
   console.log(x)
}

遍历Map

var map = new Map([['yss',100],['hl',88],['hh',99]]);
        for(var x of map){
            console.log(x);
        }

遍历set

 var set = new Set([3,1,1,1,1]);//set可以去重
        for(let x of set){
            console.log(x);
        }

函数及面向对象

对象（属性，方法）
函数：其实就是对象。

函数定义

使用关键字 function 定义函数，函数可以通过声明定义，也可以是一个表达式。
函数可以在声明之前调用，使用表达式定义函数时无法提升，也就无法调用。
函数可作为一个值使用，也可作为表达式使用。

绝对值函数

//定义方式一：
function abs(x){
    if(x >= 0){
       return x;
    }else{
       return -x;
    }
}
//一旦执行到return代表函数结束，返回结果！
//如果没有执行return，函数执行完也会返回结果，就是undefined

//定义方式二：
var abs = function()//这是一个匿名函数类，但是可以把结果幅值给abs。
{if(x >= 0){
       return x;
    }else{
       return -x;
    }
}

//调用函数
abs(10);

参数问题：JavaScript可以传递任意个参数。假设不存在参数，如何规避。

var abs = function()
        {//手动抛出异常来判断
        if(typeof x !== 'number'){
            throw 'not a number';
        }
       if(x >= 0){
            return x;
        }else{
            return -x;
        }
        }

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;
           }
       }

arguments包含所有的参数，想要使用多余的参数来进行附加操作，需要排除已有参数。

//rest ES6引入的新特性
//rest参数（形式：...变量名），只能写在最后面，用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function fn(a,b,...args){
    console.log(a)
    console.log(b)
    console.log(args)
}
fn(1,2,3,4,5)
>1
>2
>(3)[3,4,5]

箭头函数

ES6 新增了箭头函数，箭头函数表达式的语法比普通函数表达式更简洁。

//(参数1, 参数2, …, 参数N) => { 函数声明 }

//(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;
//箭头函数是不能提升的，所以需要在使用之前定义。使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
//如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

//call()示例：
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

//apply示例：
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

//两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
//通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

变量定义域、let、const

在JavaScript中，var定义变量实际是有作用域的。假设在函数体中声明，则在函数体外不可以使用。（可以使用闭包）
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

function qj(){
    var x = 1;
    x = x + 1;
}
x = x + 2; //x未被定义

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

function qj1(){
    var x = 1;
    x = x + 1;
}
function qj2(){
    var x = ‘A’;
    x = x + 1;
}

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

function qj(){
    var x = 1;

    //内部函数可以访问外部函数的成员，反之则不行
    function qj2(){
    var y = x + 1; //2
    }
    
    var z = y + 1; //y未被定义
}

假设，内部函数与外部函数的变量重名。函数查找从自身函数开始，查找由“内”向“外”查找。假设外部存在这个同名的变量，则内部函数屏蔽外部函数的变量。

function qj(){
    var x = 1;
    function qj2(){
    var x = 'A'; 
    console.log('in'+x);
    }
    console.log('out'+x);
    qj2();
}
qj()
//out1
//inA

提升变量的作用域，注：声明可以提升，初始化不会

function qj(){
    var x = ‘x’ + y;
    console.log(x);
    var y = 'y';
}
//结果：x 未被定义
//说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。
//这是在JavaScript建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，便于代码维护。

全局函数

//全局变量
var x = 1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象 window

var x = 'xxx';
window.alert(x);
var lj = window.alert;
//此时window.alert失效，lj代表x;
//恢复需要在进行对window.alert赋值

alert(window.x);
//默认所有的全局变量，都会自动绑定在window对象下。
//alert（）这个函数本身也是一个window变量。

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用域内找到，就会向外查找，如果全局变量未找到，则报错RefrenceError。
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，会发生冲突。–>如何减少冲突？

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

//定义全局变量
yss.name = 'yss';
yss.add = function(a,b){
     return a + b;
}
//把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域let

function f(){
    for(var i = 0;i < 100; i++){
     console.log(i);
    }
    console.log(i+1);
 }
    f()
    //0,1，....,99
    //101
    //i出了作用域还可以使用

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

function f(){
    for(let i = 0;i < 100; i++){
     console.log(i);
    }
    console.log(i+1);
}
f()
 //0,1，....,99
 //i未被定义
 //建议使用let去定义局部作用域的变量

常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，并建议不要修改这样的值。

var PI = '3.1415926';
console.log(PI);//3.1415936
PI = '213';//可以改变这个值
console.log(PI);//213

在ES6 引入 const 关键字，解决常量问题！

const PI = '3.1415926';
console.log(PI);//3.1415936
PI = '213';//直接报错，类型错误，不可以改变这个值
console.log(PI);//3.1415936

方法

定义方法

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

var yss = {
    name: 'yss',
    birth: 1999,
    age:function(){
    //今年-出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
    //this是无法指向的，this默认指向当前调用它的对象。但在js可以使用apply进行指向。
    }
}
//属性
yss.name
//方法，一定要带（）
yss.age()

内部对象

标准对象

typeof 123
"nember"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"nember"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date

基本使用

 var now = new Date(); //时间对象
    now.getFullYear();//年
    now.getMonth();//月
    now.getDay();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳，从1970年1月1日00：00:00开始的毫秒数

    console.log(new Date(1585485965584))

转换

now = new Date(15784984654987);
//Sun Mar 16 2470 21:57:34 GMT+0800 (中国标准时间)
now.toLocaleSting //注意，调用是一个方式，不是一个属性！
f toLocaleSting(){[native code]}
now.toLocaleSting()
"2470/3/16 下午21:57:34"

JSON

JSON是什么
早期，所有的数据传输习惯使用XML文件！

JSON（JavaScript Object Natation,JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：
格式：对象都用{}，数组都用[]，所有的键值对都是key:value。

 var user = {
        name: "yss",
        age: 20,
        sex:'男'
    }

    //对象转化为json字符串
    var jsonUser = JSON.stringify(user)

    //josn 字符串转化为对象
    JSON.parse(jsonUser)
    //推荐方法，参数为json字符串：var obj = JSON.parse('{"name":"yss","age":20,"sex":"男"}')

JSON和JS对象的区别

var obj = {a:'s',b:'b'};//js对象
var json = '{"a":"yss","b":"bss"}';

异步编程

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
//setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print"，在命令行输出 "RUNOOB!"。

Promise

Promise 是一个ES6提供的类，目的是更加优雅地书写复杂的异步任务。
Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。
then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。
、catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止运行，而是进入catch 方法中。

//构造 Promise，参数resolve和reject，分别表示 Promise 成功和失败的状态。
new Promise(function (resolve, reject) {
    // 要做的事情...
});

//示例：用 "函数瀑布" 来实现分三次输出字符串，第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒，特别繁琐，变得非常冗赘
setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

//用Promise来实现同样的功能
new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

Ajax

原生的js写法：xhr异步请求
jQuey封装好的方法 $(“#name”).ajax(“”)
axios请求

面向对象编程

什么是面向对象

JavaScript、Java、C#…面向对象；JavaScript有些区别

类：模板/原型对象
对象：具体的实例

原型：

var Student = {
    name:"yss",
    age:33,
    run:function(){
    concole.log(this.name + "going..");
    }
};
var uu = {
    name:"xiao"
};
//xiao的原型是Student
xiao.__proto__ = Student;

class

class关键字是在ES6引入的, 函数声明会提升，类声明不会

function Student(name){
     this.name = name;
}
  //给student新增一个方法
  Student.prototype.hello = function(){
       alert('hello')
  };
  //ES6之后
  //定义一个学生类
  class student{
      constructor(name){
      this.name = name;
      }
      hello(){
          alert('hello')
      }
  }
  var yss = new student("uss");

继承

//定义一个学生类
  class student{
      constructor(name){
      this.name = name;
      }
      hello(){
          alert('hello')
      }
  }
class yss extends student{
      constructor(name,grade){
      super(name);
      this.grade = grade;
      }
      myGrade(){
         alert('woshinidie')
      }
}
  var yss = new student("uss");
  var yss2 = new yss("usss",1);

super() 方法引用父类的构造方法。通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法。继承对于代码可复用性很有用。
getter 是一种获得属性值的方法，setter是一种设置属性值的方法，getter负责查询值，它不带任何参数，setter则负责设置键值，值是以参数的形式传递，在他的函数体中，一切的return都是无效的
get/set访问器不是对象的属性，而是属性的特性，特性只有内部才用，因此在javaScript中不能直接访问他们，为了表示特性是内部值用两队中括号括起来表示如[[Value]]

本质：查看对象原型

静态方法

静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。静态方法不能在对象上调用，只能在类中调用。

class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}
 
let noob = new Runoob("yss");
 
// 可以在类中调用 'hello()' 方法
document.getElementById("demo").innerHTML = Runoob.hello();
 
// 不能通过实例化后的对象调用静态方法
//document.getElementById("demo").innerHTML = noob.hello(); 代码会报错

如果你想在对象 noob 中使用静态方法，可以作为一个参数传递给它：

class Runoob {
  constructor(name) {
    this.name = name;
  }
  static hello(x) {
    return "Hello " + x.name;
  }
}
let noob = new Runoob("yss");
document.getElementById("demo").innerHTML = Runoob.hello(noob);

操作BOM对象（重要）

浏览器介绍

JavaScript和浏览器的关系：
JavaScript的诞生就是为了能够让他在浏览器中运行

B：浏览器对象模型

浏览器内核：IE 6~11、Chrome、Safari、FireFOX…
window代表浏览器窗口，可以通过它调用或调整浏览器窗口
Navigator封装了浏览器的信息
大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码
screen代表屏幕，可修改屏幕属性
location代表当前页面的URL信息

host:"www.baidu.com"
hert:"https:www.baidu.com"
protocol:"https:"
reload:f relord() //刷新网页
location.assign('https://nms.gg.com')
//设置新的地址

document代表当前的页面，HTML DOM文档树，获取具体的文档树节点。列子：document.cookie，获取缓存
history浏览器的历史记录。例子：history。back（）后退；history.forward（）前进。

操作DOM对象（重点）

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素

<p id="intro">你好世界!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

通过标签名找到 HTML 元素

<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
//查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

通过类名找到 HTML 元素

<p class="intro">你好世界!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>

getElementsByTagName 和 getElementsByClassName 这两个方法查找多个 dom 元素，返回的是 htmlcollection 类型，是伪数组而不是真数组，故不能使用数组的方法。可以使用数组原型配合 slice 方法，利用 call，apply，bind 方法将伪数组转为真数组。

改变HTML输出流

JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<script>
document.write(Date());
</script>

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变HTML内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML

//改变<p>元素的内容
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

//改变<h1>元素的内容
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="gg";
</script>
//上面的 HTML 文档含有 id="header" 的 <h1> 元素,我们使用 HTML DOM 来获得 id="header" 的元素,JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=新属性值

//改变<img>元素的 src 属性：
<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>
//上面的 HTML 文档含有 id="image" 的 <img> 元素;我们使用 HTML DOM 来获得 id="image" 的元素;JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点

文档是一个文档节点。
所有的HTML元素都是元素节点。所有HTML属性都是属性节点。文本插入到HTML元素是文本节点。
注释是注释节点。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

获得DOM节点

核心：浏览器网页就是一个DOM树形结构

更新：更新DOM节点
遍历dom节点：得到DOM节点
删除：删除一个dom节点
增加：增加一个dom节点
要操作一个dom节点，就必须要先获得这个dom节点

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var h1 = document.getElementsByTagName('h1');
    var father = document.getElementById('father')

</script>

这是原生代码，之后我们尽量使用jQuery()；

更新DOM节点

 var id1 = document.getElementById('id1');
    id1.innerText = '123';  //修改dom节点文本值
    id1.innerText = '456';

    id1.innerHTML = '<strong>123</strong>';//可以解析HTML文本标签
    
    id1.style.color = 'red';  //修改dom节点属性，操作js，使用‘’包裹

删除DOM节点

删除节点的步骤：先找到父节点，再通过父节点删除该节点

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var h1 = document.getElementsByTagName('h1');

    var father = p1.parentElement;
    father.removeChild(p1);

    //以下是错误的。。删除是一个动态的过程：
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
    //删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意
</script>

插入节点

获得某个dom节点之后，若为空，可以通过innerHTML增加一个元素；若不为空，则会覆盖
追加已存在的节点：

<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);//追加append，已存在的节点

</script>

创建一个新的标签，实现插入

<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 newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello';

    list.appendChild(newP);

</script>

创建一个标签节点

<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 x1 = document.createElement('script');
    x1.setAttribute('type','text/javascript');
    
    list.appendChild(x1);

    //也可以创建一个style标签，先创建一个空style标签，再设置标签内容，再插入
</script>

操作表单（验证）

表单是什么：JavaScript 表单是 Web 应用中常见的一种交互形式，可以帮助我们快速地收集用户的数据，以便于后续的处理。JavaScript 表单通常通过 HTML 中的 form 元素来实现，表单中可以包含各种输入元素，如文本输入框text、单选框radio、多选框checkbox、下拉菜单select、隐藏域hidden、密码框password等。

表单的目的：提交信息

获得提交的信息

<form method="post">
    <p>
    <span>用户名：</span><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');
    input_text.value

    //得到单选框的值，对于单、多选框等固定的值，boy.value只能得到当前的值
    var boy = document.getElementById('boy');
    var girl = document.getElementById('girl');

    boy.checked; //查看返回的结果，若为true，则被选中
    boy.checked = true;//修改选中的结果

    //修改输入框的值
    input_text.value = '123';

</script>

提交表单,md5加密

<!--表单绑定提交事件-->
<form action="https://www.baidu.com/" method="post" onsubmit="aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="text" id="input-password">
    </p>
    <!--    隐藏密码框-->
    <input type="hidden" id="md5-pwd" name="password">

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


<script>
    function aaa() {
        var name = document.getElementById('username');
        var pwd = document.getElementById('inputpassword');
        var md5pwd = document.getElementById('password');

        //MD5算法
        md5pwd.value = md5(pwd.value);

        console.log(name.value);
        console.log(pwd.value);
        console.log(md5pwd.value);
        //可以校验判断表单内容，true就是通过提交,false是阻止提交       
        return true;
    }

</script>

jQuery

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程，里面存在大量的JavaScript函数。

认识jQuery

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<!--公式：$（selector）.action
-->
<a href="" id="test-jquery">点我</a>

<script>
    document.getElementById('test-jquery');
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
                 alert('hello,jquery');
        }
    )
</script>

选择器

<a href="" id="test-jquery" name="test-jquery" class="test-jquery">点我</a>

<script>
    //原生js，选择器少，麻烦不好记
    //id
    document.getElementById('test-jquery');
    //标签
    document.getElementsByTagName('test-jquery');
    //类
    document.getElementsByClassName('test-jquery');

    //jQuery css 中的选择器它全都能用！基本选择器，层次选择器、属性选择器等
    $('p').click();//标签
    $('#id').click();//id
    $('.class').click();//class类
    
</script>

事件

<!--获取鼠标当前的坐标-->
mouse : <span id="mouseMove"></span>
<div id="divmove">
    在这里移动鼠标试试
</div>

<script>
    //当网页加载完毕之后，响应事件
    $(function () {
        $('#divmove').mousemove(function (e) {
            $('#mousemove').text('x:'+e.pageX+'y:'e.pageY)
        })
    });
</script>

操作DOM

<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="python">Python</li>
</ul>

<script>
    //document.getElementById('');

    //节点文本操作
    //属性选择器
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text('shezhizhi');//设置值
    $('#text-ul').html();//获得值
    $('#text-ul').html('<strong>123</strong>');//设置值

    //css的操作
    $('#test-ul li[name=python]').css({"color","red"});

    //元素的显示和隐藏:本质 display：none
    $('#test-ul li[name=python]').hide();
    $('#test-ul li[name=python]').show();

    //其他
    $(window).width();
    $(window).height();
    $(document).height();
    $(document).width();

</script>