JavaScript 扫盲基础-优快云博客

本文链接：https://blog.youkuaiyun.com/Akai__csdn/article/details/120713345

JavaScript

1. 什么是JavaScript

1.1 、概述

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

1.2 历史

历史相关链接: https://www.w3school.com.cn/js/pro_js_history.asp.
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5代码上！
开发环境–线上环境，版本不一致

2. 快速入门

2.1 引入JavaScript

内部标签写js语言,注释也是 //。
```
<script>
    alert('hello word');    //弹窗标签
</script>
```
通常script双标签写在的头部或者标签的尾部，但是不能写在标签之外

外部引入方式

在项目目录中创建一个js文件，把要写的js代码写在其中，文件中不需要写标签

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

<!--    type 属性，不用显示写，默认也是text/javascript-->
    <script type="text/javascript"></script>

测试

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

<!-- 内部引入  script 标签内 写js代码-->
	<script>
       alert('hello');
 	</script>

<!-- 引入外部文件  注意是双标签，不能用 自闭和标签-->
<!--    script标签必须成对 出现-->
    <script src="js/qj.js"></script>

<!--    type 属性，不用显示写，默认也是text/javascript-->
    <script type="text/javascript"></script>
</head>
<body>

</body>
</html>

2.2 基本语法入门

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

    <script>
        // 1.定义变量      变量类型  变量名   = 变量值;
        // 2.语句以分号结尾
        // js中没有 变量类型都是用var定义，变量值是什么类型就是什么类型
        var num =1 ;  // int
        var name = "hello word"; //  string
        var score = 75;
        // 3.多行注释 和java一样
        /*
        *
        * */
        // 4. 控制语句
        if (score>60 && score<70){
            alert("60-70");
        }else if (score>70 && score<80){
            alert("70 - 80");
        }else {
            alert("other");
        }

        //console.log(score) 在浏览器的控制台打印变量  类似java中 sout

    </script>

<body>

</body>
</html>

浏览器调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1ROovV7-1633962944604)(C:\Users\ZYH\Desktop\tp\1629624110.png)]

2.3 数据类型

Js和java一样是严格区分大小写的一个语言

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

变量

var num = 1;

数值

java数值类型为Number，并且不区分小数和整数

123       // 整数
123.1	  // 小数
1.2323e3  // 科学计数法
-9        // 负数
NaN       // Not a Number 表示不是数字类型
Infinity  //表示无限大，当一个数值类型变量的值超越了js变量的极限就会定义为无限大

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算符

&&      两个为真，结果为真

||      一个为真，结果为真

！       真即假，假即真

比较运算符

=      // 赋值
    
==     // 等于  （类型不一样，值一样，也会判断为true  例如 1=='1'）
    
===    // 绝对等于（类型一样，值也一样，才会判断为true）

这是一个JS的缺陷，坚持不要使用==运算符进行比较

注意：

NaN === NaN，为false 因为NaN表示不是一个数值，与所有的数值都不相等，包括自己。
只能通过isNaN(NaN) 来判断这个数是否为NaN

浮点数问题：

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

不相等的原因是计算机无法存储无限不循环小数，所以1/3 会损失精度

尽量避免使用浮点数进行运算，存在精度问题！，通过abs绝对值函数，在取极限进行判断是否相等

Math.abs(1/3-(1-2/3))<0.00000001

null和undefined

null 空
undefined 未定义

数组

java中的数组必须是相同类型的对象，而js中不需要

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
console.log(arr[0]); // 取值
new Array(1,2,3,4,5,'hello');

取数组下标：如果越界了，就会

undefined  //未定义 ，java中报错数组越界

对象

对象是大括号，数组是中括号~~

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4,5);
   var person = {
            name:"liu",
            age:5,
            tags:['js','java','web','...']
        }

取对象值

person.name
"liu"
person.age
5

2.4 严格检查模式

需要IDEA中支持ES6语法

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

<!--
        前提：IDEA 需要支持ES6 语法
        'use strict';  严格检查模式，预防JavaScript的随意性导致的一些问题
        必须写在JavaScript的第一行！
        局部变量建议都使用let定义
        -->
    <script>
        'use strict';
        a=1;  //全局变量，JavaScript中不要定义全局变量
        // 使用严格检查模式后不允许定义全局变量。会报错
        let i=1;
         // ES6 let 定义局部变量
    </script>
</head>
<body>

</body>
</html>

3. 数据类型

3.1 字符串

