JavaScript基础学习

javascript基础

声明！
学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页B站泷羽sec

概述：

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。常用来修改html及css代码和验证表单

对于下面学习JavaScript代码时，想要执行并回显，建议在浏览器的开发者工具中的控制台或console功能中进行验证代码

1. 嵌入方法

1.1. 内嵌式

理论上js可以写在任何第一个地方但是一般写在head标签里或者 body下

<script type="application/javascript">
	alert("内嵌式");
</script>

<script>alert("内嵌式");</script>

1.2. 外链式

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>
/*这里的src属性值可以是绝对地址也可以是相对地址，或者网络地址*/

1.3. 行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick鼠标单击事件

<input type="button" value="点我呀!" onclick="alert('xss');">
/*当点击这个input表单的时候，就会弹窗*/

<button onclick="alert('xss');">点我呀!</button>
/*当点击这个button按钮时，就会弹窗*/

2. 语句

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。
用分号 ; 分隔JavaScript语句。

3. 注释

单行注释： // 注释语句快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/

注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

4. 变量

变量是用于存储信息的"容器"
javascript单 双引号没区别
var a=’xxx’; //使用var定义变量并赋值
let a = 'xxx'; //使用let定义变量并赋值

5. JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

这在菜鸟教程网址都有详细信息

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

6. JavaScript 作用域

6.1. Javascrpt 局部变量

局部作用域变量在函数内声明，变量为局部作用域。

function myFunction() {
	var carName = "Volvo";
	// 函数内可调用 carName 变量，而从别的函数直接想调用carName变量是不能调用的
}

6.2. JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";	//在非函数外定义，也就是不在由function定义的函数内定义变量


function myFunction() {
	var a = carName;
  // 函数内可调用 carName 变量
}

7. 运算符

7.1. 算术运算符

算数运算符	作用
`+`	用于计算两个数值相加的结果。当`+`运算符的其中一个操作数是字符串时，它会执行字符串拼接操作
`-`	用于计算两个数值相减的结果
`*`	用于计算两个数值相乘的结果
`/`	用于计算两个数值相除的结果
`%`	用于计算两个数值相除后的余数
`++`	前置自增（++x）：先将变量的值加`1`，然后返回增加后的新值后置自增（x++）：先返回变量的当前值，然后再将变量的值加`1`
`--`	前置自减（–x）：先将变量的值减`1`，然后返回减少后的新值后置自减（x–）：先返回变量的当前值，然后再将变量的值减`1`

7.2. 比较运算符

比较运算符	作用
`==`	比较值是否相等，相等返回1，不等返回0
`!=`	比较值是否不相等，不相等返回1，相等返回0
`===`	比较值和类型是否相等，相等返回1，不等返回0
`!===`	比较值和类型是否不相等，不相等返回1，相等返回0
`<`	比较两个值的大小，若前者小于后者则为真，否则为假
`>`	比较两个值的大小，若前者大于后者则为真，否则为假

7.3. 赋值运算符

赋值运算符	作用
`=`	将等号右边的值赋给等号左边的变量
`+=`	先将左边变量的值与右边的值进行加法运算，然后将结果赋值给左边的变量，等价于`x = x + y`
`-=`	先将左边变量的值减去右边的值，然后将结果赋值给左边的变量，等价于`x = x - y`
`*=`	先将左边变量的值与右边的值进行乘法运算，然后将结果赋值给左边的变量，等价于`x = x * y`
`/=`	先将左边变量的值除以右边的值，然后将结果赋值给左边的变量，等价于`x = x / y`
`%=`	先将左边变量的值对右边的值取余数，然后将结果赋值给左边的变量，等价于`x = x % y`
`**=`	幂赋值运算符，先将左边变量的值进行幂运算（以右边的值为指数），然后将结果赋值给左边的变量，等价于`x = x ** y`

7.4. 逻辑运算符

