javascript学习_var obj = { numbervalue: 42, stringvalue: "hello",-CSDN博客

本文链接：https://blog.csdn.net/qian4517/article/details/112168867

JavaScript

快速入门

什么是JavaScript？ JS

网页脚本语言。用来处理一些动态的DOM(document = html 标签)、用于用户交互、网页中的业务。DOM 和事件

JS 有2套标准：W3C 和 IE

浏览器厂商： IE ，火狐、谷歌、苹果、opera(欧鹏)

IE 版本11以后开始 100% 兼容JavaScript ，因为对JS的不兼容导致对CSS3和Html5的不兼容，因为Html5和CSS3中内置了很多JS

https://www.w3school.com.cn/js/pro_js_history.asp 历史

ECMAScript5 （JavaScript） ES5标准

Vue.js 的标准 ES6

JS的编程模型

在页面的内部使用 script 标签
外部JS，需要引入 <script src="./base.js"></script>
无论是内部JS还是外部JS ,其书写位置应该是页面body中的最后一行，其目的是先渲染标签和样式表在加载脚本

需要自己去看的API ：

字符串
运算符（== 和 ===）
流程控制：分支循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载顺序的例子</title>
</head>
<body>

<script>
    // 获取 text 的文本值

    // 1. 获取标签对象,获取不到
    var text = document.getElementById("text");
    console.log(text); // null
    // 2. 获取文本属性的值
    var value = text.innerText;
    // 3. 输出到控制台
    console.log('元素之前:', value)
</script>

<h1 id="text">hello world</h1>


<script>
    // 获取 text 的文本值

    // 1. 获取标签对象
    var text = document.getElementById("text");
    // 2. 获取文本属性的值
    var value = text.innerText;
    // 3. 输出到控制台
    console.log('元素之后:', value)
    alert(value); //弹窗
</script>
</body>
</html>

语法

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


<script>

    /*
    JavaScript: 是弱类型语言、松散型语言。 声明变量不需要指定类型 变量的类型由字面量来决定
    Java: 是强类型语言。声明变量的时候需要指定变量的类型
     */

    // 声明变量： 使用 var
    var x;
    console.log(typeof x) // undefined;

    // 字面量
    x = "hello"; // string

    // 类型
    console.log(typeof x);
    x = 100;
    console.log(typeof x);

    // 函数 类似于java中的方法
    function fn(a, b) {
        console.log(a, b);
        return a + b; // 可以有返回值、可以没有返回值 由 执行的结果决定
    }

    // 语句： JavaScript中 使用分号或者换行来标记一行语句的结束

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

严格检查模式strict

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    前提：IDEA需要设置支持ES6语法
    'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行!
    局部变量建议都使用Let去定义~
    -->
<script>

    'use strict'; //加上严格检查模式，就不能定义 i=1;
    let i = 1;
    console.log(i)
</script>
</body>
</html>

数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
<script>
    /*数据类型：布尔、数值型、字符串、对象、undefined、null*/

    /*js中的类型是由字面量来决定*/

 var x;
    console.log(typeof x); // undefined
    x = false;
    console.log(typeof x); // boolean
    x = "hello"; // 字符串可以是 双引号  或者 单引号
    console.log(typeof x); // string
    x = 100.2; // js中不区分 整数型 和 浮点型
    console.log(typeof x); // number

    //数组
    x = new Array(2,3,4); // js中数组的简写 [] JS中数据不需要指定长度
    console.log(typeof x); // object
    x=[1,2,3,null,'hello',43]; //数组，可读性高，建议使用
    console.log(typeof x)

    //对象
    x = new Object(); // js 中对象的简写 {}
    console.log(typeof x); // object
    x = {
        name:'zhangsan',
        age:12,
    }
    console.log(x.age);//取值

    x = null; // 打印数来也是一个 object
    console.log(typeof x); // null | object

    /*PS：js虽然是一个弱类型语言，但是实际上我们在使用的时候都需要去约定变量的类型*/

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

字符串类型

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

    //转义字符\
    console.log('a')
    console.log('a\'');
    console.log('a\nb');
    console.log('a\tb');
    console.log('\u4e2d'); // \u#### Unicode字符
    console.log('\x41'); //  Ascll 字符

    //多行字符串编写,符号为Tab上面的键
    let msg = `
    中国
    加油，
    加油
    `;
    console.log(msg);

    //模板字符串
    let name = "张三";
    let age = 20;
    let msg1 = `你好，${name},${age}`;
    console.log(msg1)

    //字符串的长度
    let str = "student";
    console.log(str.length);

    //字符串不可变
    //str[1] = "1";
    console.log(str);

    //字符串转大小写是方法
    console.log(str.toUpperCase())

    //查找第一个出现的字符位置
    console.log(str.indexOf('t'))

    console.log(str.substring(1))//从第一个索引到最后一个字符
    console.log(str.substring(1,3)) //包含第一个不包含第三个[1,3)
    
</script>
</body>
</html>

数组

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

var arr = [1,2,3,4,'hello',5,"1"];//通过下表取值和赋值
arr[0];
arr[0] = 'world'

1.长度

arr.length

注意：加入了arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失，增大，会添加undefined 的数据

2.indexOf，通过元素获得下表索引

arr.indexOf(2)

字符的“1”和数字1是不同的

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

arr.slice(2,5) //包头不包尾

4.push()，pop() 尾部

arr.push() //向数组尾部压入数据，可压入多个
arr.pop() //弹出尾部的一个元素

5.unshift() , shift() 头部

arr.unshift() //向数组头部压入数据，可压入多个
arr.shift()  // 弹出头部的一个元素

6.排序 sort()

var arr = ["a","c","b"]
arr.sort()
["a", "b", "c"]

7.元素fanzhuan

(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]

8.concat()

(3) ["c", "b", "a"]
arr.concat("1",2,3)
(6) ["c", "b", "a", "1", 2, 3]
arr
(3) ["c", "b", "a"]

注意：concat() 并没有修改数组，只是返回了一个新的数组

9.连接符join()

打印拼接数组，使用特定的字符串连接

(3) ["c", "b", "a"]
arr.join('-')
"c-b-a"

10.多维数组

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

数组 :存储数据，知道如何存，如何取

对象类型

javaScript中的所有的键都是字符串，值是任意对象

若干个键值对

var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的对象</title>
</head>
<body>

<script>

    /*对象的写法*/

    /*常用的：支持面向对象*/
    /*
    // 创建一个对象
    var o = {};
    // 绑定对象的属性
    o.username = 'jack';
    o.age = 20;

    // 绑定函数(匿名函数)到对象
    o.show = function () {
        console.log('show');
    }
    // 使用对象的属性
    console.log(o.username, o.age);
    // 调用对象的方法
    o.show();
    */


    // 创建一个对象
    // 绑定对象的属性
    // 绑定函数(匿名函数)到对象
    o = {
        username: 'jack',
        age: 20,
        show: function () {
            console.log('show')
        }
    }

    // 使用对象的属性 : o['age'] 使用key的方式来获取
    console.log(o.username, o['age']);
    // 调用对象的方法
    o.show();

    // o.username, o['age'] 用于对象属性的赋值
    o.username = 'tom';
    o['age'] = 30;
    console.log(o.username, o['age']);
    
      //动态删除对象属性，delete
    console.log(delete o.age); //true
    console.log(o);

    //动态添加属性,直接给新的属性添加值
    console.log(o.ha = "haha"); //haha
    console.log(o);

    //判断一个属性值(key)是否在对象中
    console.log('ha' in o); //true
    console.log('toString' in o); //true,继承

    //判断一个属性(key)是否是这个对象自身拥有的hasOwnProperty()
    console.log(o.hasOwnProperty('toString')); //false
    console.log(o.hasOwnProperty('show')); //true
</script>
</body>
</html>

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历对象</title>
</head>
<body>


<script>

    var arr = [15, 23, 64, 56, 6, 76];

    // for (var i = 0; i < arr.length; i++) {
    //     console.log(arr[i]);
    // }
	
    // for  in
    // key 就是数组的 索引
    // for (var key in arr) {
    //     console.log(arr[key]); // 通过key属性获取其对应value
    // }
    
    //for  of  value是数组的值，
    for(var value of arr){
        console.log(value);
    }
    
    //function的参数可以写一个
   // arr.forEach(function (value, index, array) {
    //    console.log(value); //值
    //    console.log(index); //索引
    //    console.log(array); //数组
   // })



    var o = {
        username: 'jack',
        age: 20
    }

    // 获取对象中所有的属性和值
    for (var field in o) {
        console.log(field, o[field]);
    }
</script>
</body>
</html>

类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类型转换</title>
</head>
<body>

<!--
类型转换
String 类型的转换
boolean 类型的转换
number 类型的转换

类型的转换都会去调用对应类型的 函数
-->

<script>
    // 其他类型 转 String 类型  把对应类型的字面量 转成一个字符串

    /*
    var num = 100.89;
    var str = String(num);
    console.log(str, typeof str)

    var flag = false;
    str = String(flag);
    console.log(str, typeof str)
    */

    // 其他类型向 boolean 的转换

    // 非 0 都是true
    console.log(Boolean(1)); // true
    console.log(Boolean(10)); // true
    console.log(Boolean(0)); // false

    // 只要有内容都是 true
    console.log(Boolean("")); // false
    console.log(Boolean(" ")); // true

    // 非空为 true
    console.log(Boolean({})); // true
    console.log(Boolean([])); // true
    console.log(Boolean(function () {
    })); //true
    console.log(Boolean(null)); // false

    console.log(Boolean(Number.NaN));// false


    // 其他类型转 number
    console.log(Number("100"));
    console.log(Number("100.23"));
    console.log(Number("100A")); // NaN  = > 非数值

    console.log(Number(true));// 1
    console.log(Number(false));// 0

    console.log(Number({}));// NaN

    // NaN 和 任意数值进行运算后得到的 还是 NaN
    console.log(Number.NaN + 1); // NaN

    console.log(Number(null)); // 0
    console.log(Number(undefined)); // NaN

    // 转数值的API
    // 从第一个字符开始搜索一直到非数值
    console.log(parseInt("100A")); // 100
    console.log(parseInt("A100")); // NaN
    console.log(parseFloat("100.23A")); // 100.23

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

Map 和 Set

ES6的新特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        ES6 Map
        学生的姓名，学生的成绩
     */
    'use strict'

    var map = new Map([['tom',100],['jack',90],['bob',80]]);
    var score = map.get('tom'); //通过key获取value值
    console.log(scare);

    map.set('make',70); //新增或修改
    console.log(map)


    //Set无需不重复的集合
    var set = new Set([1,2,4,1,1]);// 会去重
    set.add(3); //添加
    console.log(set)
    set.delete(1); //删除
    console.log(set)
    console.log(set.has(2));//是否包含这个元素
    
</script>
</body>
</html>

iterator

es6 新特性

遍历map

var map = new Map([['tom',100],['jack',90],['bob',80]]);
for(let value of map){
    console.log(value)
}

遍历set

var set = new Set([1,2,4,1,1]);// 会去重   
for(let value of set){
    console.log(value);
}

== 和 ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>== 和 ===</title>
</head>
<body>
<!--
== ： 值比较 （字面都转成 number 类型）
=== ： 恒等于 先判断类型 在比较值
-->
<script>

    console.log(1 == '1'); // true
    console.log('2' == true); // false

    console.log(1 === '1'); // false 推荐使用这个

    // 一些特定的写法中会自动帮我我们转型
    // 判断一个字符串是否是空或者空字符串
    var str = null;
    // if (str !== null && str.length > 0) {
    //     console.log("非空")
    // } else {
    //     console.log("空")
    // }

    // 简写成  不推荐 解读性不强
    if (str) {
        console.log("非空")
    } else {
        console.log("空")
    }

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

函数

函数声明

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

<script>
    /*函数*/
    /*写法1 */

    // 函数的声明
    function fn1() {
        console.log('hello');
    }

    // 函数的调用
    fn1();

    // 有返回值的函数
    function fn2() {
        return 100; //代表函数结束，返回结果
    }

    var res = fn2();
    console.log(res);

    // 有参数的函数
    function fn3(a, b) {
        console.log(a, b);
    }

    fn3(100, 200);

    /*写法2*/
	//function(){} 这是一个匿名函数
    var fn4 = function (a, b) {
        return a + b;
    }

    var res = fn4(20, 30);
    console.log(res);

    /*写法3 了解即可 最底层的写法*/
    var fn5 = new Function("a", "b", "return a+b;")
    console.log(fn5(10, 20))

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

function abs(x) {
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
//执行到return代表函数结束，返回结果
var x =  abs(-5); 
console.log(x)
//如果没有执行到return，函数执行完也会返回结果
var y = abs("123")
console.log(y)

参数问题：javascript可以传任意的参数，也可以不传参数

参数进来是否存在的问题？

假设不存在参数，如何规避

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

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

argument

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

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

function abs(x) {

    console.log("x=>",x);

    for (let i = 0; i <arguments.length ; i++) {
        console.log(arguments[i])
    }

    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
	abs(45,453,34,23,23,23,23,54);

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

rest

以前

function f(a,b) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    if(arguments.length>2){
        for (let i = 2; i <arguments.length ; i++) {
			//....
        }
    }
}

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

function f(a,b,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
	//打印参数之外的参数
    console.log(rest);
}

rest参数只能写在最后面，必须用 … 标识

作用域

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

<script>
    /*全局变量： 定义在函数外的变量*/
    var a = 100;
    alert(a);
    alert(window.a);//默认所有的全局变量，都会自动绑定在window对象下

    function fn() {
        console.log(a);
    }

    fn();

    /*局部变量：定义在函数中，在函数中都可以访问*/

    function fn1() {
        var b = 200;
        console.log(b);
        if (true) {
            var c = 300;
        }
        // 在 if 代码块中声明但是也在函数中,所以可以访问,但是在java中不能访问
        // java的作用域叫做 【块级作用域】
        console.log(c);
    }

    // console.log(b); // b 在函数中声明的 所以不能在函数外访问
    fn1();

    /*
    JavaScript 变量生命周期
    JavaScript 变量生命周期在它声明时初始化。
    局部变量在函数执行完毕后销毁。
    全局变量在页面关闭后销毁。
     */
</script>

<script>
    console.log(a);
</script>

</body>
</html>

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

function f1() {
    var x= 1;
    function f() {
        var x = 'A';
        console.log('inner'+x); //innerA
    }
    f();

    console.log('outer'+x);//inner1

}
f1();

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

提升变量的作用域

// 将一个局部变量提升为全局变量
function fn() {
    //var x = 100; // 局部变量

    x = 100; // 变量提升，在当前方法执行后提升  不推荐使用 了解即可
}

// fn();
console.log(x);


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

结果：x-undefined

说明：JS执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function f1() {
    var y;

    var x = "x-" + y;
    console.log(x);
    y = 'y';
}
f1();

这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部，

不要乱放，便于代码维护

function f() {
    var x=1,
        y='a',
        z,i,b; //undefine

    //之后随意用
}

全局对象window

 var a = 100;
    alert(a);
    alert(window.a);//默认所有的全局变量，都会自动绑定在window对象下

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

var x = "xxx";

window.alert(x);
var old_alert = window.alert;

//old_alert(x);

window.alert = function () {

}

//发现alert() 失效了
window.alert(123);

window.alert = old_alert;

//恢复
window.alert(456);

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

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变
量，冲突->如果能够减少冲突?

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

//定义全局变量
quanJu.name = "jack";
quanJu.add = function (a,b) {
    return a+b;
}

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

let&const

ES6新特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let&const</title>
</head>
<body>
<!--
const: 常量
let: 将作用域设定为块级作用域
建议使用let 定义局部作用域的变量
-->

<script>
    const NUMBER = 100; //只读变量
    // console.log(NUMBER)

    function fn() {
        if (true) {
            var x = 100;
            let y = 200;
        }
       // 在 if 代码块中声明但是也在函数中，var可以访问，let不行
        console.log(x);
       // console.log(y); ReferenceError: c is not defined
    }


    fn();
</script>

</body>
</html>

方法

定义方法

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

var person = {
    firstName: "John",
    lastName: "Doe",
    id: 5566,
    fullName: function () {
        // this = person
        return this.firstName + " " + this.lastName;
    }
};
//属性
console.log(person.id);
//方法，一定要带（）
console.log(person.fullName());

    function getFullName () {
        // this = person
        return this.firstName + " " + this.lastName;
    }

    var person1 = {
        firstName: "John",
        lastName: "Doe",
        id: 5566,
        fullName: getFullName
    };
console.log(person1.fullName()) //ok
 //通过this调，表示当前对象 this = window; 所以方法中的this = window,变量变成undefine，
 // console.log(this.getFullName());

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

apply

在JS中可以控制this的指向

 function getFullName () {
     // this = person
     return this.firstName + " " + this.lastName;
 }

 var person1 = {
     firstName: "John",
     lastName: "Doe",
     id: 5566,
     fullName: getFullName
 };
 console.log(person1.fullName());
 //参数， 指向的对象，方法的参数
 console.log(getFullName().apply(person1,[]));

内部对象

标准对象

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

Date

基本使用

var date = new Date();
console.log(date);//中国标准时间
date.getFullYear(); //年
date.getDate(); //日
date.getDay(); //星期

let long = date.getTime(); //时间戳
console.log(long);
console.log(new Date(long));

console.log(date.toLocaleDateString()); //年月日,2020/12/17
console.log(date.toLocaleString()); //年月日，时分秒 2020/12/17 上午11:17:13
date.toGMTString;

Math

//Math
let x = Math.PI;
console.log(x);
let y = -100;
console.log(Math.abs(y));//绝对值

JSON

json是什么？

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

在JavaScript一切皆为对象、任何js 支持的类型都可以用JSON来表示;

格式：

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

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

//对象转换为json字符串 {"name":"jack","age":20,"sex":"男"}
let jsonUser = JSON.stringify(user);
console.log(jsonUser);

//json字符串转换为对象,参数为json字符串
let parse = JSON.parse('{"name":"jack","age":20,"sex":"男"}');
console.log(parse)

JSON和JS对象的区别

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

面向对象编程

原型对象

javascript有些区别

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

在javaScript这个需要大家换下思维

var Student = {
    name: 'jack',
    age : 3,
    run : function(){
        console.log(this.name+" run......");
    }
}

var tom = {
    name:'tom'
}

//tom的原型是 Student
tom.__proto__ = Student;

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

//原型对象
tom.__proto__ = Bird;

//ES6之前
function Student(name) {
    this.name = name;
}

Student.prototype.hello=function () {
    alert('hello');
}

class 继承

class关键字，是在ES6引入的

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

//定义一个学生类
class Student{

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

    hello(){
        alert('hello')
    }
}
//创建对象
var student = new Student('jack');
var student1 = new Student('tom');
student.hello();
console.log(student1.name);

2.继承

class Student{

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

    hello(){
        alert('hello->'+this.name)
    }
}
//继承
class xiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade
    }

    myGrade(){
        alert("我是一个小学生->"+this.name+this.grade)
    }
}

