javascript

JavaScript

知识点补充

前端三要素

名称	解释
HTML（结构）	超文本标记语言，决定网页的结构和内容。
CSS（表现）	层叠样式，设定网页的表现样式。
JavaScript（行为）	是一种弱类型脚本语言，其源代码不需要经过编译，而是由 浏览器解释运行，用于控制网页的行为。

---

什么是JavaScript?

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为[ECMAScript 6](https://baike.baidu.com/item/ECMAScript 6/22641264?fromModule=lemma_inlink) 或者ES2015。

---

JavaScript框架

名称	内容
Angular	特点：将后台的MVC模式搬到了前端并增加了模块化开发的理念。 缺点：版本迭代不合理
React	特点：提出了新概念(虚拟DOM)。用于减少真实DOM操作，内存中模拟DOM操作，有效的提高了前端渲染效率。 缺点：使用复杂，需要额外学习一门（JSX）语言。
Vue	一款渐进式JavaScript框架，所谓的渐进式就是逐步实现新特性，如：实现模块化开发、路由、状态管理等，融合了Angular（模块化）和React（虚拟DOM）的特点。
Axios	前端通信框架，因为Vue的边界很明确，是为了处理DOM，所以不具备通信能力，使用Axios封装更容易，当然也可以使用jQuery提供的AJAX通信功能。

jQuery

是一个JS库，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能，在前端眼里它仅仅是为了兼容IE6、7、8.

JS快速入门

引入JS的方式

1、内部标签

<script>
	//.....
</script>

2、外部引用

//abs.js

//test.html
<script src="./abs/js"></script>

3、数据类型

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

数值

内容	解释
123	整数123
123.1	浮点数123.1
1.123e3	科学计数法
-99	负数
NaN	not a number
Infinity	表示无限大

console.log((1/3) === (1- 2/3));//--->false
//所以尽量避免使用浮点数进行运算，会存在精度问题。

判断两个浮点数是否相等可以使用如下的方法：

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

字符串

使用单引号或是双引号，如：‘abc’ 、“abc”

布尔值

true、false

逻辑运算符

逻辑运算符	用法
&&	两个都为真，结果为真
||	一个为真，结果就为真
！	真即假，假即真

比较运算符

比较运算符	用法
=	赋值，将右边的值赋给左边变量。
==	等于，和java不一样的是，当比较的两个值类型不一样， 值一样的时候结果会判断为true
===	绝对等于,只有在类型一样，值一样的情况下才会判定为true。

须知：

NaN === NaN：它的判定结果为false，这个与所有的数值都不想等，包括自己。只能通过isNaN(NaN)来判断这个值是否是NaN。

数组

1. java中数组表示一些列类型相同的对象，但在JavaScript中可以实现如下的数组
   var arr = [1, 2, 3, ‘hello’, null, true];
2. 在浏览器console使用console.log([下标进行输出])，但JavaScript没有下表越界的说法，是undefined的提示
3. JS也有对象类型的数组，如：new Array(1, 2, 3, ‘hello’, null, true);但为了可读性，一般都会使用上面的方法定义数组。

对象

对象是大括号定义，数组定义用中括号，其中定义的数组中属性之间使用逗号隔开。

var person = {
  name:"louis",
  age:3,
  tags:['python','java','web','...']
}

取对象中的值：

person.name
>"louis"
person.age
>3

严格检查模式

当我们不使用严格检查模式的时候，我们在定义变量的时候不写变量类型也是合法的,并且还是一个全局变量。

<script>
    i = 10;
</script>

为了预防JavaScript中的随意性导致产生的一些问题，我们可以使用严格检查模式’use strict’。

  <script>
    //严格检查模式、'use strict'，预防JavaScript的随意性导致产生的一些问题
    'use strict';
    let i = 1;
    //ES6中，局部变量使用let定义

  </script>

var、let和const之间的区别

关键字	作用域
var	无论是在全局作用域或是局部作用域，用var关键字定义变量，都可以进行重新定义或赋值操作.
let	在全局作用域下定义赋值或重复赋值，或者是在局部作用于下定义赋值或赋值，都是可行的，但是，不能在同一定义域下重复赋值。
const	论在全局作用域下还是局部作用域下，都可以声明并赋值一个常量，但是常量是不可被再次定义或赋值的，即便是在全局作用域下声明赋值一个常量，在局部作用域下修改其值，虽然代码提示不会报错，但是也是不可行的。

数据类型详细说明

1、字符串

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

特殊文字	说明
\	表示转义
\n	表示换行
\t	表示回车
\u####	Unicode字符
\x41—>A	ASII字符

多行字符串编写

使用`（Tab）上面字符包裹。

var name = `
你好
louis
好
`

模板字符串

let name = "Louis";
//模板字符串
let msg = `你好， ${name}`;

字符串长度

let student = "khan";
console.log(student.length);

字符串可变性(不可变)

操作字符串相关方法

console.log(student.toUpperCase());//注意这里是方法，不是属性。
console.log(student.toLowerCase());

console.log(student.indexOf("t"));//获取特定字符串的下标

console.log(student.substring(begin, end));//获取下表之间的字符串，取前不去后
console.log(student.substring(1));// 表示从下标1到左后一个下标的字符串

2、数组

Array可以包含任意的数据类型，通过下标取值和赋值

数组方法

长度

arr.length

注意：

加入给arr.length赋值，数组大小就会发生变化，如果赋值小于元素的长度，数组中的元素就会丢失。

下标索引

indexof();
//通过元素获得下标索引，类型不同值相同，他们的下表是不一样的

切片

slice();
//截取Array的一部分，返回一个新数组，类似于java中的subString
arr.slice(1,3);//截取1-3的数据，包含1，不包含3

pop 、push

//push:压入尾部
arr.push("1");
6
arr
(6) [1, 2, 3, 4, 5, '1']
//pop：弹出尾部的一个元素

shift 、 unshift

unshift():压入到头部
shift()：弹出头部

排序

//sort();
(3) ['b', 'c', 'a']
arr.sort();
(3) ['a', 'b', 'c']

元素反转

//reverse()
(3) ['a', 'b', 'c']
arr.reverse();
(3) ['c', 'b', 'a']

元素拼接

//concat()
arr.concat(['abc']);
(4) ['c', 'b', 'a', 'abc']

注意：

使用concat拼接的时候，并不会改变原来的数组，只是会返回一个新的数组。

连接

//join():打印拼接数组，使用特定的字符串拼接。
arr = ['c', 'b', 'a'];
arr.join("-");
'c-b-a'

多维数组

arr = [[1,2], [3,4], ['...']];
(3) [Array(2), Array(2), Array(1)]
arr[1][1];
4

填充

arr.fill(1);
(3) [1, 1, 1]

对象

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

定义对象

若干个键值对。

var 对象名 = {
	//属性名:属性值，
	//属性名:属性值，
	...
}

例如

//定义了一个student对象，包含四个属性
  <script>
    'use strict';
    var student = {
      name:"khan",
      age:3,
      email:'3415877883@qqq.com',
      score:0
    }

  </script>
    
student.name
'khan'

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

---

对象赋值

student.name = 'louis'
'louis'
student.name;
'louis'

---

使用一个不存在的对象属性，不会报错！只会提示undefined.

student.bucunzai
undefine

---

通过delete动态的删减属性

student;
{name: 'louis', age: 3, email: '3415877883@qqq.com', score: 0}
delete student.name;
true
student;
{age: 3, email: '3415877883@qqq.com', score: 0}

---

动态的添加

直接给新的属性添加值即可。

student
{age: 3, email: '3415877883@qqq.com', score: 0}
student.name = '啊吧啊吧';
'啊吧啊吧'
student;
{age: 3, email: '3415877883@qqq.com', score: 0, name: '啊吧啊吧'}

---

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

可以使用xxx in xxx!

student;
{age: 3, email: '3415877883@qqq.com', score: 0, name: '啊吧啊吧'}
'age' in student;
true
//继承
'toString' in student;
true

---

判断一个属性是否是自身拥有的

使用hasOwnProperty()。

student.hasOwnProperty('toString');
false

student.hasOwnProperty('age');
true

流程控制

if判断

'use strict';
    var age = 3;
    if(age > 3){
      alert("haha");
    }else if(age > 0 && age < 3){
      alert("kuwa~");
    }else{
      alert("kuwa");
    }

while & do…while循环

要避免程序死循环。

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

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

for循环

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

forEach循环

var age = [12, 2, 12, 4, 34, 15, 31, 45, 21, 20];
age.forEach(function (value){
    console.log(value);
});

for…in

var age = [12, 2, 12, 4, 34, 15, 31, 45, 21, 20];
//函数
/*
* for(type index in elements)
*
* */
for(var num in age){
    console.log(age[num]);
}

for…of

使用for…of可以直接输出元素，但他是ES6才有的

for(var num of age){
    console.log(num);
}

Map和Set(ES6的新特性)

Map

'use strict';
// var name = ["tom", "jack", "haha"];
// var scpre = [100, 90, 80, 0];
var map = new Map([['tom', 100], ['haha', 100], ['jack', 80]]);
var name = map.get('tom');//通过key获value
map.set('louis', 1000);//添加元素
map.delete('tom');//删除
console.log(name);

可以使用for...of来遍历map
var map = new Map([['tom', 100], ['haha', 100], ['jack', 80]]);
for(var x of map){
    console.log(x);
}

Set

不需要重复元素的集合。

'use strict';
var set = new Set([3, 1, 1, 1, 1, 2]);
console.log(set);
//Set(3){3, 1, 2}
set.add(6);//添加
set.delete(3);//删除
console.log(set.has(3));//是否包含某个元素

同样的也可以使用for...of遍历set
var set = new Set([3, 1, 1, 1, 1, 2]);
for(var y of set){
    console.log(y);
}

函数

方法：对象（属性，方法），将函数放到对象中，就变成方法。

定义函数

定义绝对值函数。

定义方式一

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(x){...}这是一个匿函数，但是可以把结果赋值给abs,通过abs就可以调用函数。
//需要在浏览器console运行，调用函数
abs(10); //10
abs(-10); //10

参数问题：

JavaScript可以传任意个参数，也可以不传递参数，针对于参数是否存在的问题，我们可以使用手动定义异常的方式来规避。

'use strict';
var abs = function(x){
  //手动抛出异常
  if(typeof x!== "number"){
    throw 'NOT A UMBER!';
  }
  if(x >= 0){
    return x;
  }else{
    return -x;
  }
}

argument

argument是一个JS免费赠送的关键字,表传递进来的所有的参数是一个数组。

'use strict';
var abs = function(x){
  //手动抛出异常
  if(typeof x!== "number"){
    throw 'NOT A UMBER!';
  }
  for(var i = 0; i<arguments.length; i++){
    console.log(arguments[i]);
  }
  if(x >= 0){
    return x;
  }else{
    return -x;
  }
}

argument包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数，可以使用rest。

rest函数

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

判断多余参数

原来

if(argument.length > 2){
	for(var i = 2; i<argument.length; i++){

	}
}

使用rest

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


//结果
aaa(1, 123, 3, 4, 5);
a=>1
b=>123
(3) [3, 4, 5]

rest是ES6引入的新特性，获取除了已经定义的参数之外的所有参数，rest参数只能写在最后面， 必须使用…标识。

---

变量的作用域

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

 <script>
    'use strict';
    function louis(){
      var x = 1;
      x = x + 1;
    }
    x += 2;//Uncaught ReferenceError: x is not defined
  </script>

如果两个函数使用了相同的变量名，只要在函数内部，就不会冲突。内部函数可以访问外不函数的成员，反之则不行。
假设内部函数和外部函数的变量重名。

'use strict';
function outer(){
  var x = 1;
  function inner(){
    var x = 'a';
    console.log('inner' + x);
  }
  console.log('outer' + x);
  inner();
}
outer();

---

假设在JavaScript中，函数查找变量哦那个自身函数开始，由’内’向’外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

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

//结果：xundefined
//说明：Js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。

相当于以下的写法

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

这个是在JavaScript建立之初就存在的特性，所以所有的变量定义都放在函数头部，便于代码维护。

如下：

function test(){
  var x = 1, y =x + 1, z, i, a;//在不使用的时候，它只是undefined
  
  //之后随意使用
}

全局变量

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

全局对象window

'use strict';
var x = 1;
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
alert()函数本身也是一个window的变量
var x = 1;
var old_alert = window.alert;
/* old_alert(x);*/
window.alert = function(){

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

//恢复
window.alert = old_alert;
window.alert(345);

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

---

全局作用域规范

由于，所有的全局变量都会绑定到window上，如果不同的JS文件使用了相同的全局变量，就会出现冲突。

减少冲突的方法

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

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

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

局部作用域let

function test(){
  for (var i = 0; i < 100; i++) {
    console.log(i);
  }
  console.log(i + 1);//最终输出101，i出了for的作用域还可以使用
}
test();

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

function test(){
    for (let i = 0; i < 100; i++) {
      console.log(i);
    }
    console.log(i + 1);//最终输出101，i出了for的作用域还可以使用
}
test();

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

常量const

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

var PI = 3.14;
console.log(PI);//3.14
PI = 3;//可以改变PI的值
console.log(PI);//3

在ES6引入了常量关键字const。

onst PI = 3.14;//只读变量
console.log(PI);
PI = "123";//Attempt to assign to const or readonly variable

方法

定义方法

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

var louis = {
  name:"khan",
  birthday:2023,
  //方法
  age: function(){
    //今年-出生的年月
    var now = new Date().getFullYear();
    return now - this.birthday;//this指向自己的属性
  }
}

//属性
louis.name;
//方法，一定要带()
louis.age();

this

function setAge(){

  //今年-出生的年月
  var now = new Date().getFullYear();
  return now - this.birthday;//this指向自己的属性
}
var louis = {
  name:"khan",
  birthday:2023,
  //方法
  age: setAge
}

/* louis.age(); 可以
setAge()   ==>Uncaught TypeError: Cannot read properties of undefined (reading 'birthday')
this需要指向使用它的人，现在是window在使用，没有birthday
0*/

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

apply

在JS中可以控制this的指向。

function setAge(){

  //今年-出生的年月
  var now = new Date().getFullYear();
  return now - this.birthday;//this指向自己的属性
}
var louis = {
  name:"khan",
  birthday:2023,
  //方法
  age: setAge
};
setAge.apply(louis, []);//this，指向了Louis对象，参数为空

typeof

使用typeof来检查变量的类型。

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

Date

基本使用

 <script>
    var date = new Date();
    console.log(date);//Wed Apr 12 2023 11:28:30 GMT+0800 (中国标准时间)
    date.getFullYear();//年
    date.getMonth();//月  0~11月
    date.getDate();//日
    date.getDay();//星期几
    date.getHours();//时
    date.getMinutes();//分
    date.getSeconds();//秒

    date.getTime();//时间戳，全世界统一，从1970 1.1 0：00:00 毫秒数

    /*console.log(new Date(1681270555287))//通过时间戳转化为时间
    VM202:1 Wed Apr 12 2023 11:35:55 GMT+0800 (中国标准时间)*/

  </script>

转换

date.getTime()
1681270628003
now = new Date(1681270628003)
Wed Apr 12 2023 11:37:08 GMT+0800 (中国标准时间)
now.toLocaleString();//注意：调用的是一个方法，不是一个属性
'2023/4/12 11:37:08'
now.toGMTString()
'Wed, 12 Apr 2023 03:37:08 GMT'

JSON

什么是json?

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

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

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

JSON字符串和JS对象的转换

var use = {
  name:'louis',
  age:3,
  sex:'男'
}

//对象转化为JSON字符串
var json_use = JSON.stringify(use);
//json字符串解析转化为对象,参数是一个json字符串，字符串里面的引号是岔开的
var parse = JSON.parse('{"name":"louis", "age":3, "sex":"男"}');

JSON和JS对象的区别

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

面向对象编程

原型

var louis = {
      name:"khan",
      age:3,
      run:function(){
        console.log(this.name + " run....");
      }
    }
    var use = {
      name:"louis",

    }

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

    //如果use想要继承louis的一些东西，
    //原来：使用原型，use的原型指向了louis,简单理解为父类
    use.__proto__ = louis;//use.run()    louis run....

class继承

class关键字是在ES6引入的。

//定义一个类：属性，方法
function Student(name){
      this.name = name;
    }

给Student新增一个方法

//法一：直接在里面添加或者拿到Student的原型添加
Student.prototype.hello = function(){
  alert("Hello");
}

//法二：ES6之后,直接定义一个类
class Student{
  constructor(name) {
    this.name = name;
  }

    //添加方法
    hello(){
      alert("hello");
    }
}
var louis = new Student("louis");
var khan = new Student("Khan");
louis.hello();

继承

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

    //添加方法
    hello(){
      alert("hello");
    }
}
var louis = new Student("louis");
var khan = new Student("Khan");
louis.hello();

//继承
class Junior extends Student{
  constructor(name, grade){
    super(name);
    this.grade = grade;
  }
  myGrade(){
    alert(this.name +" 是小学生")
  }
}

var junior01 = new Junior("阿花", "二年级");

本质：查看对象原型。

原型链

___proto__

关于proto

操作BOM对象(important)

BOM:浏览器对象模型。

浏览器介绍

JavaScript和浏览器的关系
JavaScript的诞生就是为了能够让他在浏览器中运行！
IE 6~11
Chrome
Safari
Firefox
Opera

三方浏览器
QQ浏览器
360浏览器

window

window代表浏览器窗口。

window.innerHeight
170
window.innerWidth
1280
window.outerHeight
680
window.outerWidth
1280

---

navigator

封装了浏览器的信息。

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

大多数时候我们不会使用navigator对象，因为会被认为修改！不建议使用这些属性来判断和编写代码。

screen

代表屏幕的尺寸。

screen.width
1280px
screen.height
720px

location

location代表当前页面的URL信息。

host: "ntp.msn.cn"
href: "https://ntp.msn.cn/edge/ntp?locale=zh-CN&title=%E6%96%B0%E5%BB%BA%E6%A0%87%E7%AD%BE%E9%A1%B5&dsp=0&sp=%E7%99%BE%E5%BA%A6"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign("https://blog.csdn.net/xry12354?type=blog")

document

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

document.title = "louis" 
"louis" 

• 获取具体的文档树节点。

  <dl id = "app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
  </dl>
  <script>
    var dl = document.getElementById('app')
  </script>
  

• 获取cookie

  document.cookie
  'Hm_lvt_d7c7037093938390bc160fc28becc542=1681210586,1681213233,1681262563,1681285438; Hm_lpvt_d7c7037093938390bc160fc28becc542=1681285539'
  

  劫持cookie原理

  <script src = "aa.js"></script>
  <!--恶意人员：获取cookie上传到他的服务器-->
  
  //服务器端可以设置cookie:httpOnly,来防止劫持
  

---

history

代表浏览的历史记录。

history.back();//返回
history.forward();//后退

操作DOM对象(重点)

DOM:文档对象模型。

核心

1. 浏览器网页就是一个DOM树形结构
   • 更新：更新DOM节点
   • 遍历DOM节点：得到DOM的节点
   • 删除：删除一个DOM节点
   • 添加：添加一个新的节点
2. 要操作一个DOM节点，就必须先获得一个DOM节点

获得DOM节点

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


<script>
  var h1 = document.getElementsByTagName('h1');//标签选择器
  var p1 = document.getElementById('p1');//id选择器
  var p2 = document.getElementsByClassName('p2');//class选择器
  var father = document.getElementById('father');
  var childrens = father.children;//获取父节点下的所有子节点
 /* father.firstChild;
  father.lastChild;*/
</script>
</body>

以上是原生代码，之后会尽量使用jQury()。

更新DOM节点

<body>
<div id = "content">
</div>

<script>
  var content = document.getElementById('content');
</script>
</body>

//操作文本
content.innerText = '文本';//修改文本的值
content.innerHTML = '<strong>123</strong>'//可以解析HTML文本标签
'<strong>123</strong>'
//操作CSS
content.style.color = 'pink';
'pink'
content.style.padding = '20px';
'20px'
content.style.fontSize = '20px';// _ 转  驼峰命名
'20px'

删除DOM节点

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

<div id = 'father'>
  <h1>标题1</h1>
  <p id = "p1">p1</p>
  <p class = "p2">p2</p>
</div>


<script>
//方式一：
  var self = document.getElementById('p1');//id选择器
  var father = self.parentElement;
  father.removeChild(self);

//方式二：
  father.removeChild(father.children[0]);
  father.removeChild(father.children[0]);
</script>

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

插入DOM节点

我们获得了某个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.append(js);//追加到后面
</script>
</body>

效果

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

<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');
  //通过JS创建一个新的节点
  var newP = document.createElement('p');//创建一个p标签
  newP.id = 'newP';
  newP.innerText = "Hello World!";
  list.appendChild(newP);

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

  //获取body
  var body = document.getElementsByTagName('body');
 //var test = body.style.backgroundColor = '#02e2ff';//不生效
 
  //可以创建一个
  var myStyle = document.createElement('style');
  myStyle.setAttribute('type', 'text/css');
  myStyle.innerHTML = 'body{background-color:pink;}';//设置标签的内容
  document.getElementsByTagName('head')[0].append(myStyle);
</script>
</body>

效果

在目标节点前插入节点

<script>
   var ee = document.getElementById('ee');
   var js = document.getElementById('js');
   var list = document.getElementById('list');
   //要包含的节点.insertBefore(newNode, targetNode)
   list.insertBefore(js, ee);//在list里面的ee前面插入节点js
</script>

效果

操作表单(验证)

表单是什么？form DOM树

文本框   text
下拉框   <select><option>
单选框   radio
多选框   checkbox
隐藏域   hidden
密码框   password
...

表单的目的：提交信息。

获得表单的信息

<body>
<form action = "post">
  <span>用户名：</span><input type = "text" id = "username"/>
<!--  多选框的值就是定一个好的value值-->
  <p>
    <span>性别：</span>
    <input type = "radio" name = "khan" value = "man" id="boy" checked/>男
    <input type = "radio" name = "khan" value = "women" 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;
  a = boy_radio.value;
  b = girl_radio.value;
  console.log(a, b);
  input_text.value = 'louis';

  //对于单选框、多选框等固定的值，boy_radio.value只能取到当前的值
  boy_radio.checked;//查看返回的结果是否为true，如果为true，则被选中

  //设置选框的值
  girl_radio.checked = true;//赋值
  //true
  boy_radio.checked = true
  //true
</script>
</body>

jQuery

javascript和jQuery库

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

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--CDN引入-->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--导入-->
    <script src="./lib/jquery-3.6.4.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>;

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

</body>
</html>

选择器

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

    //   jquery，css中的选择我器全部都能用
    //标签选择器
    $('p').click();
    //id选择器
    $('#id').click();
    //类选择器
    $('.class').click();
</script>

文档工具站：https://jquery.cuishifeng.cn/

---

事件

鼠标事件，键盘事件，其它事件。

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
  #divMove{
    width: 500px;
    height: 500px;
    border: 2px solid red;
  }
</style>
<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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul id="test-ul">
  <li>JavaScript</li>
  <li id="java">Java</li>
  <li name="python">Python</li>
</ul>
<script>
  //原来
  // document.getElementById();
  //jquery
  $('#test-ul li[name=python]').text()
  $('#test-ul').html()
</script>
</body>
</html>

节点文本操作

$('#test-ul li[name=python]').text();//获得值
'Python'
$('#test-ul li[name=python]').text('learnPython');//设置值
init [li, prevObject: init(1), context: document, selector: '#test-ul li[name=python]']

$('#test-ul').html();//获得值
$('#test-ul').html('<strong></strong>');//设置值

css操作

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

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

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