逻辑运算符	作用
`
`&&`	一般是对两个表达式进行逻辑 “与” 运算。只有当两个表达式的值都为`true`时，整个表达式才返回`true`；只要其中一个表达式的值为`false`，就返回`false`
`!`	它用于对一个操作数进行取反操作。如果操作数转换为布尔值后为`true`，那么`!`运算的结果为`false`；如果操作数转换为布尔值后为`false`，那么`!`运算的结果为`true`。
`!!`	双重否定，连续使用两个`!`（即`!!`）可以将一个值转换为其对应的布尔值。这是一种常用的将任意类型的值转换为布尔值的技巧。

7.5. 三元运算符（三目运算符）

三元运算符（也称为条件运算符）在 JavaScript 中的语法是

表达式1?表达式2:表达式3

当我的表达式1成立时，也就是为true时执行表达式2 否则执行表达式3

var max = 2>1?'>':'<';
console.log(max);
这段代码就是使用三元运算符，先进行  2>1 的判断，为true，执行'>'，也就是把'>'赋值给变量max

8. 流程控制语句

8.1. if语句

if(条件){				这里就是进行控制，条件判断为true才能进如到if中执行函数体

	函数体
}

8.2. if else语句

if(条件){				与前面一样
    
	函数体1
}else{				主要是else，当if条件判断不为true时，则执行函数体2
	函数体2
}

8.3. if…else if…else语句

if(条件1){				总的来说，这就是多个if...else语句组合在一起的

	函数体1
}else if(条件2){

 	函数体2
}else if(条件n){

	函数体3
}else{
 	
	函数体4
}

8.4. switch语句:多分支语句

switch(表达式) {		
//switch相当于开关，当表达式中的最终值与其下的case值n能对应的上，则跳到对应的case处，执行其中的代码
	case n:
		代码块
		break;			
//break是退出当前的意思，也就是这里当执行了这里的case语句中的代码，就会退出switch
	case n:
		代码块
		break;
	default:		//默认，不管表达式的结果是否匹配得到case，都会执行这其中的代码
		默认代码块
} 

如：
switch (new Date().getDay()) {
//new Date().getDay()是用于获取当前日期是星期几的 JavaScript 代码。new Date()创建一个代表当前日期和时间的Date对象，然后getDay()方法用于从这个Date对象中提取星期几的信息。
	case 6:
		text = "今天是周六";
		break; 
	case 0:
		text = "今天是周日";
		break; 
	default: 
		text = "期待周末~";
}

8.5. 循环中常用的两个关键字

continue：

跳过当前循环，直接进入循环的下一个步骤

break:

结束循环

8.6. while循环

先判断条件 当条件成立 再执行循环体，然后开始循环，直到条件不成立
while(循环成立条件){		

	循环体
}

8.7. do…while循环

不论条件成不成立 先执行一遍 再判断，然后开始循环，直到条件不成立
do{

	循环体

}while(循环成立条件)

8.8. for循环

for (初始化表达式; 条件表达式; 更新表达式) {
   循环体
}	
//如果在循环之前已经声明并初始化了循环变量，可以省略初始化表达式
//如果省略条件表达式，那么循环条件默认为true，这可能会导致无限循环，除非在循环体中有其他方式来结束循环
//省略更新表达式时，需要在循环体中手动更新循环变量，以避免无限循环

如：
for (let i = 0; i < 10; i++) {//直到i大于等于10，退出循环，因为条件不满足了
   console.log(i);			//每次进入循环的时候，i会进行自增
}

8.9. for in循环

主要用于遍历对象的可枚举属性
for (variable in object) {
	循环体
}
variable是一个变量，在每次循环中，它会被赋值为对象object的一个可枚举属性名（字符串形式）

如：
let person = {
	name: "John",
	age: 30,
	city: "New York"
};
for (let property in person) {
	console.log(property + ": " + person[property]);
}
每次循环时，property变量会依次被赋值为"name"、"age"和"city"。
在循环体中，通过person[property]可以访问到对应属性的值。例如，当property为"name"时，person[property]就是person["name"]，即"John"。

9. 数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
对象类型数组字典

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

JS中的一些常用方法

方法	作用
`console.log()`	终端输出
`alert()`	弹出框
`confirm()`	确认框标题 true false
`location.href ()`	获取url
`location.href ='url'`	重定向
`location.reload()`	重新加载

9.1. 判断类型

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};

下面对上面的结果采用弹窗的形式进行显示

window.alert(typeof a)  	//------------> string
window.alert(typeof b)  	//------------> number
window.alert(typeof c)  	//------------> object
window.alert(typeof d)  	//------------> object
window.alert(typeof e)  	//------------> function
window.alert(typeof f)  	//------------> function

9.2. 数字类型（Number）

只有一种数字类型，数字可以是小数，也可以是整数

以0开头默认使用8进制来表示这个数字
以0x开头默认使用16进制来表述这个数字
如果以 - 开头默认是负数
如果带有e 以科学计数法来解析这个数字

数字类型的转换函数

parseInt(..) 将某值转换成整数，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值

NaN， 非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

9.3. 字符串型（string）

字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的

常见的字符操作函数	作用
`obj.length`	用于获取字符串的长度，也就是字符串中字符的个数
`obj.trim()`	移除字符串开头和结尾的空白字符（包括空格、制表符、换行符等）
`obj.trimLeft()`	移除字符串开头的空白字符
`obj.trimRight)`	移除字符串结尾的空白字符
`obj.charAt(n)`	返回字符串中的第 n 个字符
`obj.concat(value, ...)`	用于将一个或多个字符串拼接在一起，返回拼接后的新字符串
`obj.indexOf(substring,start)`	用于查找指定子字符串在原字符串中第一次出现的位置。如果提供了 start 参数，则从该指定的起始位置开始查找。返回值是一个从 0 开始的索引值，如果未找到则返回 -1
`obj.lastIndexOf(substring,start)`	用于查找指定子字符串在原字符串中最后一次出现的位置。如果提供了 start 参数，则从该指定的起始位置开始往回查找（即从右往左查找）。返回值是一个从 0 开始的索引值，如果未找到则返回 -1
`obj.substring(from, to)`	根据指定的索引范围获取字符串的子序列。它会返回从 from 索引（包含）到 to 索引（不包含）之间的字符组成的字符串。如果省略 to 参数，则会获取从 from 索引到字符串末尾的字符
`obj.slice(from, end)`	类似于 substring，也是用于获取字符串的切片（即子序列）
`obj.toLowerCase()`	将字符串中的所有大写字母转换为小写字母，返回转换后的新字符串
`obj.toUpperCase()`	将字符串中的所有小写字母转换为大写字母，返回转换后的新字符串
`obj.split(delimiter, limit)`	根据指定的分隔符将字符串分割成一个数组。如果提供了 limit 参数，则最多分割成 limit 个子字符串
`obj.search(regexp)`	从头开始在字符串中匹配指定的正则表达式，返回匹配成功的第一个位置的索引值。如果未找到匹配，则返回 -1 (g无效)
`obj.match(regexp)`	在字符串中进行全局搜索匹配指定的正则表达式。如果正则表达式中有全局标志（g），则会找到所有匹配项并返回一个包含匹配结果的数组；如果正则表达式中没有全局标志（g），则只找到第一个匹配项并返回一个包含匹配结果的数组（该数组可能包含一些额外的信息，如匹配的索引等）
`obj.replace(regexp, replacement)`	用于替换字符串中匹配指定正则表达式的部分。如果正则表达式中有全局标志（g），则替换所有匹配项；否则只替换第一个匹配项

obj.replace(regexp, replacement) 特殊的替换模式

替换，正则中有g则替换所有，否则只替换第一个匹配项，

$ 数字：匹配的第 n 个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本；
$$：直接量 $ 符号。

9.4. 布尔类型（boolean）

一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true 和 false

这两个个值一般用于说明某个事物是真或者假，js一般用布尔类型来比较所得到的结果

9.5. null（空）

关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。

如果试图去引用一个没有定义的值，就会返回一个null。

这里注意一点：null并不等于"" 或者0

9.6. undefined（未定义）

这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值

null和undefined区别：

null它表示一个变量被赋予一个空值
undefined是表示变量还没有被赋值

9.7. 数组

数组内可以存放任意数据类型的数据（本质上它也是对象）
数组元素不赋值的情况下值为undefined
访问数组范围之外的元素，不会出现越界的问题，会返回undefined
定义数组大小，照样可以添加更多元素

9.7.1. 定义数组的方法：

var arr=[] 定义一个空数组

var arr=[
    10,20,
    {
        "name":"tomy",
        "age":19
    },
    0.1,
    "string",
    true,
    ["aaa","bbb"]
]

定义数组的同时进行赋值

var arr=new Array(); 定义一个空数组

var arr = new Array(
    10,
    20,
    {
        "name":"tomy",
        "age":19
    },
    0.1,
    "string",
    true,
    ["aaa","bbb"]
)

定义数组的同时进行赋值

var arr=new Array(10) 定义一个长度为10的数组

9.7.2. 数组的操作

数组操作的一些函数	作用
`obj.length`	用于获取数组中元素的个数，也就是数组的大小
`obj.push()`	用于在数组的末尾追加一个或多个元素
`obj.pop()`	用于从数组的末尾移除一个元素，并返回被移除的那个元素
`obj.unshift()`	用于在数组的头部插入一个或多个元素
`obj.shift()`	用于从数组的头部移除一个元素，并返回被移除的那个元素
`obj.slice( )`	用于获取数组的一个 “切片”，也就是从原数组中提取出一部分元素组成一个新数组。可以是下标范围，也可以是单个下标
`obj.reverse( )`	用于将数组中的元素顺序进行反转，即原来在数组头部的元素会移到末尾，原来在末尾的元素会移到头部
`obj.join('-')`	用于将数组中的所有元素连接起来，组成一个字符串。可以指定一个分隔符，如`-` 等，如果不指定，默认使用逗号作为分隔符
`obj.concat(val,..)`	用于将一个或多个数组或元素与原数组进行连接，返回连接后的新数组
`obj.sort( )`	用于对数组中的元素进行排序
`obj.splice(start, deleteCount, value, ...)`	用于在指定位置插入、删除或替换数组的元素

obj.splice(start, deleteCount, value, …)的具体用法

具体用法	作用
`obj.splice(n,0,val)`	用于在数组的指定位置（索引为 n）插入元素 val。因为 deleteCount 为 0，表示不删除任何元素，只是插入
`obj.splice(n,1,val)`	用于在数组的指定位置（索引为 n）替换一个元素。deleteCount 为 1，表示删除一个元素，然后插入 val 来替换被删除的元素
`obj.splice(n,1)`	用于在数组的指定位置（索引为 n）删除一个元素。deleteCount 为 1，表示删除一个元素，没有插入新元素的操作

10. 函数

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：

普通函数

function myFunction(a, b) {
	return a * b;         		// 函数返回 a 和 b 的乘积
}
var x = myFunction(7, 8);     	// 调用函数，返回值被赋值给 x
console.log(x)					//在控制台输出x

匿名函数

没有名字的函数称为匿名函数

setInterval(function(){
	console.log(123);
},500)

function(){ console.log(123); }：这是一个匿名函数，也就是没有函数名的函数。它的功能很简单，就是在控制台输出数字123。当setInterval定时器触发时，就会执行这个匿名函数，从而在控制台输出相应的内容。

setInterval函数

功能：setInterval是 JavaScript 中的一个定时器函数，它用于按照指定的时间间隔（以毫秒为单位）重复调用一个函数。
语法
```
setInterval(callback, delay, arg1, arg2,...)
```
- callback：是要重复执行的函数，可以是一个具名函数、匿名函数或者箭头函数。在给定的代码中，使用的是一个匿名函数function(){ console.log(123); }作为回调函数。
- delay：是指定的时间间隔，以毫秒为单位。这里设置为500毫秒，意味着每隔 500 毫秒就会触发一次回调函数的执行。
- arg1, arg2,...：这些是可选参数，可以在调用回调函数时传递给它。在给定的代码中，没有使用这些可选参数。

自执行函数

(function(arg){
	console.log(arg);
})(1);
创建函数并且自动执行

11. 字典

字典是一种以键-值对形式存储数据的数据结构

var dict = {
    'k1':"moonsec",
    'k2':'moon',
    'age':18
};									//定义字典

for(var item in dict){
	console.log(dict[item]);
}									//通过for循环，遍历并在控制台显示字典中的内容

dict['age'] 						//获取key为age的元素
dict['age']=10						//把字典中的key为age的值改为10

delete dict['one'];					//删除字典中key为one的元素，若没有，也没有影响
delete dict.age;					//删除字典中key为age的元素，也是删除的用法

12. js的序列化和反序列化

JSON（JavaScript Object Notation）字符串是一种轻量级的数据交换格式，它基于 JavaScript 的对象字面量语法，但已经独立于 JavaScript，被广泛用于不同编程语言之间的数据传输和存储。简单来说，它是一个符合 JSON 格式规范的字符串，用于表示结构化的数据，如对象、数组等。

语法规则

对象表示：在 JSON 字符串中，对象是用花括号{}包裹的键值对集合。

键必须是字符串，并且要用双引号"括起来，值可以是字符串、数字、布尔值、null、对象或者数组。

键值对之间用逗号,分隔。例如：{"name": "John", "age": 30, "city": "New York"}是一个表示对象的 JSON 字符串，其中name、age和city是键，"John"、30和"New York"是对应的键值。
数组表示：数组是用方括号[]包裹的一组值。值可以是上述提到的任何 JSON 数据类型。

例如：["apple", "banana", "cherry"]是一个 JSON 数组字符串，表示一个包含三个名称的数组。

数据类型

字符串：必须用双引号 " 括起来，如"Hello, World!"。
数字：可以是整数（如1、-10）或小数（如3.14、-0.5）。
布尔值：只有true和false两种。
null：表示空值，写作null。

序列化即js中的Object转化为JSON字符串

把对象转为字符串，用函数JSON.stringify(obj)或者obj.toJSONString()

使用toJSONString

var last=obj.toJSONString(); 将JSON对象转化为JSON字符
使用stringify

var last=JSON.stringify(obj); 将JSON对象转化为JSON字符

反序列化即js中JSON字符串转化为Object

把字符串转为对象或数组，用函数JSON.parse(json)

把字符串转为对象

let也是声明变量的关键字

let jsonString = '{"name": "John", "age": 30, "city": "New York"}';
let obj = JSON.parse(jsonString);	//解析json字符串为对象	
console.log(obj);
console.log(obj.name);
console.log(obj.age);
console.log(obj.city);

把字符串转为数组

let jsonArrayString = '[{"id": 1, "name": "Item1"},{"id": 2, "name": "Item2"}]';
let arr = JSON.parse(jsonArrayString);	//解析json字符串为数组
console.log(arr);
console.log(arr[0].id);					
console.log(arr[1].name);

13. 转义


`decodeURI( )`	用于对经过`encodeURI()`编码的完整 URI 进行解码，将其中已转义的字符还原为原始未转义的形式
`encodeURI( )`	用于对完整的 URI 进行编码，将其中一些特殊字符转换为对应的转义字符形式
`decodeURIComponent( )`	专门用于对 URI 组件（如查询参数、路径片段等）中的字符进行解码，将经过`encodeURIComponent()`编码的字符还原为原始未转义形式
`encodeURIComponent( )`	用于对 URI 组件（如查询参数、路径片段等）中的字符进行编码，将其中的所有字符（包括那些在 URI 整体中可能不需要编码但在组件中可能需要特殊处理的字符）都转换为转义字符形式
`escape( )`	将字符串中的一些特殊字符转换为十六进制的转义序列
`unescape( )`	与`escape()`相对应，用于给经过`escape()`转义的字符串进行解码，将其中的十六进制转义序列还原为原始字符
`URIError`	当在使用`decodeURI()`、`decodeURIComponent()`、`encodeURI()`、`encodeURIComponent()`等函数时，如果传入的参数不符合相应的要求，就会抛出`URIError`

14. eval

定义与基本功能

在 JavaScript 中，eval()函数是一个用于执行 JavaScript 代码的内置函数。它接受一个字符串作为参数，这个字符串包含了 JavaScript 代码，eval()函数会将这个字符串当作 JavaScript 代码来执行。

语法

基本语法为eval(code)，其中code是一个包含 JavaScript 代码的字符串。例如：eval("console.log('Hello, World!');")会在控制台输出Hello, World!。

使用场景

动态执行代码：

可以根据不同的条件动态地执行代码片段。例如，在一些简单的脚本语言实现或者代码生成的场景中，通过动态构建代码字符串，然后使用eval()来执行。

假设我们有一个简单的数学表达式求值的需求，用户输入一个数学表达式字符串，我们可以使用eval()来计算结果。

let expression = "2 + 3 * 4";
let result = eval(expression);
console.log(result); 
// 输出：14

代码注入（不推荐，存在安全风险）：

在某些特定的开发环境（如一些调试工具或者特定的内部系统），可能会使用eval()来实现代码注入。不过这种方式在实际的生产环境中是非常危险的，因为它可能会导致安全漏洞。例如，如果eval()执行的字符串来自用户输入，恶意用户可能会注入恶意代码。
假设有一个网页应用，用户可以输入一段 JavaScript 代码，然后通过eval()来执行，如果用户输入alert("Your password:"+document.cookie);，就会弹出包含用户密码（如果存储在cookie中）等敏感信息的提示框。

15. 时间

Date 对象

var myDate = new Date();  
myDate.getYear(); 					//获取当前年份(2位)  
myDate.getFullYear(); 				//获取完整的年份(4位,1970-????)  
myDate.getMonth(); 	//获取当前月份(0-11,0代表1月) 所以获取当前月份是 myDate.getMonth()+1;  
myDate.getDate(); 					//获取当前日(1-31)  
myDate.getDay(); 					//获取当前星期X(0-6,0代表星期天) 
myDate.getTime(); 					//获取当前时间(从1970.1.1开始的毫秒数)  
myDate.getHours(); 					//获取当前小时数(0-23)  
myDate.getMinutes(); 				//获取当前分钟数(0-59)  
myDate.getSeconds(); 				//获取当前秒数(0-59)  
myDate.getMilliseconds(); 			//获取当前毫秒数(0-999)  
myDate.toLocaleDateString(); 		//获取当前日期  
myDate.toLocaleTimeString(); 		//获取当前时间  
myDate.setDate(dateTime.getDate()+1);	//设置获取到的当前日加1

把对象的获取时间改为都加一天 
var dateTime = new Date();  	//首先获取Data()时间
dateTime=dateTime.setDate(dateTime.getDate()+1);//然后把获取到的天数加1天并赋值
/setDate() 方法会返回一个时间戳（从 1970 年 1 月 1 日 00:00:00 UTC 开始到设置后的日期时间所经过的毫秒数），然后将这个时间戳赋值给 dateTime，此时 dateTime 不再是原来的 Date 对象形式，而是一个代表从 1970 年 1 月 1 日 00:00:00 UTC 开始到明天日期所经过毫秒数的数值。

dateTime=new Date(dateTime);	//重新新建对象，并把上面
/dateTime 变成了一个时间戳数值，这里再次使用 Date 构造函数，将这个时间戳作为参数传入，重新创建一个新的 Date 对象。这个新的 Date 对象就准确地表示了明天的日期和时间（基于刚才设置的日期信息以及当前的小时、分钟、秒、毫秒等信息，因为重新创建对象时会根据时间戳来还原完整的日期时间状态）。

dateTime=dateTime.

16. 面向对象

JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。

第一种方法

function Person(name) {
	//构造函数里面的方法和属性
	this._name = name;
	this.getName = function () {
		console.log(this._name);
	};
	this.setName = function (name) {
		this._name = name;
	};
}
var p = new Person("张三");
p.getName();  // 张三
p.setName("李四");
p.getName();  // 李四

对于上述代码需要注意：
Person充当的构造函数
this代指对象,this代表函数被调用时所属的对象
创建对象时需要使用 new

第二种方法

// 定义类		这种类似于java中的
class Person {
	//类的构造函数，实例化的时候执行，new的时候执行
	constructor(name) {
		this._name = name;
	}
    
	getName() {
		console.log(this._name);
	}
    
	setName(name) {
		this._name = name
	}
}

let p = new Preson('张三')
p.getName();  // 张三
p.setName('李四');
p.getName();  // 李四

17. 原型

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数作为普通函数调用时 prototype没有任何作用

当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性

指向该构造函数的原型我们可以通过__proto__来访问该属性

我们可以将对象中公有的内容，统一设置到原型对象中

function Persion(username, age) {
    // 使用this将传入的参数赋值给对象实例的属性
    this.username = username;
    this.age = age;
}

// 在原型上定义一个方法用于展示对象的信息
Persion.prototype.showInfo = function () {
    console.log(`用户名: ${this.username}, 年龄: ${this.age}`);
};

var p = new Persion('John', 30);

// 验证原型关系，这里输出应该为true
console.log(p.__proto__ === Persion.prototype);

// 调用原型上定义的方法展示对象信息
p.showInfo();

function Persion(username, age) {
    // 在构造函数内部，将传入的参数赋值给对象的属性
    this.username = username;
    this.age = age;
}

// 给原型对象添加属性和方法
Persion.prototype.a = '女';
Persion.prototype.Sayname = function () {
    // 通过this关键字获取当前对象实例的username属性
    return this.username;
};

var p1 = new Persion('xxx', 25);
var p2 = new Persion('yyy', 30);

alert(p1.Sayname()); 
// 此时会弹出p1对象的username属性值，即 'xxx'

alert(p2.Sayname()); 
// 此时会弹出p2对象的username属性值，即 'yyy'

18. JS操作DOM

18.1. 什么是DOM？

DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。

在这里插入图片描述

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

18.2. DOM查找元素

document获取节点的基本方法

基本方法	作用
`document.getElementById('id');`	通过id来获取元素,返回指定的唯一元素
`document.getElementsByName("name");`	通过name来获取元素，返回name='name’的集合
`document.getElementsByClassName("classname");`	用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)
`document.getElementsByTagName('div');`	用元素的标签获取元素，返回所有标签=“div”的集合

这些id、name、classname、div都是在HTML中标签或者标签的属性中定义好的

18.2.1. 查找

文件内容操作

innerText 仅文本
innerHTML 全内容

value

<input type="text" id="myInput" value="初始值">
<script>
  let inputElement = document.getElementById("myInput");
  console.log(inputElement.value); //获取input标签的value值，还可以获取其他标签的，方法一样
  // 输出：初始值
</script>

直接查找

<div id="myDiv">这是一个div元素</div>
<script>
	let myDiv = document.getElementById('myDiv');
	console.log(myDiv.innerHTML); 	//查找id为myDiv，并把该id所在标签中的文本内容输出
	// 输出：这是一个div元素
</script>

间接查找

       <div id="parentDiv">
         <p id="childPara">这是一个段落。</p>
       </div>
       <script>
         let child = document.getElementById("childPara");
         let parent = child.parentNode;
         console.log(parent.id); 
         // 输出：parentDiv
       </script>
     - `parentElement`和`parentNode`类似，但在某些特殊情况下（如`parentNode`可能返回文档节点等非元素节点时），`parentElement`只会返回元素类型的父节点。在现代浏览器中，它们的行为在大多数常规情况下是相似的。
   - **从父元素查找其他子元素**
     - 一旦获取了父元素，可以通过`children`属性（返回一个`HTMLCollection`，包含所有子元素）或者`childNodes`（返回一个`NodeList`，包含所有子节点，包括文本节点、元素节点等）来查找其他子元素。例如：
```html
       <div id="parentDiv">
         <p>段落1</p>
         <p>段落2</p>
       </div>
       <script>
         let parent = document.getElementById("parentDiv");
         let children = parent.children;
         for (let i = 0; i < children.length; i++) {
           console.log(children[i].innerText);
         }
         // 输出：段落1，段落2
       </script>