正常的字符串我们使用单引号或者双引号包裹。

注意转义字符 \

console.log('a\t\xt1\t\u4e2d\nb');

\'    代表是字符串
\n 	  换行
\t    Tab
\u4e2d    \u#### Unicode字符
\x41       Asc11字符

多行字符串编写

//tab 上面esc下面的按键
var msg1 = 
`hello
word
你好呀
你好；`;
console.log(msg1);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxbTgRmg-1633962944614)(C:\Users\ZYH\Desktop\tp\1629639031(1)].png)

模板字符串
```
let name = 'Andy';
let age = 12;
var msg = `你好呀，${name}`;
console.log(msg);
```
``中不在需要用+拼接字符串直接 ${变量名}就可以拼接字符串，是模板字符串

字符串长度

str.length

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

字符串的可变性-----不可变

console.log(str[1]=1);
VM264:1 1
undefined
console.log(str);
VM329:1 student
undefined

大小写转换

//注意，这里是方法，不是属性了
console.log(student.toUpperCase()) ;  //转换成大写
console.log(student.toLowerCase()) ;  //转换成小写

获取单个字符下标索引
```
console.log(str.indexOf('u'));
```

截取字符串[)

//原则是根据下标开始也就是从0开始；
//遵循前包后不包的原则
console.log(str.substring(1));  //截取下标为1的字符到最后最后一个字符
console.log(str.substring(1,4)); //截取下标为1的字符到下标为4的字符， 包括1不包括4

3.2 数组

js中Array数组可以存放任何类型的值，不一定是同一个类型的。
```
var arr = [1,2,'3',4,5];
arr[0]=1;
```
1. 数组长度
```
arr.length
```
注意：数组的长度是可以改变的，给arr.length赋值，数组大小就会发生变化，如果赋值小于当前长度，数组元素会丢失，如果大于当前数组长度就会存在空置，其类型是undefined
1. indexOf()，通过元素获取下标索引
```
arr.indexOf('3');
2
```
字符串的’1’和数字1是不同的
1. slice()截取Array的一部分，返回一个新数组，类似与substring，[ )原则,原字符串不会改变
```
arr.slice(5)
(3) [7, "1", "2"]
arr
(8) [1, 2, 4, 5, 6, 7, "1", "2"]
arr.slice(1,6)
(5) [2, 4, 5, 6, 7]
```
1. push() 和 pop() 在数组尾部压入一个字符和弹出一个字符
```
arr
(8) [1, 2, 4, 5, 6, 7, "1", "2"]
arr.push('a')
9
arr
(9) [1, 2, 4, 5, 6, 7, "1", "2","a"]
arr.pop()
"a"
```
1. unshift()和shift() 在数组头部压入一个字符和弹出一个字符
```
arr.unshift('a')
7
arr
(7) ["a", 1, 2, 4, 5, 6, 7]
arr.shift()
"a"
```
1. 排序 sort()
```
arr
(3) ["C", "B", "A"]
arr.sort()
(3) ["A", "B", "C"]
```
1. concat()在数组后边拼接元素，返回一个新数组，并且原数组不会改变
```
arr.concat(1,2,3)
(6) ["C", "B", "A", 1, 2, 3]
arr
(3) ["C", "B", "A"]
```
1. join()用字符把数组的元素连接到一起返回一个字符串
```
arr.sort()
(3) ["A", "B", "C"]
arr.join('-')
"A-B-C"
```
1. 元素反转 reverse（）
```
arr
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]
```
1. 多维数组
```
arr = [[1,2],['3',3],['a','a']]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) ["3", 3]
2: (2) ["a", "a"]
length: 3
__proto__: Array(0)
arr[1][1]
3
```
8112598

3.3 对象

若干个键值对

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

js中的对象，{…}表示一个对象，键值对描述属性 xxxx:xxxx, 多个属性之间使用逗号隔开，最后一个不用加逗号！

JavaScript中队友的键都是字符串，值是任意对象。

对象赋值

person.name="zzzz"
"zzzz"
person
{name: "zzzz", age: 3, email: "123345@163.com", score: 0}

使用一个不存在的对象属性，不会报错！ undefined
```
person.hah
undefined
```

动态的删减属性，通过delete删除对象的属性

delete person.age
true
person
{name: "zzzz", email: "123345@163.com", score: 0}

动态的添加属性，直接给新属性赋值就可以

person.haha='a'
"a"
person
{name: "zzzz", email: "123345@163.com", score: 0, haha: "a"}

