貝拉，生日快樂## 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 的主要區(qū)別有兩個：
### 2.1、i++ 直接返回原來的值，++i 返回加1后的值。
### 2.2、i++ 不能作為左值，而++i 可以。
#### 一般來說，左值是可以放到賦值符號左邊的變量。
例如對于下面一個題目：
##### int a = 4; //分別執(zhí)行以下五種情況
##### (1) a += a++; //a=?
##### (2) a += ++a; //a=?
##### (3) ++a += a; //a=?
##### (4) ++a += a++; //a=?
##### (5) ++a += ++a; //a=?
相信很多人對這個問題都會頭大。沒辦法，兵來將擋，水來土掩，我們必須找個辦法來應(yīng)付此類題目。
大家都知道，
a++表示先返回a的值，然后再對a執(zhí)行+1操作，
++a表示先對a執(zhí)行+1操作，然后再返回a的值（此時a是加1后的值了）。
這樣單獨容易理解。但是再加上+=等操作符，可能就不會那么明朗了（如上題中的（3）、（4）、（5）小問）。
一個很好的記憶方法：
### 2.3前綴++a/--a優(yōu)先級大于所有數(shù)值運算符
### 2.4后綴a++/a--優(yōu)先級小于所有數(shù)值運算符
牢記這個，就不會出錯啦。例如對上面的例子：
(1) a += a++;
后綴++的優(yōu)先級小于+=的優(yōu)先級，因此先執(zhí)行a+=a的操作，得8，然后再執(zhí)行a++的操作，結(jié)果為9
(2) a += ++a;
前綴++的優(yōu)先級大于+=的優(yōu)先級，因此先執(zhí)行++a的操作，得5，然后再執(zhí)行a+=a的操作，結(jié)果為10
(3) ++a += a;
前綴++的優(yōu)先級大于+=的優(yōu)先級，因此先執(zhí)行++a的操作，得5，然后再執(zhí)行a+=a的操作，結(jié)果為10
(4) ++a += a++;
優(yōu)先級：前綴++ > += > 后綴++，先執(zhí)行++a得5，然后執(zhí)行a+=a得10，最后執(zhí)行a++得11
(5) ++a += ++a;
對于同時前綴的，順序是從左往右，因此先執(zhí)行左邊的++a得5，然后執(zhí)行右邊的++a得6，最后執(zhí)行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="選中奇數(shù)">
</body>
</html>
????????
```
### for循環(huán)
for 循環(huán)是一種常用的循環(huán)結(jié)構(gòu)，用于重復(fù)執(zhí)行特定的代碼塊一定次數(shù)。它的基本語法如下：
```for (初始化; 條件; 迭代) {
? ? // 循環(huán)體
}
```
- 初始化：在循環(huán)開始前執(zhí)行的語句，用于設(shè)置循環(huán)的初始狀態(tài)，通常用于定義循環(huán)變量的初始值。
- 條件：每次迭代前都會進(jìn)行判斷的表達(dá)式，如果條件為真，則繼續(xù)執(zhí)行循環(huán)體；如果條件為假，則跳出循環(huán)。
- 迭代：每次循環(huán)體執(zhí)行完后執(zhí)行的語句，用于更新循環(huán)變量的值。
```javascript
<script>
? ? var i=0;
? ? for (++i; i < 5; i++) {
? ? ? ? console.log(i); // 打印當(dāng)前循環(huán)變量的值
? ? }
</script>
```
0
1
2
3
4
### continue;
continue 是 JavaScript 中的一種控制流語句，用于跳過當(dāng)前循環(huán)中的剩余代碼并進(jìn)入下一次迭代。它通常用于循環(huán)語句中，如 for 循環(huán)或 while 循環(huán)。
當(dāng)程序執(zhí)行到 continue 語句時，會立即結(jié)束當(dāng)前循環(huán)的當(dāng)前迭代，并跳到下一次迭代開始的地方。換句話說，它會終止當(dāng)前迭代的剩余代碼，然后繼續(xù)執(zhí)行下一次迭代。
以下是一個示例，展示了 continue 語句的使用：
```javascript
for (var i = 0; i < 5; i++) {
? ? if (i === 2) {
? ? ? ? continue;
? ? }
? ? console.log(i);
}
```
上述代碼中，我們使用 for 循環(huán)打印了數(shù)字 0 到 4，但當(dāng) i 的值為 2 時，使用 continue 跳過了當(dāng)前迭代，所以數(shù)字 2 并未被輸出。輸出結(jié)果如下：
Copy code
0
1
3
4
``
在這個示例中，當(dāng) i 等于 2 時，continue 語句被執(zhí)行，導(dǎo)致剩余的代碼不被執(zhí)行，直接跳到下一次迭代。因此，數(shù)字 2 并未被打印出來。
需要注意的是，continue 只會跳過當(dāng)前循環(huán)的剩余代碼，不會終止整個循環(huán)。如果希望完全終止循環(huán)并跳出循環(huán)體，可以使用 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);
? ? }
```
參數(shù) ：
```html
<script>
? ? function func1(a){
? ? ? ? return "hello";
? ? }
? ? var aaa =func1(1);
? ? alert(aaa);
</script>
```
彈出
hello
- javscript函數(shù)的參數(shù)是可變長的，重名的函數(shù)會覆蓋之前的函數(shù)日
- 函數(shù)體中可以調(diào)用其它函數(shù),函數(shù)可以被無上限次調(diào)用，
- 有返回值的函數(shù)，不使用變量接收也不會報錯
- 沒有返回值的函數(shù)，使用變量接收不會報錯，但是默認(rèn)賦值undefined
- jayasgript不需要進(jìn)行參數(shù)和返回值類型的聲明，其它編程語言通常需要聲明
- 函數(shù)(函數(shù) かんすう)也稱為方法(メソード).method
- 有參數(shù)的函數(shù)原則上講，參數(shù)個數(shù)沒有上限
- return語句會中止有參函數(shù)的運行，如果希望無返回值函數(shù)結(jié)束運行，可以使用return;
- 傳入?yún)?shù)大小/小于定義參數(shù)個數(shù)時，程序不會報錯。
- 函數(shù)體中，傳入?yún)?shù)卻未使用的情況，程序不會報錯
- 參數(shù)個數(shù)不同的情況下，函數(shù)名可以重復(fù)。
- 函數(shù)體中可以調(diào)用其它函數(shù),函數(shù)可以被無上限次調(diào)用
-? JavaScript當(dāng)出現(xiàn)錯誤時，不會往下運行??
-? JavaScript函數(shù)傳入?yún)?shù)個數(shù)小于/大于定于函數(shù)參數(shù)個數(shù)時不報錯??
### 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加載完成后，再執(zhí)行-->
<input type="text" id="name">
</body>
</html>
```
#### 2- onchange事件(改變)
######? ? ?普通文本框(text)
######? ? ?下拉框(select)
######? ? ?單選按鈕(radio)
######? ? ?復(fù)選按鈕(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("觸發(fā)提交a");
? ? ? ? ? ? return true;
? ? ? ? }
? ? ? ? function bbb() {
? ? ? ? ? ? alert("觸發(fā)提交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)
#####? ? ?復(fù)選按鈕(checkbox)
#####? ? ?普通文本框(text)
#####? ? ?下拉框(select)
#####? ? ?普通文本框(text)
```javascript
```
#### 4- onblur事件(失去焦點)
? ? 普通文本框(text)
#### 5- onfocus事件(得到焦點)
? ? 普通文本框(text)
#### 6- onsubmit事件(提交表單)
? ? form
? ??
? ??
? ??
###? 6.DOM元素操作
###? 6.1數(shù)組
#### 1.1 定義
? ? var array = [1, 2, 3, 4]
#### 1.2常用方法
- array.length=>得到數(shù)組長度
- array[從0開始的下標(biāo)]=>得到具體位置的元素
- array[從0開始的下標(biāo)] = 要賦的值 => 更新具體元素的值
- array.push(5);=> 住數(shù)組末尾添加元素[5]
- array.pop() == > 刪除(冒泡)最后一個元素
- javascript數(shù)組雖然可以存放不同類型的元素，但是推薦存放相同類型的元素
### 6.2控件的操作
### 2.1常見取得控件的3種方法
- var object = documentgetElementById以("控件id")=>通過ID取得唯一控件var
- var objects =document.qetElementsByName("控件組name")=>
? ? 通過NAME取得控件組 單選按鈕? 多選按鈕
- var var =objects = document.getElementsByTagName("標(biāo)簽名")=>通過標(biāo)簽名取得控件組?
### 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 節(jié)點操作 （爬蟲）
##### - 查看更改html內(nèi)容 innerHTML
##### - 找到父親節(jié)點parentNode
##### - 找到所有子節(jié)點children
##### - 找到第一個子節(jié)點firstChild
##### - 找到下一個同級節(jié)點nextElementSibling；包括注釋，空格等節(jié)點nextsibling
##### - 創(chuàng)建屬性節(jié)點?
var attributeNode= document.createAttribute("name");
attributeNode.value ="333";
欲添加屬性的節(jié)點 setAttributeNode(attributeNode);
##### - 創(chuàng)建元素節(jié)點
var aaa = document.getElementByld("aaa");
var node= document. createElement("td");
var t=document.createTextNode("333");
node.appendChild(t):
aaa.appendChild(node);
