JavaScript回顾00：入门

GrandNovice

已于 2024-03-20 10:15:15 修改

阅读量429

点赞数

分类专栏：前端文章标签： javascript js

于 2020-10-27 15:35:30 首次发布

本文链接：https://blog.csdn.net/XXMRXXX/article/details/108442410

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是javaScript？

1.1 概述

JavaScript是一门世界上最流行的脚本语言。
Java、JavaScript，10天产出
一个合格的后端人员必须精通JavaScript

1.2 标准

ECMAScript可以理解为JavaScript的一个标准。
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上!
开发环境—线上环境，版本不一致

2.快速入门

2.1 引入JavaScript

1.内部标签使用
2.外部引入

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

    <!--script标签内，写JavaScript代码-->
    <!--内部标签使用-->
<!--    <script>-->
<!--        alert('hello,word');-->
<!--    </script>-->

    <!--外部引入-->
    <!--注意：script标签必须成对出现-->
    <script src="js/qj.js"></script>

<!--不用显示定义type，也默认如此-->
    <script type="text/javascript"></script>

</head>
<body>

<!--这里也可以存放javaScript代码-->
</body>
</html>

外部引入js代码

alert('hello, world');

2.2 基本语法入门

基本语法

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

    <!--JavaScript严格区分大小写-->
    <script>
        // 注释方式跟java一样，不同于css
        // 1.定义变量  Java：变量类型 变量名 = 变量值;
        //js变量类型统称为var
        var num = 1;
        var name = "dy";
        var score = 71;
        // alert(num);
        // 2.条件控制，同java
        if (score > 60 && score < 70) {
            alert("60-70")
        } else if (score > 70 && score < 80) {
            alert("70-80");
        } else {
            alert("others")
        }

        //console.log(score) 浏览器控制台打印变量，相当于sout

    </script>
</head>
<body>

</body>
</html>

浏览器调试须知
在这里插入图片描述

2.3 数据类型

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

变量

var //变量名定义遵循java规则

Number——数值类型
js不区分整型浮点型等等

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

字符串

'abc'
"abc"  //单双引号都可以

布尔值

true
false

逻辑运算

&& // 两个都为真，结果为真
|| // 一个为真，结果为真
！// 真为假，假为真

比较运算符！！！

= //赋值
== //等于（类型不一样，值一样，也会判断为true，例数值1跟字符串"1"相等）
===  //绝对等于（类型一样，值一样，这个等同于java的==，用的较多）

js缺陷之一，坚持不要使用 == 比较

须知：
1.NaN === NaN 返回false，NaN与所有的数值都不相等，包括自己
2.只能通过isNaN(num)来判断该数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3)); //false，会有精度的损失

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

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

null和undefined
null 空
undefined 未定义

数组
Java数组：一系列相同类型的对象。（js没有这个要求）

var arr = [1, 2.5, 3, 4, 5, 6, 'hello', null, true];

有亿点像python的list
取数组下标如果越界了就会undefined

对象
对象用大括号，数组用中括号
对象的每个属性之间使用逗号隔开，最后一个属性后面不需要加逗号

        //Person person = new Person(); //java写法
        var person = {
            name: "dy",
            age:3
            tags:['js', 'java', 'web','...']
        }

浏览器打印
在这里插入图片描述

2.4 严格检查模式

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

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

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

3 数据类型

3.1 字符串

1.正常字符串我们使用单引号’'或者双引号""包裹
2.注意转义字符\

\'
\n
\t
\u4e2d  \\Unicode字符
\x41  \\AscII字符

3.多行字符串编写

        var msg =
            `
            hello
            world
            你好
            中国
            `;

使用的是tab上面的那个键 ``
4.模板字符串

        let name = "dongyang";
        let age = 3;
        let person = `你好，${name}`;

输出：“你好，dongyang”
5.字符串长度
str.length
6.字符串每个元素
str[0]
7.字符串的可变性
不可变
8.大小写转换
9.indexOf()
10.subString()同样遵循前闭后开
在这里插入图片描述

3.2 数组

JavaScript中的Array可以包含任意的数据类型。
1.长度
arr.length
注意：数组元素赋值可以改变数组内容，数组长度赋值可以改变数组长度，变长补空，变短截取
在这里插入图片描述
2.indexOf 通过元素获得下标索引

arr.indexOf(3)  //表示3出现在index=2的位置
//输出2