var student = new Student('jack');
var student1 = new xiaoStudent('tom',80);
student.hello();

student1.myGrade();
student1.hello();

本质查看对象原型

在这里插入图片描述

原型链

__proto__

在这里插入图片描述

操作BOM对象(重点)

浏览器介绍

BOM(Browser Object Model) 是指浏览器对象模型

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

JavaScript 和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器中运行!

BOM :浏览器对象模型

IE 6-11
Chrome
Safari
FireFox
Opera

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
202
window.innerWidth
1536
window.outerHeight
824
window.outerWidth
1536
// 可以调整浏览器窗口试试

Navigator（不建议使用）

Navigator,封装了浏览器的信息

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

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

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

screen

代表屏幕属性

screen.width
1536
screen.height
864

location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前指向的位置
protocol: "https:"
replace: ƒ replace() //刷新网页
// 设置新的地址，在控制台中
location.assign('https://www.bilibili.com/video/BV1JJ41177di')

document

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

document.title //网页获取标题信息
"百度一下，你就知道"
document.title='haha'
"haha"

获取具体的文档树节点

<dl id="app">
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>

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

获取cookie

通过
document.cookie
获取保存在浏览器的cookie

劫持cookie原理

在其他网页中植入一段js代码，获取cookie的值

<script src="aa.js"></script>
<!--恶意人员，获取你的cookie上传到他的服务器-->