判断这个属性值是否在对象中

'haha' in person
true
'age' in person
false

判断一个属性是否是这个对象自身拥有的 hasOwnProperty
```
person.hasOwnProperty('toString')
false
```

3.4 流程控制

条件语句 if

 var num = 3;

        if (num>5){
            console.log("大于5");
        }else if (num<3){
            console.log("小于3");
        }else {
            console.log(num);
        }

while() 循环语句

 while (num<100){
            console.log(num);
            num++;
        }
 
do {
            num++;
        }while (num<100){
            num++;
            console.log(num);
        }

for 循环语句

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

forEach 循环

  var age = [12,3,5,6,78,435,345,7,87,4,4,7,82,56];

        age.forEach(function (value) {
            console.log(value);
        });

for in 循环

// for(var index in object){}
 var age = [12,3,5,6,78,435,345,7,87,4,4,7,82,56];

        for (var num in age){
            if (age.hasOwnProperty(num)){
                console.log(age[num]);
            }
        }

index  num 为数组索引

3.5 Map和Set

  //ES6 新特性 map和set集合
        var map = new Map([["li",11],["xin",22],["dong",33]]);
        var name = map.get("li");  //取值
        console.log(name);
        map.set("admin",45);   //新增
        map.set("li",776);		//修改
        map.delete("li");		//删除


 //Set 无须不重复的集合
        var set = new Set([3,2,2,2,2,2]); //自动去重
        set.add(6);   //添加一个值
        set.delete(6);  // 删除一个值
        console.log(set.has(3));  // 判断这个值是否在集合中

3.6 iterator

es6 新特性

遍历数组

//通过 for in 下标 或者 for of
var arr = [3,4,5]
for(var x of arr){
    console.log(x);
}

遍历map

var map = new Map([["li",11],["xin",22],["dong",33]]);

for(var x of map){
    console.log(x);
}

遍历set

var set = new Set([3,2,2,2,2,2]);
for(var x of set){
    console.log(x);
}

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(…) {} 是匿名函数，可以把结果赋值给 abs，然后通过abs调用函数。

调用函数

abs(10)  //10
abs(-10)  //-10

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

不传递参数的时候会返回 NaN,但是我们可以定义异常来处理这种情况以及传递的参数不是一个number的情况

  var abs = function (x) {

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

            if(x>=0){
                return x;
            }else{
                return -x;
            }
        }

arguments

当传递多个参数时，可以用 arguments 来获取参数列表，arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！

var abs = function (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;
            }
        }

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

rest

以前

if(arguments.length > 2){
	//....
}

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

 var abs = function (x,b,...rest) {

            console.log("x==>" + x);
            console.log("b==>" + b);
            console.log(rest);
        }
 
 abs(1,2,2,2,2,2,2,2)
 x==>1
 b==>2
 (6) [2, 2, 2, 2, 2, 2]0: 21: 22: 23: 24: 25: 2length: 6__proto__: Array(0)
undefined

4.2 变量的作用域

在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~

 function  t1() {

            var x= 1;
            x = x+1;
        }
        //在函数体内声明的变量，函数体外不可以用
        // x= x+2;  //ReferenceError: x is not defined

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

function t2() {

            var x =1;
            x= x+1;
            console.log(x);
        }

        function t3() {

            var x = 2;
            x =x+1;
            console.log(x);
        }

        t2();t3();
        // 如果两个函数使用了相同的变量名，只要在函数内部则互不冲突。

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

function t4() {
            var x=1;
            function t41() {
                var y =x+1; //内部函数可以调用外部变量
                console.log(y);
            }
            t41();
            // var z =y+1; //外部函数不能调用内部函数变量
            // console.log(z);
        }
        t4();

内部函数变量和外部函数的变量，重名

 //当内部函数变量名字与外部函数变量名字重名的时候
        function t5() {
            var x = 1;
            function t51() {
                var x = 'A';
                console.log("inner"+x);  //innerA
            }
            t51();
            console.log("outer"+x);  //outer1
        }
        t5();  
//假设在JavaScript中函数查找从自身函数开始，由内向外寻找，假设外部存在与内部函数变量命相同的变量，内部函数则屏蔽外部相同名称的变量。

