0、前端三要素
HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
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

1、内部标签

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

2、外部引入
a1.js

alert(1);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--注意: script标签必须成对出现-->
<script src="a1.js"></script>
    <!--  不用显示定义type，也默认就是 javascript -->
    <script type="text/javascript">

</body>
</html>

2.2、基本语法入门

在 JavaScript 中，分号 (;) 是可选的语法元素。在大多数情况下，JavaScript 引擎会自动插入缺失的分号。但是，在某些情况下，省略分号可能会导致意外的行为，所以建议在代码中显式地使用分号。

例如，如果两个语句写在同一行而没有使用分号将它们分开，那么它们可能会被错误解析为一个语句。此外，在使用 return、throw、break 和 continue 等关键字时，如果没有使用分号将语句和关键字分开，也可能导致问题。

因此，虽然 JavaScript 中分号是可选的，但建议在代码中使用分号以提高代码的可读性和可靠性。

var score=50

if (score>60)
    alert(60)
else
    alert(-60)

2.3、数据类型

数值，文本，图形，音频，视频…
变量
var 王者荣耀 = "倔强青铜";
js不区分小数和整数，Number

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

字符串
'abc' "abc"
布尔值
true, false
逻辑运算

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

比较运算符！！！重要!

=      
==      等于（类型不一样，值一样，也会判断为true） 1 == "1"
===     绝对等于（类型一样，值一样，结果为true）   1 !== "1"

这是一个JS的缺陷，坚持不要使用==比较
须知：

NaN===NaN,（false）这是与所有的数值都不相等，包括自己
只能通过isNaN(NaN) (true) 来判断这个数是否是NaN

浮点数问题

console.log((1/3)===(1-2/3)) //false
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.00000001 //true

null和undefined

null 空
undefined 未定义

数组
java的数组必须是相同类型的对象~，JS中不需要这样！

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,2,3,4,5,'hello');

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

对象
对象是大括号，数组是中括号~~（字典）
每个属性之间使用逗号隔开，最后一个不需要添加

//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
person.tags[0]
'js'

3、数据类型

3.1、字符串

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

console.log('a\t\x41\t\u4e2d\nb');
/*
 \ '
 \n
 \t
 \u4e2d \u### Unicode字符
 \x41         ascii字符
 */

3.多行字符串编写（反引号）

//tab上面esc下面 ``
var msg1 =
  `hello
 world
 你好ya
 你好`;

console.log(msg1);

4.模板字符串（反引号）

var name1='andy';
var age1=11;
var msg1=`hello ${name1}`

console.log(msg1);

5.字符串长度

console.log(msg1.length)

6.字符串的可变性，不可变

var student = "zhangsan";
console.log(student[0]); //Z
msg1[1]=1; 不变
msg1+='11' 变
console.log(student) // ZhangSan

7.大小写转换

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

8.获取单个字符下标

console.log(msg1.indexOf('l'))
console.log(msg1.lastIndexOf('a'))

9.截取字符串 [ ) 左闭右开

console.log(student.substring(1)) ;//从第一个字符截取到最后一个 tudent
console.log(student.substring(1,3)); //[1,3) tu

3.2、数组

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

var arr=[1,2,3]
arr[0]=99
console.log(arr)

1.长度

console.log(arr.length)

注意：假如给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失,赋值过大，后面为未定义的空元素
2.indexOf,通过元素获得下标索引

arr.indexOf(2) //1

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

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

var arr=[1,2,3,4,5,6]
console.log(arr.slice(3))//3后面全部的剩余数组[4,5,6]
console.log(arr.slice(1,3))

4.push(),pop()** 尾部**

arr.push('1'); 压入到尾部
arr.pop();     弹出尾部的一个元素

5.unshift(),shift()** 头部**

arr.unshift('1'); 压入到头部
arr.shift();      弹出头部的一个元素

6.排序 sort()

var arr=[1,2,3,4,5,6]
arr[0]=99
arr.unshift(88)
arr.sort()

console.log(arr)

7.元素反转 reverse()

arr.reverse();

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"]];
// (3) [Array(2), Array(2), Array(2)]
arr[1][1]
// 4

数组：存储数据（如何存，如何取，方法都可以自己实现！）

3.3、对象

若干个键值对

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

//定义了一个person对象
var person= {
    age:1,
    name:"李敏",
}
console.log(person.name)

js中对象，{…}表示一个对象，键值对描述属性 xxxx :xxxx ,多个属性之间使用逗号隔开，最后一个属性不加逗号！
JavaScript 中的所有键都是字符串，值是任意对象！