服务器端可以设置cookie：httpOnly（只读）

history （不建议使用）

history代表浏览器的历史记录

history.back() //浏览器后退
history.forward() //前进

操作DOM对象(重点)

DOM：文档对象模型

核心

浏览器网页就是一个DOM属性结构

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

要操作一个DOM节点，就必须要先获得这个DOM对象

获取DOM节点

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

    <script>
        //对应CSS选择器
    var h1 =  document.getElementsByTagName("h1");
    var p1 =  document.getElementById("p1");
    var p2 =  document.getElementsByClassName("p2");
    var father = document.getElementById("father");

    //获取父节点下的所有子类的元素
    var childers =  father.children
    father.firstChild; //第一个节点
    father.lastChild; //

    p1.nextElementSibling; //获取下一个节点元素

    </script>
</body>

这是原生代码，之后使用JQuery

更新节点

<body>
    <div id="box">123</div>
    <div id="box1">123</div>

    <script>
        var div1 = document.getElementById("box");
        var div2 = document.getElementById("box1");

        //操作文本
        div1.innerText='123456'; //修改文本内容
        div2.innerHTML='<h1>123456</h1>'; //可以解析HTML文本标签

        //操作CSS
        //修改CSS样式,属性使用字符串
        div1.style.color = 'red'; 
        div1.style.fontSize = '20px';
        div1.style.padding = '2em';
    </script>