字符串的"1"和数字1是不同的
在这里插入图片描述
3.slice()截取数组的一部分，返回一个新的数组。
arr.slice(a)截取从第三个开始的后续数组。

4.push pop
push方法的参数是要添加的元素，push方法在尾部添加元素
pop方法没有参数，弹出尾部的元素

5.unshift() shift()
unshift() 压入到头部
shift() 弹出头部的元素
在这里插入图片描述
6.sort()排序
7.reverse() 元素反转
8.concat() 拼接

拼接不会改变原数组，会返回一个新数组
9.连接符join
将arr通过’-'将所有元素连接成一个字符串

10.多维数组

在这里插入图片描述

3.3 对象

若干个键值对

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

        var person = {
            name: "dongyang",
            age: 20,
            email: "12138@qq.com",
            score: 100
        }

在这里插入图片描述
1.对象赋值

person.name = "dy"
person.name
"dy"

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

person.haha
undefined

3.动态的删减属性
通过delete删除对象的属性
4.动态的添加，直接给新的属性添加值即可
在这里插入图片描述
5.判断属性值是否在这个对象中 xxx in xxx！
JavaScript中的键都为字符串类型，值为任意类型

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

由此可知，age是本身存在的，toString是继承的

3.4 流程控制

if else 判断

var age = 3;
        if (age > 3) {
            alert("haha")
        }else if(age < 3){
            alert("wuwuwu")
        }else {
			alert("hawu")
		}

while和do…while循环

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

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

for循环

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

forEach循环 ES>5.1

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

forin循环等效于java的增强for循环

        'use strict';
        var age = [12, 13 ,11 ,14, 15, 16];

        for (let index in age) {
            if (age.hasOwnProperty(index)) {
                console.log("存在索引" + index);  //索引
                console.log(age[index]);  //输出值
            }
        }

在这里插入图片描述

3.5 Map 和 Set

ES6新特性 Map Set
Map

        //ES6 新出Map和Set
        //学生的成绩，学生的名字
        // var names = ["Tom", "Jack", "James"];
        // var score = [100, 99, 98];

        var map = new Map([["Tom", 100], ["Jack", 99], ["James", 98]]);
        var name = map.get("Tom");  //通过key获得value
        map.set("admin", 123456);  //增加
        map.set("Tom", 0);  // 修改
        map.delete("Tom");   // 删除
        console.log(name);

Set：无序不重复的集合

        var set = new Set([3, 1, 1, 1, 1, 1]);  //set可以去重复
        set.add(2);  //添加
        set.delete(1);  //删除
        console.log(Array.from(set));  //输出set元素
        console.log(set.has(3));  //判断是否包含3这个元素

3.6 iterator使用

ES6新特性
迭代遍历
1.for of 实现

        'use strict';


        //for of 输出数组的值3 4 5， for in 输出数组下标0 1 2
        //数组
        var arr = [3, 4, 5];
        for (let x of arr) {
            console.log(x);
        }
        // 3 4 5

        //map
        var map = new Map([["A", 100], ["B", 90], ["C", 80]]);
        for (let x of map) {
            console.log(x);
        }

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

4 函数

方法：对象（属性，方法）
函数：对象外

4.1 定义函数

1.定义方式1
function 函数名(){}
绝对值函数

        "use strict";
        //定义绝对值函数
        function abs(x) {
            if (x >= 0) {
                return x;
            }else {
                return -x;
            }
        }

在这里插入图片描述
return 和结果连续写，最好不要换行写，因为javaScript会自动给每一行不加分号的代码加一个分号，则等效于return；
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是 undefined (此处为NaN)

2.定义方式2

//方式2 类似匿名内部类
var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！
调用函数

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

参数问题：JavaScript可以传任意个参数，也可以不传参数
参数进来是否存在的问题？假设不存在参数，如何规避？

