贝拉，生日快乐## ps.JS零碎知识点20230714
## ps.JS零碎知识点
## 1。 +=: x += y等效于 x = x + y
#### 加法赋值运算符
```java
下面的示例演示 += 运算符的用法：
int i = 5;
i += 9;
Console.WriteLine(i);
// Output: 14
string story = "Start. ";
story += "End.";
Console.WriteLine(story);
// Output: Start. End.
Action printer = () => Console.Write("a");
printer(); // output: a
Console.WriteLine();
printer += () => Console.Write("b");
printer(); // output: ab
```
## 2。 i++ 与 ++i 的主要区别有两个：
### 2.1、i++ 直接返回原来的值，++i 返回加1后的值。
### 2.2、i++ 不能作为左值，而++i 可以。
#### 一般来说，左值是可以放到赋值符号左边的变量。
例如对于下面一个题目：
##### int a = 4; //分别执行以下五种情况
##### (1) a += a++; //a=?
##### (2) a += ++a; //a=?
##### (3) ++a += a; //a=?
##### (4) ++a += a++; //a=?
##### (5) ++a += ++a; //a=?
相信很多人对这个问题都会头大。没办法，兵来将挡，水来土掩，我们必须找个办法来应付此类题目。
大家都知道，
a++表示先返回a的值，然后再对a执行+1操作，
++a表示先对a执行+1操作，然后再返回a的值（此时a是加1后的值了）。
这样单独容易理解。但是再加上+=等操作符，可能就不会那么明朗了（如上题中的（3）、（4）、（5）小问）。
一个很好的记忆方法：
### 2.3前缀++a/--a优先级大于所有数值运算符
### 2.4后缀a++/a--优先级小于所有数值运算符
牢记这个，就不会出错啦。例如对上面的例子：
(1) a += a++;
后缀++的优先级小于+=的优先级，因此先执行a+=a的操作，得8，然后再执行a++的操作，结果为9
(2) a += ++a;
前缀++的优先级大于+=的优先级，因此先执行++a的操作，得5，然后再执行a+=a的操作，结果为10
(3) ++a += a;
前缀++的优先级大于+=的优先级，因此先执行++a的操作，得5，然后再执行a+=a的操作，结果为10
(4) ++a += a++;
优先级：前缀++ > += > 后缀++，先执行++a得5，然后执行a+=a得10，最后执行a++得11
(5) ++a += ++a;
对于同时前缀的，顺序是从左往右，因此先执行左边的++a得5，然后执行右边的++a得6，最后执行a+=a得12
### ps社长的题有点意思：
```javascript
var y = 10 % 7;
var x = y % 2;
//y=3 x=1 ;
alert(--y!= ++x );
//y 2 x 2 flase
alert(y);alert(x);
alert(y-- ==x++ )//弹出 true
// 2=2 y1 x3
alert(y);alert(x);
var y = 10 % 7;
var x = y % 2;
alert(--y!= ++x || y-- ==x++ );//false true 弹出 true
```
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
var arr = document.getElementsByName("checkbox1");
function checkAll() {
for (var i = 0; i <
arr.length;
i++
) {
arr[i].checked = true;
}
}
function cancelAll() {
for (var i = 0; i < arr.length;
i++
) {
arr[i].checked = false;
}
}
function checkOdd() {
for (var i = 0; i < arr.length; i++) {
if ((i + 1) % 2 !== 0
) {
arr[i].checked = true;
} else {
arr[i].checked = false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="checkbox1">选项1
<input type="checkbox" name="checkbox1">选项2
<input type="checkbox" name="checkbox1">选项3
<input type="checkbox" name="checkbox1">选项4
<input type="checkbox" name="checkbox1">选项5
<br/>
<input type="button" onclick="checkAll()" value="全选">
<input type="button" onclick="cancelAll()" value="全不选">
<input type="button" onclick="checkOdd()" value="选中奇数">
</body>
</html>
```
### for循环
for 循环是一种常用的循环结构，用于重复执行特定的代码块一定次数。它的基本语法如下：
```for (初始化; 条件; 迭代) {
// 循环体
}
```
- 初始化：在循环开始前执行的语句，用于设置循环的初始状态，通常用于定义循环变量的初始值。
- 条件：每次迭代前都会进行判断的表达式，如果条件为真，则继续执行循环体；如果条件为假，则跳出循环。
- 迭代：每次循环体执行完后执行的语句，用于更新循环变量的值。
```javascript
<script>
var i=0;
for (++i; i < 5; i++) {
console.log(i); // 打印当前循环变量的值
}
</script>
```
0
1
2
3
4
### continue;
continue 是 JavaScript 中的一种控制流语句，用于跳过当前循环中的剩余代码并进入下一次迭代。它通常用于循环语句中，如 for 循环或 while 循环。
当程序执行到 continue 语句时，会立即结束当前循环的当前迭代，并跳到下一次迭代开始的地方。换句话说，它会终止当前迭代的剩余代码，然后继续执行下一次迭代。
以下是一个示例，展示了 continue 语句的使用：
```javascript
for (var i = 0; i < 5; i++) {
if (i === 2) {
continue;
}
console.log(i);
}
```
上述代码中，我们使用 for 循环打印了数字 0 到 4，但当 i 的值为 2 时，使用 continue 跳过了当前迭代，所以数字 2 并未被输出。输出结果如下：
Copy code
0
1
3
4
``
在这个示例中，当 i 等于 2 时，continue 语句被执行，导致剩余的代码不被执行，直接跳到下一次迭代。因此，数字 2 并未被打印出来。
需要注意的是，continue 只会跳过当前循环的剩余代码，不会终止整个循环。如果希望完全终止循环并跳出循环体，可以使用 break 语句。
```javascript
<script>
var num = 10;
for (var i = 0; i < num; i++) {
if (i > 3 && i < 9) {
alert(++i);
} else {
alert(i++);
}
i++;
}
```
```
0
3
7
9
```
打印乘法表
```javascript
for (var j = 1; j < 10; j++) {
var str = '';
for (var k = 1; k < 10; k++) {
str = str + k + '*' + j + '=' + k * j + ' ';
}
console.log(str);
}
```
参数 ：
```html
<script>
function func1(a){
return "hello";
}
var aaa =func1(1);
alert(aaa);
</script>
```
弹出
hello
- javscript函数的参数是可变长的，重名的函数会覆盖之前的函数日
- 函数体中可以调用其它函数,函数可以被无上限次调用，
- 有返回值的函数，不使用变量接收也不会报错
- 没有返回值的函数，使用变量接收不会报错，但是默认赋值undefined
- jayasgript不需要进行参数和返回值类型的声明，其它编程语言通常需要声明
- 函数(函数 かんすう)也称为方法(メソード).method
- 有参数的函数原则上讲，参数个数没有上限
- return语句会中止有参函数的运行，如果希望无返回值函数结束运行，可以使用return;
- 传入参数大小/小于定义参数个数时，程序不会报错。
- 函数体中，传入参数却未使用的情况，程序不会报错
- 参数个数不同的情况下，函数名可以重复。
- 函数体中可以调用其它函数,函数可以被无上限次调用
- JavaScript当出现错误时，不会往下运行
- JavaScript函数传入参数个数小于/大于定于函数参数个数时不报错
### ps 5 页面控制事件
#### 1- onload事件(加载完成时操作)
body
```javascript
<!DOCTYPE html>
<html>
<head>
<script>
function doSthAfterLoad() {
document.getElementById("name").value = "ana";
}
</script>
</head>
<body onload="doSthAfterLoad()">
<!--虽然doSthAfterLoad()写在前面，但是使用onload，等所有body加载完成后，再执行-->
<input type="text" id="name">
</body>
</html>
```
#### 2- onchange事件(改变)
###### 普通文本框(text)
###### 下拉框(select)
###### 单选按钮(radio)
###### 复选按钮(checkbox)
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function onChangeName() {
alert(123);
}
</script>
</head>
<body>
<input type="text" id="name" onchange="onChangeName();">
<select id="province" onchange="onChangeName()">
<option>四川省</option>
<option>海南省</option>
<option>山东省</option>
</select>
</body>
</html>
```
单选框：
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function onChangeGender() {
alert("性别被改变");
}
</script>
</head>
<body>
性别：
男<input type="radio" name="gender" onchange="onChangeGender();">
女<input type="radio" name="gender" onchange="onChangeGender();" checked>
</body>
</html>
```
#### 3- onclick事件(点击)增强按钮！！
##### 按钮（button）
###### 1<input type="button"value="按钮1" onclick="onClickButtn()"></input>
###### 2<input type="submit" value="按钮2" onclick="onClickButtn()" onclick="aaa();">
<!--//只有 type="submit"的 input元素 有提交form表单的功能-->
###### 3<button onclick="onClickButtn()">按钮3</button>
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function onClickButtn() {
alert("俺被点击了");
}
</script>
</head>
<body>
<input type="button"
value="按钮1" onclick="onClickButtn()"></input>
<input type="submit"
value="按钮2" onclick="onClickButtn()" onclick="aaa();">
<!--//只有 type="submit"的 input元素 有提交form表单的功能-->
<button onclick="onClickButtn()">按钮3</button>
<!--将三个按钮都添加-->
</body>
</html>
```
页面控件事件
```javascript
< input
type = "button"
onclick = "aaa();" >
< input
type = "submit"
onclick = "aaa();" >
< button
onclick = "aaa)," > < /button>
```
如果需要表单form点击后，检查判断用户名是否为空+检查判断密码是否6位 然后不被提交后，可以用onsubmit返回submit为false
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function aaa() {
alert("触发提交a");
return true;
}
function bbb() {
alert("触发提交b");
}
</script>
</head>
<body>
<!--如果需要表单form点击后，检查判断用户名是否为空+检查判断密码是否6位 然后不被提交后，可以用onsubmit返回submit为false-->
<form action="https://www.baidu.com" onsubmit="return aaa();">
速速点击 <input type="submit" onclick="bbb();" value="value=点它！">
</form>
</body>
</html>
```
##### 单选按钮(radio)
##### 复选按钮(checkbox)
##### 普通文本框(text)
##### 下拉框(select)
##### 普通文本框(text)
```javascript
```
#### 4- onblur事件(失去焦点)
普通文本框(text)
#### 5- onfocus事件(得到焦点)
普通文本框(text)
#### 6- onsubmit事件(提交表单)
form
### 6.DOM元素操作
### 6.1数组
#### 1.1 定义
var array = [1, 2, 3, 4]
#### 1.2常用方法
- array.length=>得到数组长度
- array[从0开始的下标]=>得到具体位置的元素
- array[从0开始的下标] = 要赋的值 => 更新具体元素的值
- array.push(5);=> 住数组末尾添加元素[5]
- array.pop() == > 删除(冒泡)最后一个元素
- javascript数组虽然可以存放不同类型的元素，但是推荐存放相同类型的元素
### 6.2控件的操作
### 2.1常见取得控件的3种方法
- var object = documentgetElementById以("控件id")=>通过ID取得唯一控件var
- var objects =document.qetElementsByName("控件组name")=>
通过NAME取得控件组 单选按钮 多选按钮
- var var =objects = document.getElementsByTagName("标签名")=>通过标签名取得控件组
### 2.2遍历控件组
```javascript
var objects = document.getElementsByName("控件组name");
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
}
```
### 2.3 取得控件属性
##### 控件.name
##### 控件.id
##### 控件.type
##### 控件.value
##### 控件.disabled
##### 控件.readonly
##### getAttribute("属性名")
### 2.4 更改控件属性
##### 控件.控件属性=要赋的值;
##### setAttribute("属性名"要赋的值);
### 2.5 节点操作 （爬虫）
##### - 查看更改html内容 innerHTML
##### - 找到父亲节点parentNode
##### - 找到所有子节点children
##### - 找到第一个子节点firstChild
##### - 找到下一个同级节点nextElementSibling；包括注释，空格等节点nextsibling
##### - 创建属性节点
var attributeNode= document.createAttribute("name");
attributeNode.value ="333";
欲添加属性的节点 setAttributeNode(attributeNode);
##### - 创建元素节点
var aaa = document.getElementByld("aaa");
var node= document. createElement("td");
var t=document.createTextNode("333");
node.appendChild(t):
aaa.appendChild(node);