提升变量的作用域

 function t6() {

            //相当于系统自动 写入了 var y
          var x = 'x' + y;  //xundefined
          console.log(x);
          var y ='y';
        }
        t6();
        //结果： x is not defined
        //说明： js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
        function t62() {

            var y;
            var x = 'x' + y;  //xundefined
            console.log(x);
            var y ='y';
        }

        // 这个是JavaScript建立之初就存在的特性，养成规范；所有的变量定义都放在函数的头部，不要乱发，便于代码维护；

        function t63(){
            var x = 1,
                y = x + 1,
                z,i,a; // undefined

            //之后随意用
        }

全局变量

  //全局对象window，写在<script>标签的变量，默认所有的全局变量都会自动绑定在window对象下

        var x = 'xxx';
        alert(x);
        alert(window.x);
        //alert 为全局变量也是绑定在window对象下的
        // 相当与var alert = function(){}
        var alert_old = window.alert;
        alert_old(x); //代替alert
        window.alert =function () {

        }

        alert(123);  //alert 会失效

        window.alert = alert_old;
        window.alert(456); //alert恢复

ES6 新特性

let 定义局部变量


        function t7() {
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+10); //在for 外边也可以访问
        }
        t7();
        function t71() {
            for (let i = 0; i <10 ; i++) {
                console.log("i="+i);
            }
            console.log(i);  // 用let 定义局部变量则 外边访问不到。
        }
        t71();

const 定义常量，在ES6之前都是约定大写变量为常量，这样的约束并不合理，很容易造成修改,所以改es5的代码不能随意更改大写名称的变量


        function t8() {
            const r = "111"; //常量只能在定义处修改值，其他处不能修改;
        }

4.3 方法

定义方法

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

var zdx = {
            name : "zhangyuhang",
            bitrh: 2000,
            age: function () {
                var now = new Date().getFullYear();
                return now- this.bitrh;
            }
        }

//属性调用
person.name;
//方法调用，方法一定要带（）
person.age();

apply方法

apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组

function getAge(){
    var now = new Date().getFullYear();
    return now - this.brith;
}
getAge.apply(zdx,[]); //this指向了zdx，参数为空

5. 内部对象

内部对象

typeof 1
"number"
typeof 1.1
"number"
typeof NaN   //NaN 代表 Not a Number   但是也是number类型
"number"
typeof '1'
"string"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1 、Date

var now = new Date();   //  Wed Sep 08 2021 21:43:57 GMT+0800 (中国标准时间)
        now.getFullYear(); // 年
        now.getMonth();     //月    0-11 代表月
        now.getDate();      //日
        now.getDay();       //星期几
        now.getHours();     //小时
        now.getMinutes();   //分钟
        now.getSeconds();   //秒

        //时间戳为1970.1.1 0：00：00 到现在的毫秒数
        now.getTime();  //获取时间戳  1631108637804

        //时间戳转换为Date
        console.log(new Date(1631108637804));
        //Wed Sep 08 2021 21:43:57 GMT+0800 (中国标准时间)

5.2 Json 对象

早期，所有数据传输习惯使用XML文件!

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

json 字符串和js对象互相转换

var zdx = {
            name : "zdx",
            age : 4
        }
        //对象转换为json
        var zdxJson = JSON.stringify(zdx);
        //JSON转换成json对象
        var use = JSON.parse('{"name":"zd","age":"2"}');

很多人搞不清楚 JSON 和js对象的区别

var obj = {name:'zzz',age:'3'};
var json = '{"a":"hello","b":"b"}';

6.面向对象编程

6.1、什么是面向对象

JavaScript、Java、C#…面向对象；

JavaScript有些区别！

类：模板
对象：具体的实例

类是实体的抽象

在JavaScript 这个需要大家转换一下思考方式

 //模板
        var Student = {
            name : "student",
            age : 3,
            run : function () {
                console.log(this.name + "run....");
            }
        }


        var xiaoming = {
            name: "xiaming",
        }

        //把小明的原型指向Student
        xiaoming.__proto__=Student;

        var Bird = {
            fly:function () {
                console.log(this.name + "fly....");
            }
        }

        //把小明的原型指向Bird
        xiaoming.__proto__=Bird;

// 小明从学生变成了鸟

class继承

class关键字，是在ES6引入的

       class Student{
            constructor(name) {
                this.name = name;
            }

            hello(){
                alert('hello');
            }
        }
        var xiaoming = new Student('xiaoming');
        var xiaohong = new Student('xiaohong');

继承

class xiaoStudent extends Student{
            constructor(name,age) {
                super(name);
                this.age = age;
            }