</body>

删除节点

删除节点步骤，先获取父节点，在通过父节点删除自己

<body>
    <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>

    <script>
        var p1 =  document.getElementById("p1");
        var father =  p1.parentElement //获取父类元素
        father.removeChild(p1); //删除指定字节
        
        //删除是一个动态的过程
        father.removeChild(father.children[0]);
        father.removeChild(father.children[1]);
        father.removeChild(father.children[2]); //会出现找不到节点
    </script>
</body>

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

插入节点

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

追加

<body>
    <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); //把js追加到list中
</script>
</body>

效果：

在这里插入图片描述

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

//通过JS 创建一个新的节点
var newP = document.createElement('p'); //创建一个p标签
newP.id = 'newId'; //设置p标签id  
// newP.setAttribute('id','newId'); 

newP.innerText = "Hello World";
list.appendChild(newP);
//设置属性
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');

通过js设置样式

//第0个才是body
var mybody = document.getElementsByTagName('body')[0];
//设置样式
mybody.style.backgroundColor = 'red';
mybody.setAttribute('style','font-size:30px')

//通过创建style 设置样式
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color : red;}';
document.getElementsByTagName('head')[0].appendChild(myStyle);

在这里插入图片描述

insertBefore

var list = document. getElementById('list');
var js = document. getElementById('js');
var ee = document. getElementById('ee');