//方式2 类似匿名内部类
var abs = function (x) {     
    //手动抛出异常来判断
    if (typeof x != 'number') {
        throw "Not a number";
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

参数个数问题：

1、调用函数时，如果参数多于定义时的个数，则多余的参数将会被忽略，如果少于定义时的个数则缺失的参数数会被自动赋予undefined值。

2、如果是用function语句声明的函数定义则不可以出现在循环或条件语句中，但是如果是用函数直接量方法的函数定义则可以出现在任何js表达式中。

3、arguments对象

函数的arguments对象就像一个数组，里面保存着函数调用时的实际参数，可以用arguments[0]、arguments[1]、arguments[2]…等来引用这些参数，即使这些参数在定义函数时是没有的。但arguments并非真正的数组对象。

 function a(x,y){

            arguments[0]   //表示第一个参数x

            arguments[1]   //表示第一个参数y

            arguments[2]   //表示第三个参数，前提是在调用函数时传入了三个参数 

            …

            arguments.length   //表示实际传入参数的个数

            arguments.callee(x,y)   //调用自身 
            }

arguments对象具有length属性，表示的是函数调用时实际传入的参数的个数。

arguments对象还具有callee属性，用来引用当前正在执行的函数，这个在匿名函数中尤其有用。

4、函数的length属性（没错，函数也是具有length属性的）

与arguments.length不同，函数的length属性表示的是在定义函数时的形参个数，而不是函数调用时的实际参数个数。可以用arguments.callee.length来调用函数的length属性。

arguments

arguments是一个js免费赠送的关键字;
代表传递进来的所有参数，是一个数组。

//方式2 类似匿名内部类
var abs = function (x, a) {
    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新特性
获取除了已经定义的参数之外的所有参数。
…类比于java的可变长参数
原来的解决方式：

if (arguments.length > 2) {
    for (var i = 2; i < arguments.length; i++) {
        //...
    }
}

在这里插入图片描述
现在的解决方式：

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

在这里插入图片描述
rest参数必须写在最后面，格式f(a, b, …rest){}

4.2 变量的作用域

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

    "use strict";

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

    x = x + 2;  //Uncaught ReferenceError: x is not defined

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

function f1() {
        var x = 1;

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

        var z = y + 1;  //Uncaught ReferenceError: y is not defined
    }

假设内部函数变量和外部函数的变量重名！

function f1() {
    var x = 1;
    //内部函数可以访问外部函数的成员
    function f2() {
        var x = "A";
        console.log('inner' + x);  //innerA
    }
    console.log('outer' + x);  //outer1
    f2();
    // var z = y + 1;  //Uncaught ReferenceError: y is not defined
}
f1();

在这里插入图片描述
假设在JavaScript中，函数查找变量从自身函数开始，由内向外查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数变量。(就近原则)

function f() {
    var x = "x" + y;
    console.log(x);
    var y = "y";
}
f();

在这里插入图片描述
说明JavaScript自动提升了y的声明，但是不会提升y的赋值。-----养成规范，所有的变量的定义都放在函数的头部，同时便于代码维护。
（变量在代码最前面声明，然后在使用前要进行初始化！！！）

全局函数

//全局变量
var x = 1;

function f() {
    console.log(x);
}

f();
console.log(x);

在这里插入图片描述
全局对象window

var x = "xxx";
alert(x);
alert(window.x);  // 默认所有的全局变量都会默认绑定在window对象下
// 上述两行代码效果一样

alert()这个函数本身也是绑定在window下的即：

alert(x);
window.alert(x);
//两行等效
var x = "xxx";
var old_alert = window.alert;
old_alert(x);
alert(x);
//两行等效

window.alert = function(){
};
window.alert(123);
//发现alert失效了，此处可以类比于java的重写

//恢复
window.alert = old_alert;
window.alert(456);  // 可正常打印

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

规范
由于我们所有的全局变量都会绑定到window上，如果不同的js文件使用了相同的全局变量，如何能避免冲突呢？

//唯一全局变量
var Dy = {}; // 所有的常量都绑定在Dy上而不是window上
//定义全局变量
Dy.name = "dongyang";
Dy.add = function (a, b) {
    return a + b;
}

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

jQuery

局部作用域 let

function f() {
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }

    console.log(i + 1);  //问题：i出了这个作用域还可以使用
}

ES6 let关键字，解决局部作用域外局部变量仍然有效的bug！

function f() {
    for (let i = 0; i < 10; i++) {
        console.log(i);
    }

    console.log(i + 1);  //问题：i出了这个作用域不可以使用
}

建议大家都使用let去定义局部作用域的变量。
常量 const
ES6之前怎么定义常量？
只有全部用大写字母命名的变量就是常量，互相约定不要修改。(比较危险)
在ES6 引入了常量关键字，const

    const PI = 3.14;  //只读变量
    console.log(PI);
    // PI = 123;  //Uncaught TypeError: Assignment to constant variable.

在这里插入图片描述

4.3 方法

定义方法

对象内部定义的函数叫做方法。

对象包括：

属性
方法(写在对象外部称为函数)

var dongyang = {
    name: 'dy',
    birth: 2020,
    //方法
    age: function () {
        //年龄=年份-出生年
        var now = new Date().getFullYear();
        return now - this.birth; 
    }
}
//属性
//dongyang.name;
//方法，调用记得加()
dongyang.age();

this代表当前对象
代码拆开：

function getAge() {
    //年龄=年份-出生年
    var now = new Date().getFullYear();
    return now - this.birth;
}

var dongyang = {
    name: 'dy',
    birth: 1995,
    //方法
    age: getAge
}

//dongyang.age()  ->25
//getAge()  -> NaN

在这里插入图片描述
单独使用getAge()的时候this代表的是window。
this是无法指向的，默认指向调用它的对象。

apply

在js中可以控制this的指向

function getAge() {
    //年龄=年份-出生年
    var now = new Date().getFullYear();
    return now - this.birth;
}

var dongyang = {
    name: 'dy',
    birth: 1995,
    //方法
    age: getAge
};

var xiaoming = {
    name: 'dy',
    birth: 1995,
    //方法
    age: getAge
};

//dongyang.age()  ->25
//getAge()  -> NaN

getAge.apply(dongyang, []); //表示this指向对象dongyang，且参数为空
getAge.apply(xiaoming, []); //表示this指向对象xiaoming，且参数为空

在这里插入图片描述

5 内部对象

标准对象

在这里插入图片描述

5.1 Date

基本使用

var x = new Date(); // Wed Sep 09 2020 10:56:01 GMT+0800 (中国标准时间)

x.getFullYear(); // 年
x.getMonth(); // 月  0-11月
x.getDate();  // 日  正常
x.getDay(); // 星期几  正常
x.getHours();  // 时
x.getMinutes();  // 分
x.getSeconds();  // 秒


x.getTime(); //时间戳 全世界统一 1970年1月1日 00：00：00 到目前的毫秒数

console.log(new Date(x.getTime()));  //返回当前时间

console.log(new Date());
console.log(new Date().toISOString());
console.log(new Date().toDateString());
console.log(new Date().toLocaleDateString());
console.log(new Date().toLocaleString());
console.log(new Date().toLocaleTimeString());

在这里插入图片描述

5.2 JSON

json是什么？

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

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

拓展BSON——二进制JSON Binary JSON

在JavaScript中，一切皆为对象，任何js支持的类型都可以用JSON来表示
格式：

对象都用{}
数组都用[]
所有的键值对都使用key:value
JSON 字符串和 JS 对象的转换

var user = {
    name:"dongyang",
    age:3,
    gender:"男"
};

//对象转化为json字符串
var jsonUser = JSON.stringify(user);  // {"name":"dongyang","age":3,"gender":"男"}

//json字符串转化为对象
var str = '{"name":"dongyang","age":3,"gender":"男"}';
var obj = JSON.parse(str);

在这里插入图片描述

JSON和JS对象的区别：

var obj = {a:"hello", b:"world"};  //对象
var json = '{"a":"hello", "b":"world"}';  //json字符串

5.3 Ajax

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

6 面向对象编程

6.1 什么是面向对象

原型对象

JavaScript、Java、c#…等都有面向对象思想，JavaScript有哪些区别？

类：模板原型对象
对象：具体的实例
在JavaScript中思维方式有一些不同。

var Student= {
   name:"Student",
   age:3,
   gender:"男",

   run:function () {
       console.log(this.name + " run...");
   }
};

var xiaoming = {
   name: "xiaoming",
}

在这里插入图片描述

原型：可以理解为父类

var Student = {
    name:"Student",
    age:3,
    gender:"男",

    run:function () {
        console.log(this.name + " run...");
    }
};

var xiaoming = {
    name: "xiaoming",
};

xiaoming.__proto__ = Student ;

在这里插入图片描述

var Student = {
    name:"Student",
    age:3,
    gender:"男",

    run:function () {
        console.log(this.name + " run...");
    }
};

var xiaoming = {
    name: "xiaoming",
};

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

// //小明的原型是Student
// xiaoming.__proto__ = Student;

//小明的原型是Bird
xiaoming.__proto__ = Bird;

在这里插入图片描述

6.2 继承

class关键字是在ES6引入的。
以前定义一个类增加一个方法：

function Student(name) {
    this.name = name;
}

//给Student新增一个方法
Student.prototype.hello = function () {
    alert("hello");
};

ES6之后：

定义一个类，属性，方法

//ES6之后
//定义一个Student类
class Student{
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert("hello");
    }
}

在这里插入图片描述

继承

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

    hello() {
        alert("hello");
    }
}