2. **基于兄弟元素查找**
   - **`nextSibling`和`previousSibling`**
     - `nextSibling`返回当前元素的下一个节点，这个节点可能是元素节点、文本节点或者注释节点等。例如：
```html
       <p id="para1">段落1</p>
       <p id="para2">段落2</p>
       <script>
         let para1 = document.getElementById("para1");
         let nextSibling = para1.nextSibling;
         console.log(nextSibling.innerText);
         // 如果nextSibling是文本节点（如换行符等），可能会输出空字符串或者换行符等内容
         // 如果是元素节点（如<p id="para2">段落2</p>），则会输出段落2
       </script>
     - `previousSibling`则返回当前元素的上一个节点，原理和`nextSibling`类似。
   - **`nextElementSibling`和`previousElementSibling`**
     - 这两个属性专门用于获取下一个或上一个元素节点，忽略文本节点和注释节点等。例如：
```html
       <p id="para1">段落1</p>
       这是一个文本节点（可能是换行符等）
       <p id="para2">段落2</p>
       <script>
         let para1 = document.getElementById("para1");
         let nextElementSibling = para1.nextElementSibling;
         console.log(nextElementSibling.id);
         // 输出：para2
       </script>
3. **基于祖先元素查找（向上查找多级）**
   - 可以通过多次调用`parentNode`（或`parentElement`）来向上查找多级祖先元素。例如，要找到一个元素的祖父元素：