// 包含目标节点的节点.insertBefore(newNode,targetNode);
//把新节点插入目标节点前面
list.insertBefore(js,ee);

操作表单

表单是什么 form DOM树

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

表单的目的：提交信息

获得要提交的信息

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

        <p>
            <!--程序读取的是 value 的值-->
        <span>性别：</span>
        <input type="radio" name=sex value="man" id='boy'>男
        <input type="radio" name=sex value="woman" id='girl'>女
        </p>
    </form>

    <script>
        var input_text = document.getElementById('username');
        var boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');

        input_text.value; //获取输入框的值

        //修改文本框的值
        input_text.value = '1234';

        //对于单选框，多选框，boy_radio.value只能取到当前的值

        //查看返回的结果是否为true，如果为true，则被选中
        boy_radio.checked;
        girl_radio.checked = true //赋值
    </script>
</body>

提交表单，MD5加密

<body>

<!--表单绑定提交事件
onsubmit = 绑定一个提交检测的函数 ，true  false
将这个结果返回给表单，使用onsubmit 接收
οnsubmit="return login()"
-->
<form action="https://www.baidu.com/" method="POST" onsubmit="return login()">
    <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"> -->
    <!-- 绑定事件 onclick 被点击 -->
    <button type="submit" onclick="login()">提交</button>