var xiaoming = new Student("xiaoming");



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

    myAnnounce(){
        alert("我不是小学生！")
    }
}

var Tom = new PrimaryStudent("Tom", 10);

在这里插入图片描述

本质：查看对象原型

原型链
_proto_:在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。

在这里插入图片描述

7 操作BOM对象(重点)

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

BOM：浏览器对象模型

IE 6~11
Chrome
Safari苹果
FireFox linux默认

三方浏览器

QQ浏览器
360浏览器

window

window代表浏览器窗口

在这里插入图片描述
Navigator

Navigator封装了浏览器的信息

在这里插入图片描述
大多数时候，我们不会使用navigator对象，因为会被人为修改。
不建议使用其属性来判断和编写代码！

screen

代表屏幕尺寸

在这里插入图片描述

location(重要)

location 代表当前页面的URL信息

host:"www.baidu.com"
herf:"https://ww.baidu.com"
protocol:"https:"
reload:f reload() //刷新网页
//设置新地址
location.assign("https://i.csdn.net/#/uc/profile")

在这里插入图片描述
document(内容DOM)

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

在这里插入图片描述
获取具体的文档树结点

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

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

获取cookie

在这里插入图片描述
劫持cookie原理

www.taobao.com

举例：同时打开淘宝和天猫页面，登录其中一个，在另一个刷新页面即可登录，这是淘宝内部服务器cookie从一个页面上传到两一个页面的情况。