            mygrade(){
                alert('我是一个小学生');
            }
        }
        var xiaoStudent1 = new xiaoStudent('zhang',1);

原型链

在Javascript中每一个函数都有一个prototype属性指向函数的原型对象，Object指向Object

在这里插入图片描述

__ proto __指向原型对象

7. 操作BOM对象（重点）

B/S 架构：浏览器服务器

B:browser,S:server

BOM: browser Object Model 浏览器对象模型

浏览器内核：

IE 6-11
Chrome
Safari
Firefox
Opera

三方

QQ浏览器
360浏览器

window 对象

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
355
window.innerWidth
767
window.outerHeight
831
window.outerWidth
782
//用浏览器窗口对象获取 窗口的内外高度和宽度

Navigator 封装了浏览器信息

Navigator 封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.platform
'Win32'

大多时候我们不会使用navigator对象因为会被修改。

不建议使用这些属性来判断和编写代码。

screen 代表屏幕对象

代表屏幕尺寸

screen.width
1536 px
screen.height
864 px

location (重要) 定位

location 代表当前页面的URL信息

host: "www.baidu.com"  主机
href: "https://www.baidu.com/"  链接
protocol: "https:"  协议
reload: ƒ reload()  // 刷新网页
//设置新的地址，这样访问百度就会跳到新的地址。
location.assign('https://www.youkuaiyun.com/')

document (重要) 文档对象

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

document.title
'百度一下，你就知道'
document.title='aaaa'
'aaaa'

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>

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

获取网页cookie

document.cookie
'BIDUPSID=39ED3B037D56FE8061C51F3A4FBFBEFD; PSTM=1628389088; BAIDUID=39ED3B037D56FE80C3DE2CB255D29F5D:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=34649_34439_34067_31660_34711_34525_34584_34505_34707_34578_26350_34761_34424_34691_34673; BAIDUID_BFESS=39ED3B037D56FE80C3DE2CB255D29F5D:FG=1; delPer=0; BD_CK_SAM=1; PSINO=1; COOKIE_SESSION=7_3_9_9_4_7_0_0_9_7_0_0_2663_8_0_0_1633698288_1633695615_1633782197%7C9%230_3_1633695593%7C1; BD_HOME=1; BA_HECTOR=2ha5a521a1a0a00lq91gm35id0r'

劫持cookie 的原理

www.xxx.com
<scrpit src = "aa.js"></scrpit>
<!--当你访问这个网站时会植入一个叫aa的js代码，如果这个js获取你的cookie然后通过Ajax请求到他的服务器这样隐私就泄露了-->

尽量不要把cookie暴露出来

在服务器端设置 cookie：httponly 来保护cookie

history (不建议使用)

history 代表浏览器的历史纪录

history.back() 		//后退
history.forward() 	//前进

8.操作DOM对象

核心

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

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的dom节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

 //通过标签选择器 来获取页面节点
    var h1 = document.getElementsByTagName('h1');
    //通过id选择器来获取页面节点
    var p1 = document.getElementById('p1');
    //通过class选择器来获取页面节点
    var p2 = document.getElementsByClassName('p2');

    var father =document.getElementById('father');
	//获取父节点下的所有子节点
    var childrens = father.children;
	//获取父节点下的第一个子节点
	father.firstElementChild  
	//获取父节点的最后一个子节点
	father.lastElementChild
	//获取节点的相邻节点
	father.nextElementSibling

更新节点

<body>
    <div id="id1"></div>
</body>
<script>
    var id1 = document.getElementById('id1');
</script>

操纵文本

id1.innerHTML='<h1>aaa</h1>'’
id1.innerText='aaaaaaaaaaaa'

操作css

id1.style.fontSize='89px'
id1.style.color='red'
id1.style.padding='22px'
id1.style.padding='99px'

删除节点

删除节点必须通过父节点删除子节点，因为没有节点可以删除自己。

<body>
<div id="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
<script>
    //通过class选择器来获取页面节点
    var child = document.getElementById('p1');
    //获取子节点的父节点
    var father =child.parentElement;
    //删除父节点
    father.removeChild(child);
    
    //删除节点是一个动态的过程，每删除一个节点数组下标就会向前变化一个。
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    
</script>

插入节点

我们获取某个Dom节点，假设这个节点时空的，我们通过innerHTML就可以增加一个元素了，但这这个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')
            list = document.getElementById('list');

        //把js追加到list下
        list.appendChild(js); //追加：相当于剪切
    </script>