</form>

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

        //MD5算法,加密
        md5pwd.value = md5(password.value);
        //可以校验表单内容 true 通过提交，false 阻止提交
        return true;
     
    }
</script>     
</body>

jQuery

jQuery参考文档： https://jquery.cuishifeng.cn/index.html

JavaScript

jQuery库，里面存在大量的javascrip函数

引入jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/jquery-3.4.1.js"></script>
</head>
<body>
    <a href="" id="text-jquery">点击</a>
    
<!-- 公式：$(selector).action() 
 $(选择器).事件(function(){})
-->
    
    <script>
        document.getElementById('id');

        //选择器就是CSS的选择器
        $('#text-jquery').click(function(){
            alert('helllo jquery');
        })

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

选择器

参考文档


$('#id').click();//id选择器
$('div').click();//元素选择器
$('.class').click();//类选择器

事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery-3.4.1.js"></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

节点文本操作

<ul id="text-ul">
    <li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>

<script>
    // document.getElementById();

    $('#text-ul li[name=python]').text(); //获取值
//   $('#text-ul li[name=python]').text('12345'); //设置值

$('#text-ul').html();
//   $('#text-ul').html('<strong>123<strong>');
</script>

CSS操作

  $("#text-ul li[name=python]").css({ "color": "#ff0011", "background": "blue" });

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

$('.js').show();//显示
$('.js').hide();//隐藏

window

$(window).width() //宽度
$(window).height() //长度
 $('.js').toggle();

小技巧

1.巩固JS (看jQuery源码，看游戏源码)

2.巩固HTML，CSS (扒网站，全部down下来，然后对应修改看效果)

Layer 弹窗组件

Element-ui