1.对象赋值

person.name = "lyp" //person['name'] 也可以
person.name
// "lyp"

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

person.hhh
// undefined

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

delete person.name
// true
person
// {age: 6, email: "[email protected]", score: 0} name被删除了

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

person.hhh = "hahaha"
person
// {age: 6, email: "[email protected]", score: 0, hhh: "hahaha"}

5.判断属性值是否在这个对象中！ xxx in xxx!
JavaScript 中的所有键都是字符串，值是任意对象！

var person= {
    age:1,
    name:"李敏",
}
console.log('age' in person)
console.log(1 in person)
true
false

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty(),作用就是看它的方法是自己的，还是继承下来的

person.hasOwnProperty('toString')
// false
person.hasOwnProperty('age')
// true

3.4、流程控制

if判断

var age = 3;
if(age > 3) {//第一个判断
  alert("haha");
}else if(age < 5) {//第二个判断
  alert("kuwa~");
}else {//否则
  alert("kuwa~");
}

while循环，避免程序死循环

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

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

for 循环（let 的全称是 Block-scoped let declaration，局部变量）

Block-scoped: 意思是"块级作用域的"，它可以让我们在代码块中创建一个新的作用域。也就是说，let 声明的变量只能在该代码块内部使用。
let: 是关键字，在ES6中用于声明变量。
declaration: 意思是"声明"，即指定一个变量并分配存储空间。
variable: 意思是"变量"，可以理解为一种容器，用于存储和操作数据。

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

forEach循环

for…of

for…in

var age = [12,51,62,11,22,55,23,5,6,122];

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

arr=[]
for (let i = 0; i < 10; i++) {
    arr.push(i)

}
for (const arrElement of arr) {
    console.log(arrElement)
}
//for(var index in object){}
for (const arrayKey in arr) {
    console.log(arrayKey)
}
arr.forEach(function (value) {
    console.log(value)
})

3.5、Map和Set

ES6的新特性~

Map: 字典

//ES6 Map
//学生的成绩，学生的名字
// var names = ["tom","jerry",'andy'];
// var scores = [100,90,80];

let map = new Map([['tom',100],['jerry',90],['andy',80]]);
let name = map.get('tom');//通过key获得value
console.log(name); //100
map.set('admin',123456);//新增或修改
map.delete("tom");//删除

Set: 无序不重复的集合

let set = new Set([3,1,1,1,1]);//Set可以去重
set; //[3,1]
set.add(2);
set.delete(1);//删除元素
console.log(set.has(3));//是否包含某个元素

3.6、iterator

es6新特性 for…of

遍历数组

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

遍历Map

let map = new Map([['tom',100],['jerry',90],['andy',80]]);
for(let x of map ){
  console.log(x);
}
[ 'tom', 100 ]
[ 'jerry', 90 ]
[ 'andy', 80 ]

遍历Set

let set = new Set([5,6,7]);
for(let x of set){
  console.log(x);
}

4、函数及面向对象

4.1、函数定义

定义方式一
绝对值函数

var  a=-99
function abs(x) {
    if (x<0)x=-x;
    return x
}
console.log(abs(a))

一但执行到 return 代表函数结束，返回结果！
如果没有执行return ，函数执行也会返回结果，结果就是undefined
定义方式二（名字写在前面）

a=-99
abs=function (x) {
    if (x<0)x=-x;
    return x
}
console.log(abs(a))

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

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

在JavaScript中，如果在声明变量时不使用var关键字，那么该变量将被创建为全局变量。这意味着它可以从代码的任何位置访问，并且对它所做的任何更改都将在全局范围内反映出来。

然而，通常认为在声明变量时不使用var关键字是一种不良实践，因为它可能会导致意想不到的后果。例如，如果您意外地用新值覆盖全局变量，它可能会导致代码中其他部分的意外行为。

为了避免这种情况，最好始终在JavaScript中声明变量时使用var关键字，或者如果要将变量的作用域限制在特定的块或函数中，则可以使用let和const。

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

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

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

a=-99
abs=function (x) {
    console.log(arguments)
    if (x<0)x=-x;
    return x
}
console.log(abs(a,9))
[Arguments] { '0': -99, '1': 9 }
99

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

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

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

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


abs=function (x,...ji) {
    console.log(ji)
}
console.log(abs(a,9,10))
[ 9, 10 ]

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

4.2、变量的作用域

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