```html
     <div id="grandparent">
       <div id="parent">
         <p id="child">这是一个段落。</p>
       </div>
     </div>
     <script>
       let child = document.getElementById("child");
       let grandparent = child.parentNode.parentNode;
       console.log(grandparent.id);
       // 输出：grandparent
     </script>
   - 另外，也可以结合使用`closest()`方法来查找最近的满足特定CSS选择器的祖先元素。例如：
```html
     <div class="ancestor1">
       <div class="ancestor2">
         <p id="target">这是一个段落。</p>
       </div>
     </div>
     <script>
       let target = document.getElementById("target");
       let closestAncestor = target.closest(".ancestor1");
       console.log(closestAncestor.className);
       // 输出：ancestor1
     </script>

18.2.2. 事件

绑定事件两种方式

直接标签绑定

在标签中直接就有响应事件
<button onclick="alert('你点击了按钮')">点击我</button>

在标签中调用函数，导致触发响应事件
<script>
    function showMessage() {
        alert('这是一个消息');
    }
</script>
<button onclick="showMessage()">点击我</button>

间接标签绑定

先获取dom对象，然后进行绑定

<button id="myButton">点击我</button>
<script>
    var button = document.getElementById('myButton');
    button.onclick = function () {
        alert('你点击了按钮');
    };