<script src="getDocument.js"></script>
<!--恶意人员获取你的cookie，通过ajax上传到他的服务器依次获取你的隐私信息-->

服务器端可以设置cookie：httpOnly

history(不建议使用)

history代表浏览器的历史记录。

history.back()  //后退，返回上一个页面
history.forward() //前进

8 操作DOM对象(重点)

DOM：文档对象模型

核心

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

更新：修改Dom结点
遍历：得到Dom结点
删除：删除Dom结点
添加：添加Dom结点

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

//对应css的选择器
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;

p1.lastElementChild;
p1.nextElementSibling;

这是原生代码，之后我们都尽量使用jQuery();
在这里插入图片描述

更新节点

操作文本

var id1 = document.getElementById('id1');
id1.innerText = "123";  //修改文本的值
id1.innerHTML = '<strong>123<\strong>'; //改成加粗的文本123 可以解析HTML文本标签

操作css

id1.style.color = 'red';  //设置颜色
id1.style.fontSize = '50px';  //设置字体  _转驼峰命名问题 属性使用字符串包裹
id1.style.padding = '2em';  //设置padding

删除节点

删除节点的步骤：先获取父节点，然后通过父节点删除自己。

<!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>
    //确定要删除的节点
    var self = document.getElementById('p1');
    //找到要删除节点的父亲节点
    var father = self.parentElement;
    //删除节点
    father.removeChild(self);
    //方式2  删除p2
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);  //会报错，删除后节点发生变化
    father.removeChild(father.children[2]);  //会报错，删除后节点发生变化
</script>
</body>
</html>

删除是一个动态的过程，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！

插入节点

我们获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是如果这个Dom节点已经存在元素了，就不可以这样操作了，会产生覆盖。

追加

<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="javase">JavaSE</p>
        <p id="javaee">JavaEE</p>
        <p id="javame">JavaME</p>
    </div>

    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        list.appendChild(js);  //追加
    </script>
</body>

在这里插入图片描述

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

//通过JS创建一个新的节点
var newP = document.createElement('p');  //创建一个p标签
newP.id = 'newP';
newP.innerText = 'hello,world!';

//追加到list后面
list.appendChild(newP);

在这里插入图片描述

//创建一个标签节点(通过这个属性，可以设置任意的值)
var myScript = document.createElement("script");
myScript.setAttribute('type', 'text/javascript');

//追加
list.appendChild(myScript);