创建一个新的节点

<script>

//创建一个新的节点
var newP = document.createElement('p');
newP.id="newP";
newP.innerText='helloNEWP';
list.appendChild(newP); // 追加节点
    
    
//创建一个标签节点
var myScript = document.createElement('style');
myScript.setAttribute('type','text/javascript'); //写入属性
list.appendChild(myScript);
//添加css样式
// var body = document.getElementsByTagName('body')[0];
// body.setAttribute('style','background-color: greenyellow');

//添加css样式
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: yellow}';
var haad =document.getElementsByTagName('head')[0];
haad.appendChild(myStyle);

    
</script>

在某一个节点前插入一个节点

<script>
    var js = document.getElementById('js')
        list = document.getElementById('list')
        ee = document.getElementById('ee');
    //在ee前面插入一个节点
    list.insertBefore(js,ee);

</script>

9. 操作表单（验证）


    <form action="" method="get">

        <p>
        <span>用户名：</span><input type="text" id="username">
        </p>

        <p>
            <span>性别：</span>
            <input type="radio" name="sex" value="man" id="man">男
            <input type="radio" name="sex" value="women" id="women">女
        </p>
    </form>

<script>
    var user_text = document.getElementById('username');

    var man = document.getElementById('man');
    var women = document.getElementById('women');

    man.checked=true;  //被选中则为true
</script>

user_text.value
''
user_text.value
'12354'
user_text.value='zhasngd'  //修改输入框的值
'zhasngd'
man.checked=false
false
women.checked=true
true

提交表单 MD5加密密码 ,表单级别提交onsubmit

    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>

<!--
    onsubmit = 绑定一个提交检测的函数， true or false
    将这个结果返回给表单，使用onsubmit 接收
    onsubmit = "return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" name="username" id="username"/>
    </p>
   <p>
       <span>密  码：</span><input type="password" id="password"/>
   </p>
<!--    通过隐藏域进行提交MD5加密的密码-->
    <input type="hidden" name="password" id="md5_password">
    <button type="submit" >提交</button>
</form>

<script type="text/javascript">

    function aaa() {
        var username = document.getElementById('username')
            passowrd = document.getElementById('password')
            md5pass = document.getElementById('md5_password')
            ;
        //MD5对密码进行加密
        md5pass.value=md5(passowrd.value);
        //通过onsubmit提交   false不可以提交  返回true可以提交
        return false;
    }
</script>

10、jQuery

jQuery 是一个JavaScript库里边有大量的JavaScript函数

公式 😒(‘选择器’).actio();

获取jQuery

下载到本地导入到项目中
直接引入cdn

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

初体验


<a href="" id="test_jquery">点我</a>

<script type="text/javascript">
    //原生获取节点
    document.getElementById('test_jquery');
    //juqery 获取节点 公式 :$('选择器').actio(); 这里的选择器就是css选择器
    $('#test_jquery').click(function () {
        window.alert("a被点击了")
    });
</script>

选择器

<script>
    //原生js
    document.getElementById();  // id选择器
    document.getElementsByTagName(); //标签选择器
    document.getElementsByClassName(); //类选择器

    //jquery
    $('#id1').click(); //id选择器
    $('p').click(); //标签选择器
    $('.class').click(); //类选择器
</script>

事件

<style>

    #mouseMove {
        height: 500px;
        width: 400px;
        border: 1px solid red;
    }

</style>
<body>

    mouse: <span id="mouse"></span>

    <div id="mouseMove">鼠标在这里移动试试</div>
        
        
    <script type="text/javascript">

        //当页面加载完后执行事件为 $(document).read(function () {})  简写成 $()
        $(
            $('#mouseMove').mousemove(function (e) {
                    $('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
            })
        );
        
        
    </script>


</body>

操作dom

<body>

    <ul id="ul">
        <li name="javascript">JavaScript</li>
        <li name="java">java</li>
    </ul>

    <script type="text/javascript">

        //操作文本
        $('#ul li[name=java]').text(); //获取值
        $('#ul li[name=java]').text('12312312'); //修改值

        //添加html
        $('#ul li[name=java]').html(); //获取值
        // $('#ul li[name=java]').html('<li>hhh</li>'); //添加元素

        //操作css
        $('#ul li[name=java]').css({'color':'red'});  //括号是键值对可以写多个

        //显示和隐藏
        $('#ul li[name=java]').hide(); //隐藏
        $('#ul li[name=java]').show(); //显示

    </script>