</script>

18.2.3. 操作

样式操作

都是需要获取到，也就是查找到后才能操作

属性或方法	作用
`className`属性	列出样式字符串
`classList`属性	列出样式返回数组
`classList.add()`方法	增加样式
`classList.remove()`方法	删除样式

属性操作

方法	作用
`getAttribute()`	获取属性
`setAttribute('xxx','alexe')`	添加属性
`removeAttribute(value)`	删除属性

创建标签并添加到html中

第一种方式字符串方式 insertAdjacentHTML()

<body>
	<input type="button" value="+" onclick="add();"/>
	<div id="div1">`
		<p><input type="text"/></p>`
	</div>
	<script>
		function add(){
			var tag="<p><input type='text'></p>"
			document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
		}
	</script>
</body>

insertAdjacentHTML()有四种值可用：

beforeBegin: 插入到标签开始前
afterBegin:插入到标签开始标记之后
beforeEnd:插入到标签结束标记前
afterEnd:插入到标签结束标记后

第二种方式对象的方式 document.createElement

<input type="button" value="+" onclick="add2();"/>
<div id="div1">
	<p><input type="text"/></p>
</div>
<script>
function add2(){
	var tag =document.createElement('input');//创建input
	tag.setAttribute('type','text');		//设置input属性
	tag.style.color='red';					//设置颜色
	var p =document.createElement('p');		//创建p
	p.appendChild(tag)						//在p后加input
	document.getElementById('div1').appendChild(p);	//在div1后加p
}
</script>appendChild 在节点后面增加一个子节点