在这里插入图片描述

// 可以创建一个style标签
var myStyle = document.createElement('style');  //创建了一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: red}';  //设置标签内容

//追加
document.getElementsByTagName('head')[0].appendChild(myStyle);

在这里插入图片描述

insert

在list下的javaee前插入javase

        var javaee = document.getElementById('javaee');
        var javase = document.getElementById('javase');
        var list = document.getElementById('list');

        //list基准节点.insertBefore(newNode, targetNode);
        list.insertBefore(javase, javaee);

9 操作表单(验证)

表单是什么？form DOM树

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

表单的目的：提交信息

获得要提交的信息

//得到输入框的值
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');

// boy_radio.value = male;
// girl_radio.value = female; //这样获取没有意义

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

// 对于单选框，多选框等等，boy_radio.value只能取到当前的值
//通过判断是否被选中查看返回结果是否为true
boy_radio.checked;
girl_radio.checked;

提交表单

直接输入，即使密码框在浏览器页面将密码掩盖，但是提交后抓包仍可显示明文！

在这里插入图片描述

使用MD5 加密后！抓包显示密码被加密！！

在这里插入图片描述

<!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 action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>


    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>

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

<script>
    function f() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        console.log(username.value);
        console.log(password.value);
        //MD5 算法加密
        password.value = md5(password.value);
        console.log(password.value);
    }
</script>

</body>
</html>

提交表单 md5加密密码，表单优化

<!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接收
        οnsubmit="return f()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
    <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">

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

<script>
    function a() {
        var username = document.getElementById('username');
        var password = document.getElementById('input-password');
        var md5password = document.getElementById('md5-password');

        md5password.value = md5(password.value);
        //可以校验判断表单内容，true通过提交，false阻止提交
        return true;
    }
</script>

</body>
</html>

如果直接使用password.value = md5(password.value);
会出现一个输入password转换成md5加密后的密码的过程，这就是密码文本框中输入密码后，点击提交，感觉密码字符变多的情况，即没有使用hidden！！

在这里插入图片描述
chrome浏览器抓不到password，不知道为什么。。。

10 jQuery

JavaScript和jQuery的关系， jQuery就是一个封装了大量的JavaScript函数的工具库。

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--CDN 引入-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/core.js"></script>-->
	<!--不知道为何有的版本不可以！！！-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<!--公式： $(selector).action() -->
<a href="" id="test-jQuery">点我</a>

<script>

    //选择器就是css的选择器
    $('#test-jQuery').click(function () {
        console.log('hello, jQuery!');
    })
</script>
</body>
</html>

选择器

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


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

    //jQuery  css中的选择器jQuery全都能用
    //标签
    $('p').click();
    //id
    $('#id1').click();
    //类
    $('.class1').click();
</script>
</body>
</html>

文档工具站

事件

鼠标事件
键盘事件
其他事件

鼠标在框内移动显示鼠标坐标！

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>
        <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获取鼠标当前坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标
</div>

<script>
    //当网页元素加载完毕之后响应事件
    // $(document).ready(function () {
    //    
    // });

    //简写为
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
        })
    });
</script>
</body>
</html>

在这里插入图片描述

操作DOM

节点文本操作

$('#test-ul li[name = python]').text();  // 没有参数即取值
$('#test-ul li[name = python]').text('123456');  // 有参数是设置值
$('#test-ul li').html();  // 没有参数即取值
$('#test-ul li').html('<strong>123</strong>');  // 有参数是设置值

在这里插入图片描述

css的操作

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

在这里插入图片描述

元素的显示和隐藏本质：display：none

    //隐藏
    $('#test-ul li[name = python]').hide();

练习

技巧

1.巩固js(看jQuery源码，看游戏源码)
2.巩固HTML+css(扒网站)

后续：
Layer

GrandNovice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript回顾00：入门

文章目录1.什么是javaScript？1.1 概述1.2 标准2.快速入门2.1 引入JavaScript2.2 基本语法入门2.3 数据类型1.什么是javaScript？1.1 概述JavaScript是一门世界上最流行的脚本语言。Java、JavaScript，10天产出一个合格的后端人员必须精通JavaScript1.2 标准ECMAScript可以理解为JavaScript的一个标准。最新版本已经到es6版本~但是大部分浏览器还只停留在支持es5代码上!开发环境—线上环境，版
复制链接

扫一扫