### Java Script (JS) 函数大全：基础知识概览
#### 一、JavaScript 概述与基本函数
在探讨具体的 JavaScript 函数之前，我们先来了解一下 JavaScript 的基础概念及其在网页开发中的作用。JavaScript 是一种轻量级的编程语言，常用于实现网页上的交互功能。下面我们将详细介绍一些最基本的 JavaScript 函数及其应用场景。
#### 二、文档对象模型（DOM）操作
1. **`document.write("")`**: 这个函数可以在文档流中输出文本。例如：
```javascript
document.write("Hello World!");
```
2. **DOM 结构**:
- `document`: 整个 HTML 文档。
- `html`: 包含 `<html>` 元素。
- `head`: 包含 `<head>` 元素。
- `body`: 包含 `<body>` 元素。
3. **访问和操作 DOM 元素**:
- `document.getElementById("elementId")`: 通过元素 ID 获取元素。
- 示例：获取一个 ID 为 "elementId" 的元素，并设置其 `.name` 属性值。
```javascript
document.getElementById("elementId").name = "newValue";
```
4. **数据类型转换**:
- `parseInt()`: 将字符串转换为整数。
- `parseFloat()`: 将字符串转换为浮点数。
- 示例：将字符串 "123" 转换为整数。
```javascript
var num = parseInt("123");
```
5. **字符串操作**:
- `toString()`: 将其他类型的值转换为字符串。
- 示例：将数字 123 转换为字符串 "123"。
```javascript
var str = "" + 123;
```
6. **字符串长度获取**:
- 使用 `length` 属性可以获取字符串的长度。
- 示例：获取字符串 "hello" 的长度。
```javascript
var len = "hello".length;
```
7. **字符串连接**:
- 使用 `+` 运算符可以连接两个字符串。
- 示例：连接两个字符串 "hello" 和 "world"。
```javascript
var str = "hello" + "world";
```
8. **条件判断**:
- 使用 `==`, `!=`, `>`, `>=`, `<`, `<=` 进行比较。
- 示例：比较两个变量的大小。
```javascript
if (a == b) {
// ...
}
```
9. **变量声明**:
- 使用 `var` 关键字声明变量。
- 示例：声明一个变量 `x` 并赋值为 10。
```javascript
var x = 10;
```
10. **条件语句**:
- 使用 `if`...`else` 结构进行条件判断。
- 示例：根据条件选择执行不同的代码块。
```javascript
if (age >= 18) {
// 成年人
} else {
// 未成年人
}
```
11. **循环结构**:
- 使用 `for` 循环进行重复操作。
- 示例：遍历数组并打印每个元素。
```javascript
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
```
12. **跳出循环**:
- 使用 `break` 语句可以提前结束循环。
- 示例：当满足特定条件时跳出循环。
```javascript
for (var i = 0; i < 10; i++) {
if (i == 5) break;
console.log(i);
}
```
13. **定义函数**:
- 使用 `function` 关键字定义函数。
- 示例：定义一个简单的函数。
```javascript
function greet(name) {
console.log("Hello, " + name);
}
```
14. **表单操作**:
- 使用 `document.forms` 访问表单。
- 示例：获取第一个表单。
```javascript
var form = document.forms[0];
```
15. **窗口操作**:
- 使用 `window.open()` 打开新窗口。
- 使用 `window.close()` 关闭当前窗口。
- 示例：打开一个新的窗口。
```javascript
window.open("https://www.example.com");
```
16. **设置状态栏文本**:
- 使用 `window.status` 设置浏览器状态栏的文本。
- 示例：设置状态栏文本为 "Loading..."。
```javascript
window.status = "Loading...";
```
17. **弹出警告框**:
- 使用 `window.alert()` 显示警告框。
- 示例：显示警告框提示 "Warning!"。
```javascript
window.alert("Warning!");
```
18. **确认对话框**:
- 使用 `window.confirm()` 显示确认对话框。
- 示例：询问用户是否继续。
```javascript
if (window.confirm("Do you want to continue?")) {
// 用户点击了“确定”
}
```
19. **输入对话框**:
- 使用 `window.prompt()` 显示输入对话框。
- 示例：请求用户输入名称。
```javascript
var name = window.prompt("Please enter your name:");
```
20. **导航至 URL**:
- 使用 `window.location.href` 导航到指定的 URL。
- 示例：导航到指定的 URL。
```javascript
window.location.href = "https://www.example.com";
```
21. **获取表单数量**:
- 使用 `document.forms.length` 获取页面上表单的数量。
- 示例：获取页面上的表单数量。
```javascript
var count = document.forms.length;
```
22. **关闭文档写入**:
- 使用 `document.close()` 结束文档的写入。
- 示例：关闭文档写入。
```javascript
document.close();
```
23. **字符串拼接**:
- 使用 `+=` 运算符可以将字符串添加到现有字符串末尾。
- 示例：将字符串 "world" 添加到 "hello" 后面。
```javascript
var str = "hello";
str += "world";
```
24. **创建 DOM 元素**:
- 使用 `document.createElement()` 创建新的 DOM 元素。
- 使用 `document.createTextNode()` 创建新的文本节点。
- 示例：创建一个新的 `<div>` 元素。
```javascript
var div = document.createElement("div");
```
25. **获取 DOM 元素**:
- 使用 `document.getElementById()` 通过元素 ID 获取元素。
- 示例：获取一个 ID 为 "myDiv" 的元素。
```javascript
var element = document.getElementById("myDiv");
```
26. **清空表单字段**:
- 遍历表单元素并清空文本字段。
- 示例：清空所有文本字段。
```javascript
var form = document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == "text") {
form.elements[i].value = "";
}
}
```
27. **检查复选框状态**:
- 使用 `.checked` 属性检查复选框的状态。
- 示例：检查名为 "checkThis" 的复选框是否被选中。
```javascript
var isChecked = document.forms[0].checkThis.checked;
```
28. **获取复选框组的数量**:
- 使用 `.length` 属性获取复选框组的数量。
- 示例：获取名为 "groupName" 的复选框组的数量。
```javascript
var count = document.forms[0].groupName.length;
```
29. **获取下拉列表的选定值**:
- 使用 `.options` 属性访问下拉列表选项。
- 使用 `.selectedIndex` 获取当前选定的索引。
- 示例：获取名为 "selectName" 的下拉列表的选定值。
```javascript
var value = document.forms[0].selectName.options[document.forms[0].selectName.selectedIndex].value;
```
30. **创建字符串对象**:
- 使用 `new String()` 创建新的字符串对象。
- 示例：创建一个字符串对象。
```javascript
var myString = new String("This is lightsword");
```
31. **字符串大小写转换**:
- 使用 `.toUpperCase()` 方法将字符串转换为大写。
- 使用 `.toLowerCase()` 方法将字符串转换为小写。
- 示例：将字符串 "hello world" 转换为大写。
```javascript
var str = "hello world".toUpperCase();
```
32. **字符串查找**:
- 使用 `.indexOf()` 方法查找子字符串的位置。
- 示例：检查字符串 "hello world" 是否包含 "world"。
```javascript
var contains = "hello world".indexOf("world") != -1;
```
33. **获取字符串字符**:
- 使用 `.charAt(index)` 方法获取字符串中指定位置的字符。
- 示例：获取字符串 "hello" 的第 2 个字符。
```javascript
var char = "hello".charAt(1);
```
34. **截取字符串**:
- 使用 `.substring(startIndex, endIndex)` 方法截取字符串的一部分。
- 示例：从字符串 "hello world" 截取 "world"。
```javascript
var substr = "hello world".substring(6, 11);
```
35. **数学函数**:
- `Math.PI`: 圆周率 π。
- `Math.SQRT2`: 2 的平方根。
- `Math.max(value1, value2)`: 返回两个值中的较大者。
- `Math.pow(base, exponent)`: 计算幂。
- `Math.round(value)`: 四舍五入。
- `Math.floor(Math.random() * (n + 1))`: 生成 0 到 n 之间的随机整数。
- 示例：计算 2 的 5 次方。
```javascript
var result = Math.pow(2, 5);
```
36. **日期操作**:
- 使用 `new Date()` 创建日期对象。
- 示例：获取当前日期和时间。
```javascript
var today = new Date();
```
37. **日期属性**:
- 使用 `.getTime()` 获取自 1970 年 1 月 1 日以来的毫秒数。
- 使用 `.getYear()` 获取年份。
- 使用 `.getFullYear()` 获取四位数的年份。
- 使用 `.getMonth()` 获取月份（0-11）。
- 使用 `.getDate()` 获取日期（1-31）。
- 使用 `.getDay()` 获取星期几（0-6）。
- 使用 `.getHours()` 获取小时。
- 使用 `.getMinutes()` 获取分钟。
- 使用 `.getSeconds()` 获取秒。
- 使用 `.setTime(value)` 设置时间。
- 使用 `.setYear(value)` 设置年份。
- 使用 `.setMonth(value)` 设置月份。
- 使用 `.setDate(value)` 设置日期。
- 示例：获取当前日期。
```javascript
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
```
以上涵盖了 JavaScript 中一些最基本的操作函数及其应用场景，这些函数对于初学者来说是十分重要的基础知识。随着学习的深入，开发者还可以进一步探索更高级的功能和技术。