提交表单 getElementById(‘id’).submit()

任何标签都可以通过dom提交

<form id='f1' action="https://www.wwc.com/">
	<input type="submit" value="提交" />
	<input type="button" value="botton" onclick="Sub();" />
	<a onclick="Sub();">提交</a>`
</form>
<script>
	function Sub(){
	document.getElementById('f1').submit();
}
</script>

定时器 setInterval() 和 clearInterval()

<input id="i1" type="text" />
<input type="button" value="停止" onclick="stop();">
<script>
	function setTime(){
		var tag = new Date();	//获取时间戳
		document.getElementById('i1').value=tag;  //input标签的value值为这个时间戳
	}
	var obj=setInterval('setTime()','500');	
//定时器为obj，每500毫秒调用setTime，就会刷新时间并显示在inpput标签
	function stop(){
		clearInterval(obj);				//当点击button时，关闭定时器obj
	}
</script>

只执行一次 setTimeout() 和 clearTimeout()

<div id="status"></div>
<input type="button" value="删除" onclick="Delele();">
<script>
	function Delele(){
		document.getElementById('status').innerText="已删除";
//会在div盒子那里显示已删除这个文本信息
		setTimeout(function(){
			document.getElementById('status').innerText="";
		},5000)
	}
</script>

//setTimeout函数用于在指定的延迟时间（以毫秒为单位）后执行一次特定的函数或代码段
//清空该div元素中的文本内容。而setTimeout函数的第二个参数设置为 5000，这意味着经过 5000 毫秒（即 5 秒钟）后，就会执行这个匿名函数，从而实现 5 秒钟后清空div元素文本内容的效果。
//总体就是先插入信息，然后5秒后删除信息

posted @ 2024-11-28 10:33 whitehe 阅读(4) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 泷羽sec----python基础学习（Part 1）

· XSS初探及实验

· JS基础（上）

· Javascript基础（一）

· JavaScript基础快速复习

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称： whitehe
园龄： 4个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

whitehe

JavaScript基础学习