function qj(){
  var x = 1;
  x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined

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

function qj(){
  var x = 1;
  x = x + 1;
}
// 互不影响
function qj2(){
  var x = 'A';
  x = x + 1;
}

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

function qj(){
  var x = 1;

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

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

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

function qj(){
  var x = 1;
  function qj2(){
    var x = 'A';
    console.log('inner'+x); //innerA
  }
  qj2();
  console.log('outer'+x); //outer1

}
qj();

假设在JavaScript 中函数查找变量从自身函数开始~，由’内’ 向 '外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域

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

全局函数

//全局变量
x = 1;

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

全局对象window

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

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

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

// 相当于重写了alert，所以失效了
window.alert = function(){

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

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

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

规范

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

//唯一全局变量
var kuangApp = {};
//定义全局变量
kuang.name = 'kuang'
kuang.add = function(){};

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

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

function ab(){
  for(var i = 0;i<100;i++){
    console.log(i);
  }
  console.log(i+1);// 101，i出了作用域，但是不报错，推荐使用let
}

function ab(){
  for(let i = 0;i<100;i++){
    console.log(i);
  }
  console.log(i);//报错
}

定义常量：const

const a=1;

4.3、定义方法

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

var ding = {
  name: "ding",
  birth: "1993",
  //方法
  age: function () {
    //今年 - 出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
  }
}
//属性
ding.name
//方法,一定要带括号
ding.age()

5、内部对象

标准对象

typeof 123 //"number"
typeof NaN //"number"
typeof [] //"object"
typeof undefined //"undefined"
typeof Math.abs //"function"

5.1、Data

基本使用

var now = new Date();//Mon Jan 16 2023 16:16:26 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth(); // 月   0~11 代表月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); // 时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime();   //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
new Date(13561565); //时间戳 --> 时间

var now=new Date()
console.log(parseInt(now.getTime()/1000))

转换

now.toLocaleString()  //本地时间

5.2、JSON

JSON 是什么
早期，所有传输都是使用xml文件

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

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

var user = {
  name: "ding",
  age: "3",
  sex: "male"
}
//对象转换为json字符串 
var jsonUser = JSON.stringify(user)
// json 字符串转换为对象 参数为json字符串
var obj = JSON.parse('{"name": "ding","age": "3","sex": "male"}');

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

var obj = {a: 'hello', b:'hellob'}; //key可以不用双引号
var json = '{"a": "hello","b":"hellob"}' //key都是双引号的字符串

5.3、Ajax

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

6、面向对象编程

原型对象

javascript、java、c#。。。面向对象，javascript有些区别！

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

在javascript这个需要大家换一下思维方式！
原型：

var user = {
  name: "ding",
  age: "3",
  run: function () {
    console.log(this.name + "run.....")
  }
};
// 原型对象
var xiaoming = {
  name: "xiaoming"
};
// 小明的原型 是user  相当于继承了user，有了它的属性和方法
xiaoming.__proto__ = user;

function Student(name) {
  this.name = name;
}
// 给student新增一个方法,要给他原型增加一个方法
Student.prototype.hello = function () {
  alert('Hello')
}

class
class关键字，是在ES6引入的

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

extends继承

function Student(name) {
  this.name = name;
}
// 给student新增一个方法,要给他原型增加一个方法
Student.prototype.hello = function () {
  alert('Hello')
}

//ES6之后====
//定义一个学生的类
class Student{
  constructor(name){
    this.name = name;
  }
  hello(){
    alert('hello')
  }
}
class XiaoStudent extends Student{
  constructor(name,grade) {
    super(name);
    this.grade = grade;
  }
  mygrade() {
    alert('我是一名小学生')
  }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

https://i.328888.xyz/2023/03/18/MngzX.png

本质：查看对象原型

原型链

**proto **:

https://i.328888.xyz/2023/03/18/MnzKA.png

7、操作BOM对象（重点）（Browser Object Model）

游览器介绍
JavaScript和游览器的关系
javascript诞生就是为了能够让他在游览器中运行
BOM：游览器对象模型

IE 6~11
Chrome
Safari
FireFox
Opera

第三方

QQ游览器
360

7.1、window(重要，浏览器窗口)

window 代表游览器窗口

window.alert(1)
window.innerHeight
window.innerwidth
window.outerHeight
window.outerWidth
//大家可以调整游览器窗口

7.2、Navigator(不建议)

Navigator，封装了游览器的信息

navigator.appName
navigator.appVersioin
navigator.userAgent
navigator.platform

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

screen.width //1920px
screen.height //1080px
//代表屏幕尺寸

7.3、location(重要，URL信息)
location 代表当前页面的URL信息

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

7.4、document(内容,文档树)

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

document.title
document.title='ding'

获取具体的文档树节点

<body>
  <dl id="app">
    <dt>java</dt>
    <dd>python</dd>
    <dd>ding</dd>
  </dl>
</body>
<script>
  var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie原理

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

服务器端可以设置cookie：httpOnly （就会安全？）

7.5、history

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

8、操作DOM对象（重点）（Document Object Model）

DOM：文档对象模型
核心
游览器网页就是一个DOM树形结构！

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

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

//对应css选择器
var h1 = document.getElementsByTagName('h1'); // 通过标签
var p1 = document.getElementsById('p1'); // 通过ID
var p2 = document.getElementsByClassName('p2'); // 通过类名
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
//father.firstChild
//father.lastChild
//next,...

在网页写入随机数：
function generateRandomNumber() {
    return Math.floor(Math.random() * 100);
}

document.write(generateRandomNumber());

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

8.1、更新节点

var id1 = document.getElementById('id1')获得结点
id1.innerText='123'修改文本的值
id1.innerHTML='<trong>123</strong>'解析html标签

<!DOCTYPE html>
<html>
<head>
    <title>Standard HTML with Controls</title>
</head>
<body>
<form>
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" value="John">
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" value="[email protected]">
        </li>
        <li>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" value="password123">
        </li>
        <li>
            <label for="age">Age:</label>
            <input type="number" id="age" name="age" value="25">
        </li>
        <li>
            <label for="gender">Gender:</label>
            <select id="gender" name="gender">
                <option value="male">Male</option>
                <option value="female" selected>Female</option>
                <option value="other">Other</option>
            </select>
        </li>
        <li>
            <label for="message">Message:</label>
            <textarea id="message" name="message">Hello World!</textarea>
        </li>
        <li>
            <input type="submit" value="Submit">
        </li>
    </ul>
</form>
<script src="a2.js">

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

a2.js:
document.getElementById("name").value = "John";
document.getElementById("email").value = "[email protected]";
document.getElementById("password").value = "password123";
document.getElementById("age").value = "25";
document.getElementById("gender").selectedIndex = 1;
document.getElementById("message").innerHTML = "Hello World!";

8.2、操作css

id1.style.color='yellow'; // 属性使用字符串包裹
id1.style.fontSize='20px'; //驼峰命名问题
id1.style.padding='2em';

document.getElementById("name").style.color='red'

8.3、删除节点

<div id="father">
  <h1>标题1</h1>
  <p id="p1">p1</p>
  <p2 class="p2">p2</p2>
</div>
<script>
  var self = document.get ElementById('p1');
  var father = p1.parentElement; //获取父节点
  father.removeChild(self)

  //删除是一个动态的过程
  father.removeChild(father.children[0])
</script>

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

8.4、插入节点

我们获得了某哦个DOM节点，假设DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素，我们就不能这样做了，因为会覆盖。
追加

<p id="js">biancheng</p>
<div id="list">
  <p id="se">javascript</p>
  <p id="ee">java</p>
  <p id="py">python</p>
</div>
<script>
  var js = document.getElementById('js');
  var list = document.getElementById('list');
  list.appendChild(js); //追加到后面
</script>

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

var js = document.getElementById('js');   //已经存在的节点
var list = document.getElementById('list');
// 通过js 创建一个新的节点
var newp = document.createElement('p'); //创建一个P标签
newp.id = 'newp';
newp.innerText = 'hello,ding';
list.appendChild(newp)


<p id="js">biancheng</p>
<div id="list">
    <p id="se">javascript</p>
    <p id="ee">java</p>
    <p id="py">python</p>
</div>
<script>
    var list = document.getElementById('list');
    var lable1=document.createElement('p');
    lable1.id='lable1'
    lable1.innerText='new'
    list.appendChild(lable1); //追加到后面
</script>

// 可以创建一个Style标签,也可以js标签
var mystyle= document.createElement('style');
mystyle.setAttribute('type','text/css');
// 设置标签内容
mystyle.innerHTML = 'body{background-color: #ffeb3b}'; 
document.getElementsByTagName('head')[0].appendChild(mystyle)

var ee = document.getElementById('ee');
var py = document.getElementById('py');
var list = document.getElementById('list');
//要包含的节点，insertBefore（new，target）
list.insertBefore(py,ee);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="list">
</div>
<script>
    var list1=document.getElementById('list')
    for (let i = 0; i < 10; i++) {
        var lable1=document.createElement('p')
        lable1.innerText='new'+i
        list1.append(lable1)
    }
</script>
</body>
</html>

9、操作表单（验证）

表单是什么 form DOM树

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

表单的目的：提交信息
获得要提交的信息

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

  <!--多选框的值，就是定义好的,修改只能修改成对应的value-->
  <p>
    <span>性别：</span>
    <input type="radio" name="sex" value="boy" id="boy"> 男
    <input type="radio" name="sex" value="girl" 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 = '123'

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

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

<!--
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数
true,false
讲这个结果返回给表单，使用onsubmit接收！
-->
<form action="#" method="post" onsubmit="return aa()">
  <p>
    <span>用户名：</span><input type="text" id="username" name="username">
  </p>

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

  <input type="hidden" id="md5-password" name="password">
  <!--绑定事件 oncliek 点击-->
  <button type="submit" onclick="aa()">提交</button>
</form>

<script>
  function aa() {
    var uname = document.getElementById('username');
    var pwd = document.getElementById('input-password');
    var md5pwd = document.getElementById('md5-password');
    //console.log(uname.value);
    // MD5 算法
    //pwd.value = md5(pwd.value);
    //console.log(pwd.value)
    md5pwd.value =md5(pwd.value)
    //可以检测判断表单内容，TRUE就是提交，false阻止提交
    return true;
  }
</script>

10、jQuery

javascript
jquery库，里面存在大量的javascript函数
获取jquery
https://www.bootcdn.cn/jquery/
1、jquery.min.js：是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。
2、jquery.js：是完整的未压缩的jQuery库，文件比较大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地导入-->
    <script src="Production/jquery-3.6.3.min.js"></script>
    <!--cdn在线导入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

</body>
</html>

10.1、使用jquery

公式： $(选择器).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地导入-->
    <script src="Production/jquery-3.6.3.min.js"></script>
    <!--cdn在线导入-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
</head>
<body>
<!--
公式：  $(选择器).action()
-->

<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery')
    })
</script>


</body>
</html>

10.2、选择器

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

//jquery css 中的选择器他全部都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class1').click(); //class选择器

10.3、事件

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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>
      //当网页元素加载完毕之后，响应事件
      $(function () {
        $('#divMove').mousemove(function (e) {
          $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
      })
    </script>
  </body>
</html>

10.4、操作DOM

节点文本操作

$('#test-ul li[name=python]').text();    //获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();    //获得值
$('#test-ul').html('<strong>123</strong>');  //设置值

css的操作

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

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

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

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();//show和hide切换

小技巧
1、巩固JS（看游戏源码）
2、巩固HTML，CSS（扒网站，全部down下来，然后对应修改看效果~）
Layer弹窗组件
Element-ui

JavaScript操作DOM对象、操作BOM对象学习笔记

1、什么是JavaScript

2、快速入门

2.1、引人JavaScript

2.2、基本语法入门

2.3、数据类型

3、数据类型

3.1、字符串

3.2、数组

3.3、对象

3.4、流程控制

3.5、Map和Set

3.6、iterator

4、函数及面向对象

4.1、函数定义

4.2、变量的作用域

4.3、定义方法

5、内部对象

5.1、Data

5.2、JSON

5.3、Ajax

6、面向对象编程

7、操作BOM对象（重点）（Browser Object Model）

7.1、window(重要，浏览器窗口)

8、操作DOM对象（重点）（Document Object Model）

8.1、更新节点

8.2、操作css

8.3、删除节点

8.4、插入节点

9、操作表单（验证）

10、jQuery

10.1、使用jquery

10.2、选择器

10.3、事件

10.4、操作DOM

猜你喜欢

JavaScript操作DOM对象、操作BOM对象 学习笔记

1、什么是JavaScript

2、快速入门

2.1、引人JavaScript

2.2、基本语法入门

2.3、数据类型

3、数据类型

3.1、字符串

3.2、数组

3.3、对象

3.4、流程控制

3.5、Map和Set

3.6、iterator

4、函数及面向对象

4.1、函数定义

4.2、变量的作用域

4.3、定义方法

5、内部对象

5.1、Data

5.2、JSON

5.3、Ajax

6、面向对象编程

7、操作BOM对象（重点）（Browser Object Model）

7.1、window(重要，浏览器窗口)

8、操作DOM对象（重点）（Document Object Model）

8.1、更新节点

8.2、操作css

8.3、删除节点

8.4、插入节点

9、操作表单（验证）

10、jQuery

10.1、使用jquery

10.2、选择器

10.3、事件

10.4、操作DOM

猜你喜欢

JavaScript操作DOM对象、操作BOM对象学习笔记