JavaScript_js 统一变量可以重复生成-CSDN博客

本文链接：https://blog.csdn.net/X_myit/article/details/122459100

创建html页面，编写js代码

<!DOCTYPE html>

<head>

<title>js引入方式-内部js</title>

//操作浏览器弹窗

alert("hello, world");

</script>

</head>

<body>

</body>

</html>

var和let的区别

区别1：var定义的变量可以重复声明，而let定义的变量不可以被重复声明

区别2：var定义的变量在script标签中都有效，而let定义的变量只在当前代码块内有效

数据类型

number：数字（整数、小数、NaN(Not a Number）

string：字符、字符串，单双引皆可

boolean：布尔。true，false

Object：对象，null 标识对象为空

undefined：当声明的变量未初始化时，该变量的默认值时 undefined

字符串转换成数字类型

全局函数(方法)，就是可以在JS中任何的地方直接使用的函数，不用导入对象。不属于任何一个对象

parseInt();将一个字符串转成整数,如果一个字符串包含非数字字符,那么parseInt函数会从首字母开始取数字字符,一旦发现非数字字符,马上停止获取内容,如果转换失败,则返回NaN=Not a Number,不是一个数

parseFloat(); 将一个字符串转成小数,转换原理同上

isNaN(); 转换前判断被转换的字符串是否是一个数组,不是数组返回true,是数组返回true

boolean转换成数字类型和其他类型转换为boolean

boolean:true 转为1，false 转为0

其他类型转为 boolean

1. number：0和NaN转为false，其他的数字转为true

2. string：空字符串转为false，其他字符串转为true

3. null:转为false

4. undefined：转为false

运算符

一元运算符：++，--

算术运算符：+，-，*，/，%

赋值运算符：=，+=，-=…

关系运算符：>，<，>=，<=，!=，==，===…

逻辑运算符：&&，||，!

三元运算符：条件表达式 ? true_value : false_value

**注意:**

number类型和字符串做-,*,/,%的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足**number**类型

/除法运算会保留小数位

流程控制语句

if:

switch:

for:

while:

do…while:

函数

方式一：

方式二：

常见事件

* HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情

* **事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。**

点击事件

获得焦点(onfocus)和失去焦点(onblur)

内容改变(onchange)

xx加载完成事件(onload)

键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)

鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)

事件绑定

事件绑定有两种方式：

方式一：通过 HTML标签中的事件属性进行绑定

<标签属性="调用js函数"></标签>

属性: 根事件名一致

属性值: 调用js函数代码

方式二：通过 DOM 元素属性绑定

标签对象.事件属性 = function(){

//执行一段代码

}

</script>

document.getElementById("btn").onclick = function (){ alert("我被点了");}

正则表达式

^：表示开始

$：表示结束

[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

. 代表任意单个字符，除了换行和行结束符

\w：代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]

\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个

*：零个或多个

？：零个或一个

{x}：x个

{m,}：至少m个

Array

方式一：

方式二：

方式三：

二维数组

方式一：

var arr1 = new Array(3);

arr1[0] = ["深圳","广州","惠州","东莞"];

arr1[1] = ["长沙","郴州","衡阳","岳阳"];

arr1[2] = ["南昌","井冈山","瑞金","赣州"];

for (let i = 0; i < arr1.length; i++) {

//console.log(arr1[i]);

let arr = arr1[i];

for (let j = 0; j <arr.length; j++) {

console.log(arr[j]);

}

console.log("--------")

}

方式二：

var arr2 = [

["深圳","广州","惠州","东莞"],

["长沙","郴州","衡阳","岳阳"],

["南昌","井冈山","瑞金","赣州"]

];

for (let i = 0; i < arr2.length; i++) {

let arr = arr2[i];

for (let j = 0; j <arr.length; j++) {

console.log(arr[j]);

}

console.log("--------")

}

Date对象

创建日期对象语法
* 创建当前日期：var date = new Date()
* 创建指定日期：var date = new Date(年, 月, 日)
注意：月从0开始，0表示1月
* 创建指定日期时间：var date = new Date(年, 月, 日, 时, 分, 秒)
注意：月从0开始，0表示1月
常用方法
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)
toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。
toLocaleDateString()根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()根据本地时间格式，把 Date 对象转换为字符串。

JS自定义对象

BOM

Browser Object Model 浏览器对象模型

JavaScript 将浏览器的各个组成部分封装为对象,得开发者可以方便的操作浏览器中的各个对象

组成：

Window：浏览器窗口对象【重点】

alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框,返回选择的结果,确定(true),取消(false)
setInterval('函数名()',time) 按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout('函数名()',time) 在指定的毫秒数后调用函数或计算表达式
clearInterval(定时器) 取消由 setInterval() 设置的 Interval()。
clearTimeout(定时器) 取消由 setTimeout() 方法设置的 timeout。

Navigator：浏览器对象【了解】

Screen：屏幕对象【了解】

History：历史记录对象【了解】

Location：地址栏对象【重点】

DOM

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象

Element：元素对象

获取：使用Document对象的方法来获取标签
document.getElementById(id) 根据id获取标签返回值:Element对象
document.getElementsByTagName(tagName) 根据标签名称获取一批标签返回值:Element类数组
document.getElementsByClassName(className) 根据类名获取一批标签返回值:Element类数组
document.getElementsByName(name) 根据标签name获取一批标签返回值:Element类数组

操作 Element

document.createElement(tagName) 创建标签 Element对象
parentElement.appendChild(sonElement) 插入标签
document.createTextNode()创建文本
element.remove() 删除标签

<body>

</body>

添加标签

操作标签体

* 获取标签体内容：`标签对象.innerHTML`
* 设置标签体内容：
* `innerHTML`是覆盖式设置，原本的标签体内容会被覆盖掉；`标签对象.innerHTML = "新的HTML代码";`
* 支持标签的可以插入标签, 设置的html代码会生效; `标签对象.innerHTML += "新的HTML代码";`

操作标签属性

getAttribute(attrName)获取属性值参数: 属性名称
setAttribute(attrName, attrValue)`置属性值, 参数: 属性名称, 属性值
removeAttribute(attrName)删除属性参数: 属性名称