JS map/set函數(shù)對象面向?qū)ο驜OM表單JQuery#20230714
## 3。js中 !==和?!=的區(qū)別
### 1、用法
都是用來比較值的。
### 2、比較過程
#### != 比較時，若類型不同，會償試轉(zhuǎn)換類型；
#### !== 只有相同類型才會比較。
### 3、比較結(jié)果
#### !=返回同類型值比較結(jié)果 ；
#### !== 不同類型不比較，且無結(jié)果，同類型才比較；
### 4、舉例
var num = 1;? ?var str = '1';? ?var test = 1;
test !== num? ? //false test與num類型相同，其值也相同，非運算肯定是false。
num != str? ? //false == 的非運算。
num !== str? ? //true? num 與 str類型不同 意味著其兩者不等，非運算自然是true啦。
####? 3? “2” + 默認(rèn)拼接 - 只能運算?
```javascript
? ? ? ? var a = 2;
? ? ? ? var b = "3";
? ? ? ? alert(a + b) //彈出23
```
### 3.5? Map和Set （ES6）
#### Map:
```javascript
//ES6 Map
? ? ?1 //ES6 Map
? ? ? ? //學(xué)生的成績，學(xué)生的名字
? ? ? ? // var names = ["tom","jack", "haha"];
? ? ? ? // var scores = [100,90,80];
? ? ? ? 8
? ? ? ? 9
? ? ? ? var map = new Map([['tom', 100], ['jack', 90], ["haha',80]]);var name = map.get('tom');?
? ? ? ? //通過key獲得valuemap.set('admin',123456); //新增或修改map.delete("tom");?
? ? ? ? //刪除
```
? ? ? ??
? ? ? ??
? ? ? ??
####? ? Set:無序不重復(fù)的集合
```javascript
? ? ? ??
? ? ? ? set.add(2); //添加
? ? ? ? set.delete(1); //刪除
? ? ? ? console
? ? ? ? .1
? ? ? ? og(set.has(3)); //是否包含某個元素
```
我的練習(xí)：
```javascript
? ? <script>
? ? ? ? var map = new Map([['tom', 100], ['kavl', 90], ['dfg', 67]]);
? ? ? ? var name0 = map.get('dfg');
? ? ? ? map.set('bella', 234567);
? ? ? ? map.delete('dfg');
? ? ? ? console.log('kavl');
? ? ? ? var set = new Set([3, 1, 1, 1, 1, 1]);
? ? ? ? set.add(2);
? ? ? ? set.add(5);
? ? ? ? set.delete(2);
? ? ? ? console.log(set.has(5));
? ? </script>
````
? ??
? ??
? ??
### 3.6 iterator
?
#### 遍歷數(shù)組?
```javascript
//通過for of / for in 下標(biāo)
var arr = [3,4,5]
for (var x of arr){console.1og(x)
```
#### 遍歷map
```javascript
? ? ? ? var map = new Map([["tom", 100], ["jack", 90], ["haha", 80]]);
? ? ? ? for (let x of map) {
? ? ? ? ? ? console.1og(x)
```
#### 遍歷set
? ? ? ? ??
```javascript
? ? ? ? ? ? var set = new Set([5, 6, 7]);
? ? ? ? ? ? for (let x of set) [
? ? ? ? ? ? ? ? console.1og(x)
? ? ? ? ? ? ? ??
```
## 4、函數(shù)?
### 4.1 定義函數(shù)
函數(shù) vs方法? 對象（屬性，方法）
#### 定義方法1?
```java
? ? ? ? function abs(x) {
? ? ? ? ? ? if (x >= 0) {
? ? ? ? ? ? ? ? return x;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return -x;
? ? ? ? ? ? }
? ? ? ? }
```
一旦執(zhí)行到 return 代表函數(shù)結(jié)束，返回結(jié)果!如果沒有執(zhí)行 return，函數(shù)執(zhí)行完也會返回結(jié)果，結(jié)果就是 undefined
#### 定義方法2?
匿名函數(shù)直接賦值給一個變量?
```java
? ? ? ? var abs = function (x) {
? ? ? ? ? ? if (x >= 0) {
? ? ? ? ? ? ? ? return x;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return -x;
? ? ? ? ? ? }
? ? ? ? }
```
function(x）{.....}這是一個匿名函數(shù)。但是可以把結(jié)果賦值給 abs，通過abs 就可以調(diào)用函數(shù)
#### 調(diào)用函數(shù)?
直接abs（10）//10
abs（-10）//10
#### 手動拋出異常
```java
? ? ? ? var abs = function (x) {
? ? ? ? ? ? //手動拋出異常
? ? ? ? ? ? if (typeof x !== 'number') {
? ? ? ? ? ? ? ? throw 'Not a Number ~~';
? ? ? ? ? ? }
? ? ? ? ? ? if
? ? ? ? ? ? (x >= 0) {
? ? ? ? ? ? ? ? return x;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return -x;
? ? ? ? ? ? }
? ? ? ? }
```
#### arugements?
是一個免費贈送的關(guān)鍵字;arguments代表，傳遞進來的所有的參數(shù)，是一個數(shù)組!
```java
? ? ? ? var abs = function (x) {
? ? ? ? ? ? console.log("x====>" + x);
? ? ? ? ? ? for (var i = 0; i < arguments.length; i++) {
? ? ? ? ? ? ? ? console.log(arguments[i]);
? ? ? ? ? ? }
? ? ? ? ? ? if (x >= 0) {
? ? ? ? ? ? ? ? return x;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return -x;
? ? ? ? ? ? }
? ? ? ? }
```
#### rest?
ES6 引入的新特性，獲取除了已經(jīng)定義的參數(shù)之外的所有參數(shù)
rest 參數(shù)只能寫在最后面，必須用 ... 標(biāo)識。
?
```javascript
? ? ? ? function aaa(a, b, ...rest) {
? ? ? ? ? ? console.log(a);
? ? ? ? ? ? console.log(b);
? ? ? ? ? ? console.log(rest);
? ? ? ? }
```
### 4.2 變量的作用域
在javascript中， var 定義變量實際是有作用域的
#### 1 假設(shè)在函數(shù)體中聲明，則在函數(shù)體外不可以使用
? ? ? ? ~(非要想實現(xiàn)的話，后面可以研究一下
? ? ? ? 閉包
```javascript
? ? ? ?function qj() {
? ? ? ? ? ? var x = 1;
? ? ? ? ? ? X = x + 1;
? ? ? ? }
? ? ? ? x = x + 2; //Uncaught ReferenceError: x is not defined
```
#### 2 如果兩個函數(shù)使用了相同的變量名，只要在函數(shù)內(nèi)部，就不沖突
```javascript
?function qj() {
? ? ? ? ? ? var x = 1;
? ? ? ? ? ? x = x + 1;
? ? ? ? }
? ? ? ? ? ? function qj2() {
? ? ? ? ? ? ? ? var x = 'A';
? ? ? ? ? ? ? ? x = x + 1;
? ? ? ? ? ? }
```
#### 3 內(nèi)部函數(shù)可以訪問外部函數(shù)的成員，反之則不行
```javascript
?function qj() {
?
? ? ? ? ? ? var x = 1;
? ? ? ? ? ? function qj2() {
? ? ? ? ? ? ? ? var y = x + 1;//y=2
? ? ? ? ? ? ? ? ? ? }
// 內(nèi)部函數(shù)可以訪問外部函數(shù)的成員，反之則不行
? ? ? ?var z = y + 1;
? ? ? ?// 報錯 找不到 not defined
? ? ? ? }
```
#### 4 就近原則。假設(shè)在javaScript 中 函數(shù)查找變量從自身函數(shù)開始~，由“內(nèi)“向“外“查找.假設(shè)外部存在這個同名的函數(shù)變量，則內(nèi)部函數(shù)會屏蔽外部函數(shù)的變量。
```javascript
? ? ? ? function qj() {
? ? ? ? ? ? var x = 1;
? ? ? ? ? ? function qj2() {
? ? ? ? ? ? ? ? var x = 'A';
? ? ? ? ? ? ? ? console.log('inner' + x);
? ? ? ? ? ? }
? ? ? ? ? ? qj2();
? ? ? ? ? ? //innerA
? ? ? ? ? ? console.log('outer' + x);
? ? ? ? }
? ? ? ? qj();
? ? ? ? //outer1
```
#### 5 js存在變量提升機制，JS引擎遇到var聲明，會將其聲明提到作用域頂端
##### 5.1 全局變量
```javascript
x = 1;
function f(){
console.1og(x);
};
f();//1?
console.1og(x);//1?
```
這個是在JavaScript建立之初就存在的特性。養(yǎng)成規(guī)范: 所有的變量定義都放在函數(shù)的頭部，不要亂放，便于代碼維護;
#####? 5。2全局函數(shù)
```javascript
//全局變量 定義在函數(shù)之外的 就是全局變量??
x = 1;
I
function fO fconsole.1og(x);
2fO;
console.1og(x);
```?
##### 5.2 全局對象 window
變量是對象的變量，變量都要綁定在對象上。
而默認(rèn)所有的全局變量，都會自動綁定在 window對象下;
```javascript
var x ='xxx';
alert(x);
alert(window.x);
// 默認(rèn)所有的全局變量，都會自動綁定在 window對象下;
```
##### 5.3alert這個函數(shù)本身也是一個 window 變量
```javascript
? ? ? ?var x = 'xxx';
? ? ? ? window.alert(x);
? ? ? ? var old_alert = window.alert;
? ? ? ? //old_alert(x);
? ? ? ? window.alert = function () {
? ? ? ? };
? ? ? ? // 發(fā)現(xiàn) alert() 失效了 I
? ? ? ? window.alert(123);
? ? ? ? //恢復(fù)
? ? ? ? window.alert = old_alert;
? ? ? ? window.alert(456);
```
Javascript 實際上只有一個全局作用域，任何變量 (函數(shù)也可以視為變量)，假設(shè)沒有在函數(shù)作用范圍內(nèi)找到，就會向外查找，如果在全局作用域都沒有找到，報錯RefrenceError
##### 5，4 規(guī)范
由于我們所有的全局變量都會綁定到我們的 window 上。如果不同的is 文件，使用了相同的全局變量，沖突~>如果能夠減少沖突?
jQuery.XXX
$.XXX
```javascript
? ? ? // 唯一全局變量
? ? ? ? var Zyy = {};
? ? ? ? // 定義全局變量
? ? ? ? Zyy.name = 'kuangshen', Zyy.add = function (a, b) {
? ? ? ? ? ? return
? ? ? ? ? ? a + b;
? ? ? ? }
? ? ? ??
? ? ? ??
```
把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突的問題
jQuery
####? 7 局部作用域let
```javascript
? ? ? ? function aaa() {
? ? ? ? ? ? for (var i = 0; i < 100; i++) {
? ? ? ? ? ? ? ? console.log(i)
? ? ? ? ? ? }
? ? ? ? ? ? console.log(i + 1); //問題? i 出了這個作用域還可以使用
? ? ? ? }
```
ES6. let 關(guān)鍵字，解決局部作用域沖突問題
```javascript
? ? ? ? function aaa() {
? ? ? ? ? ? for (let i = 0; i < 100; i++) {
? ? ? ? ? ? ? ? console.log(i)
? ? ? ? ? ? }
? ? ? ? ? ? console.log(i + 1);?
? ? ? ? ? ? //uncaught ReferenceError: i is not defined
? ? ? ? }
? ? ? ??
? ? ? ??
? ? ? ??
? ? ? ??
```
在 ES6 引入了常量關(guān)鍵字const
```javascript
const PI ='3.14';// 只讀變量
console.1og(PI);
PI ='123'， // TypeError: Assignment to constant variable.
console.1og(PI);
```
### 4.3、 方法的定義和調(diào)用?
#### 定義方法
##### 1? 方法就是把函數(shù)放在對象的里面，對象只有兩個東西 : 屬性和方法
```javascript
? ? ? ? var zyy = {
? ? ? ? ? ? name: '王千',
? ? ? ? ? ? bitrh: 1996,
? ? ? ? ? ? // 方法
? ? ? ? ? ? age: function () {
? ? ? ? ? ? ? ? // 今年 - 出生的年
? ? ? ? ? ? ? ? var now = new Date().getFullYear();
? ? ? ? ? ? ? ? return now - this.bitrh;
? ? ? ? ? ? }
? ? ? ? }
//屬性 zyy.name
//方法，一定要帶zyy. age()
```
##### 2 或者 將方法分開寫，讓對象的屬性值調(diào)用方法。
```javascript
? ? ? ? function getAge() {
? ? ? ? ? ? // 今年 - 出生的年
? ? ? ? ? ? var now = new Date().getFullYear();
? ? ? ? ? ? return now - this.bitrh;
? ? ? ? }
? ? ? ? var zyy = {
? ? ? ? ? ? name: '王千',
? ? ? ? ? ? bitrh: 1996,
? ? ? ? ? ? // 方法
? ? ? ? ? ? age: getAge
? ? ? ? }
? ? ? ??
```
java ：this是無法指向的，是默認(rèn)指向調(diào)用它的那個對象;
javascript：
##### 3 apply 在js 中可以控制 this 指向
```javascript
? ? ? function getAge() {
? ? ? ? ? ? // 今年 - 出生的年
? ? ? ? ? ? var now = new Date().getFullYear();
? ? ? ? ? ? return now - this.bitrh;
? ? ? ? }
? ? ? ? var zyy = {
? ? ? ? ? ? name: '王千',
? ? ? ? ? ? bitrh: 1996,
? ? ? ? ? ? // 方法
? ? ? ? ? ? age: getAge
? ? ? ? }
? ? ? ? var? ls= {
? ? ? ? ? ? name: '李四',
? ? ? ? ? ? bitrh: 2000,
? ? ? ? ? ? // 方法
? ? ? ? ? ? age: getAge
? ? ? ? }
? ? ? ? getAge.apply(b,[]);
? ? ? ? //this，指向了ls，參數(shù)為空
```
#### 調(diào)用?
getAge.apply(ls,[])
VS
ls.age()?
主動調(diào)用 和被動調(diào)用?
## 5.內(nèi)部對象?
?標(biāo)準(zhǔn)對象
```java
?typeof 123
? ? ? ? "number"
? ? ? ??
? ? ? ? typeof '123'
? ? ? ? "string"
? ? ? ? typeof true
? ? ? ? "boolean"
? ? ? ? typeof NaN
? ? ? ? "number"
? ? ? ? typeof []
? ? ? ? "object"
? ? ? ? typeof {}
? ? ? ??
? ? ? ? "object"
? ? ? ? typeof Math.abs
? ? ? ? "function"
? ? ? ? typeof undefined
? ? ? ? "undefined"
```
### 5.1 Date 日期類型?
?```javascript
?
? ? ? ? var now = new Date();//sat Jan 04 2020 10:47:06 GMT+0800 (中國標(biāo)準(zhǔn)時間)now.getFu11Year(; //年
? ? ? ? now.getMonth();// 月0~11 代表月now.getDate(); // 日now.getDay(;// 星期幾now.getHours(); // 時
? ? ? ? now.getMinutes(;// 分now.getSeconds();// 秒
? ? ? ? now.getTime();// 時間戳 全世界統(tǒng)一 1970 1.1 0:00:00毫秒數(shù)
? ? ? ? console.1og(new Date(1578106175991)) //時間戳轉(zhuǎn)為時間
? ? ? ? now = new Date(1578106175991)sat Jan 04 2020 10:49:35 GMT+0800 (中國標(biāo)準(zhǔn)時間)
? ? ? ? now.toLocalestring?
? ? ? ? // 注意，調(diào)用是一個方式，不是一個屬性!f toLocalestring() f [native code] ]now.toLocalestring()"2020/1/4 上午10:49:35"
? ? ? ? now.toGMTstring(
? ? ? ? ? ? "sat，04 Jan 2020 02:49:35 GMT"
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
?Date()
如何使用 Date() 方法獲得當(dāng)日的日期。
Date.getFullYear()
使用 getFullYear() 獲取年份。
Date.getTime()
Date.getTime() 返回從 1970 年 1 月 1 日至今的毫秒數(shù)。
Date.setFullYear()
如何使用 setFullYear() 設(shè)置具體的日期。
Date.toUTCString()
如何使用 toUTCString() 將當(dāng)日的日期（根據(jù) UTC）轉(zhuǎn)換為字符串。
Date.getDay()
如何使用 getDay() 和數(shù)組來顯示星期，而不僅僅是數(shù)字。
Date.Display a clock
如何在網(wǎng)頁上顯示一個鐘表。
```
?
### 5.2 JSON
json 是什么
早期，所有數(shù)據(jù)傳輸習(xí)慣使用 XML 文件!
·JSONUavaScript Object Notation,J 對象簡譜)是一種輕量級的數(shù)據(jù)交換格式簡潔和清晰的層次結(jié)構(gòu)使得JSON 成為理想的數(shù)據(jù)交換語言.易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率
在JavaScript 一切皆為對象、任何is 支持的類型都可以用SON來表示
格式:
###### 對象都用 {}
###### 數(shù)組都用[]
###### 所有的鍵值對 都是用 key:value
#### 對象轉(zhuǎn)化為json字符串?
?var user = {
? ? ? ? ? ? name: "wangqian",
? ? ? ? ? ? age: 3,
? ? ? ? ? ? sex: '女'
? ? ? ? }
? ? ? ? {"name":"qinjiang"，"age":3,"sex":"男"]
? ? ? ? var jsonUser = JSON.stringify(user);
? ? ? ??
? ?調(diào)用：jsonUser? ? ??
? ?
? ? ? ??
####? ? ?json 字符串轉(zhuǎn)化為對象 參數(shù)為 json 字符串
? ? ? ? var obj = JSON.parse('{"name":"wangqian","age":3, "sex":"女"}');
調(diào)用：
console.log(obj)
### 5.3、Ajax
。原生的js寫法 xhr 異步請求。jQuey 封裝好的方法 $(“#name").ajax("axios 請求
## 6. 面向?qū)ο缶幊?class繼承
javascript、Java、c#。。。。面向?qū)ο?javascript有些區(qū)別!
##### 類: 模板 原型?
##### 對象: 具體的實例
在JavaScript這個需要大家換一下思維方式!
原型:
###? ?6.1? 原型? ?xiaoming.__proto__ = Bird;
```javascript
? ? ? ? var Student = {
? ? ? ? ? ? name: "qinjiang",
? ? ? ? ? ? age: 3,
? ? ? ? ? ? run: function () {
? ? ? ? ? ? ? ? console.log(this.name + " run....");
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? var xiaoming = {
? ? ? ? ? ? name: "xiaoming";
? ? ? ? }
? ? ? ? //原型對象
? ? ? ? xiaoming.__proto__ = Student;
? ? ? ? var Bird = {
? ? ? ? ? ? fly: function () {
? ? ? ? ? ? ? ? console.log(this.name + " fly....");
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? // 小明的原型 是 student
? ? ? ? xiaoming.__proto__ = Bird;
```
### 6.2 class 繼承
關(guān)鍵字，是在ES6引入的class
##### 定義一個類，屬性，方法
class 示例
```javascript?
? ?//定義一個學(xué)生類 屬性和方法
? ? ? ? class Student {
? ? ? ? ? ? constructor(name) {
? ? ? ? ? ? ? ? this.name = name;
? ? ? ? ? ? }
? ? ? ? ? ? hello() {
? ? ? ? ? ? ? ? alert("hello")
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? class XiaoStudent extends Student {
? ? ? ? ? ? constructor(name, grade) {
? ? ? ? ? ? ? ? super(name);
? ? ? ? ? ? ? ? this.grade = grade;
? ? ? ? ? ? }
? ? ? ? ? ? myGrade() {
? ? ? ? ? ? ? ? alert('hi 我是一名小學(xué)生')
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var xi = new XiaoStudent("xi");
// //調(diào)用? ：? ? ?xi.hello()
//? ? ? ? ?xi.myGrade()
//? ? ? ? ?xi.name
```
```javascript
? ? ? ? //ES6之后
? ? ? ? //定義一個學(xué)生類 屬性和方法
? ? ? ? class Student {
? ? ? ? ? ? constructor(name) {
? ? ? ? ? ? ? ? this.name = name;
? ? ? ? ? ? }
? ? ? ? ? ? hello() {
? ? ? ? ? ? ? ? alert("hello")
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? var xiaoming = new Student("xiaoming");
? ? ? ? //調(diào)用： xiaoming.hello(); 對象小明的hello方法
? ? ? ? //調(diào)用：? ? ?xiaoming.name 對象小明的name屬性
? ? ? ? var lisi = new Student("lisi");
? ? ? ? //lisi.hello()
? ? ? ? //? ? ?lisi.name
? ? ? ??
? ? ? ??
```
```javascript
console.log(xi);
?XiaoStudent {name: 'xi', grade: undefined}grade: undefinedname: "xi"[[Prototype]]: Studentconstructor: class XiaoStudentmyGrade: ? myGrade()[[Prototype]]: Objectconstructor: class Studenthello: ? hello()[[Prototype]]: Object
```
## 7 操作BOM對象（重點）
### 7，1 瀏覽器介紹
JavaScript 和瀏覽器關(guān)系?
#### JavaScript 誕生就是為了能夠讓他在瀏覽器中運行!
#### BOM:瀏覽器對象模型
IE6~11
Chrome
Safari
FireFox
Opera
三方
。QQ瀏覽器
。360瀏覽器
### 7.2window 窗口
window 代表瀏覽器窗口
```javascript
window.alert(1)
undefined
window.innerHeight
window.innerwidth
window.outerHeight
window.outerwidth
// 大家可以調(diào)整瀏覽器窗口試試...
```
### 7.3 navigator 不建議用
```javascript
navigator. appName
“Netscape"
navigator.appVersion
"5.0 (windows NT 10.0; wOW64) AppleWebKit/537.36 (KHTML，1ike Gecko)chrome /63.0.3239.132 safari /537.36"
navigator.userAgent"
Mozi11a/5.0 (windows NT 10.0;wOW64)ApplewebKit/537.36 (KHTML，1ikeGecko) chrome /63.0.3239.132 Safari/537.36"
navigator.platform
"win32"
數(shù)時候，我們不會使用
對象，因為會被人為修改.navigator
```
### 7.4 screen 屏幕信息?
screen.width
57
screen.height
677
### 7.5 location （重要）
```html
location
location 代表當(dāng)前頁面的URL信息
host: "www. baidu.com"
href:"https ://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新網(wǎng)頁
// 設(shè)置新的地址
1ocation .assign('https://blog. zyy.com/')
```
###? 7.6 document 內(nèi)容 表單
#### 1 document.title
'新標(biāo)簽頁'
#### 2 document.title="haohao"
'haohao'
#### 3 獲取具體的文檔樹節(jié)點 document.getElementById('app');
```javascript
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <script>
? ? </script>
</head>
<body>
<dl id="app">
? ? <dt>Java</dt>
? ? <dd>JavaSE</dd>
? ? <dd>JavaEE</dd>
</dl>
<script>
? ? var dl = document.getElementById('app');
</script>
</body>
</html>
```
### 7.7 獲取cookie??
##### 1 獲取 cookie
document.cookie
guid=111872281.88375976493059340.1578110638877.133;monitor_count=1"
##### 2 劫持 cookie 原理
www.taobao.com
<script src=""aa.js"></script>
<!--惡意人員;獲取你的cookie上傳到他的服務(wù)器-->
##### 服務(wù)器端可以設(shè)置 cookie: httpOnly
###? 7.8 history瀏覽器的歷史記錄
history 代表瀏覽器的歷史記錄
history.back() //后退
history.forward() //前進
## 8 操作DOM對象（對象）增刪改查?
### 8.1核心
瀏覽器網(wǎng)頁就是一個Dom 樹形結(jié)構(gòu)!
#### 更新:更新Dom節(jié)點
#### 遍歷dom節(jié)點: 得到Dom節(jié)點
#### 刪除: 刪除一個Dom節(jié)點
#### 添加: 添加一個新的節(jié)點要操作一個Dom節(jié)點，就必須要先獲得這個Dom節(jié)點
### 8.2獲得dom節(jié)點
對應(yīng)css選擇器
#### 1標(biāo)簽document.getElementsByTagName('h1');
? ? ?var h1 = document.getElementsByTagName('h1');
#### 2通過元素iddocument.getElementById('p1');
? ? var p1 = document.getElementById('p1');
#### 3通過類名document.getElementsByClassName('p2')
? ? var p2 = document.getElementsByClassName('p2');
#### 4獲取夫類的節(jié)點后.children獲取所有子元素
? ? var father = document.getElementById('father');
? ? ?var childrens =father.children;
4以下是源代碼：
```javascript
<body>
<div id="father">
? ? <h1>標(biāo)題一</h1>
? ? <p id="p1">p1</p>
? ? <p>p2</p>
</div>
<script>
? ? //對應(yīng)css選擇器
? ? var h1 = document.getElementsByTagName('h1');
? ? var p1 = document.getElementById('p1');
? ? var p2 = document.getElementsByClassName('p2');
? ? var father = document.getElementById('father');
? ? ?var childrens =father.children;
? ? /*
? ? * father.children
HTMLCollection(3)[h1, p#p1, p.p2, p1: p#p1]? ? ?
* 獲取父節(jié)點下的所有子節(jié)點
*/
</script>
</body>
```
###? 8.3更新節(jié)點
#### 1 操作文本?
##### id1.innerText='hello world'
##### document.getElementById('id1').innerText='hello? 122345'
##### id1.innerHTML='<strong>1243</strong>'
可以解析HTML文本標(biāo)簽
```javascript
<div id="id1">123 </div>
<!--document.getElementById('id1')
得到此標(biāo)簽
-->
<script>
? ? var? id1 = document.getElementById('id1');
? ? id1.innerText='hello world'
?//結(jié)合獲取節(jié)點 加 調(diào)用innerText 進行代碼塊內(nèi)容的修改
? ? //? ?document.getElementById('id1').innerText='hello? 122345'
?
</script>
```
#### 2 操作CSS
##### id1.style.color='red'//屬性使用字符串進行包裹?
##### id1.style.fontSize='200px'
不需要方法 直接結(jié)合獲取節(jié)點 加 調(diào)用style方法進行?
##### document.getElementById('id1').style.color='blue'
#####? id1.style.paddding = '2em'
#### 3刪除結(jié)點
注意: 刪除多個節(jié)點的時候，children 是在時刻變化的，刪除節(jié)點的時候一定要注意!
? ?//刪除元素p1
? ? var p1 = document.getElementById('p1');
? ? //找到p1的父結(jié)點
? ? var father = p1.parentElement;
? ? //通過父節(jié)點調(diào)用removeChildren方法 向下查找 進行刪除操作
?//? 調(diào)用 father.removeChild(p1);
```javascript
<body>
<div id="father">
? ? <h1>標(biāo)題一</h1>
? ? <p id="p1">p1</p>
? ? <p>p2</p>
</div>
<script>
? ? //刪除元素p1
? ? var p1 = document.getElementById('p1');
? ? //找到p1的父結(jié)點
? ? var father = p1.parentElement;
? ? //通過父節(jié)點調(diào)用removeChildren方法 向下查找 進行刪除操作
?//? 調(diào)用 father.removeChild(p1);
</script>
</body>
```
#### 4插入節(jié)點
創(chuàng)建一個新的標(biāo)簽，實現(xiàn)插入?
```javascript
<body>
<p id="js"> JavaScript</p>
<div id="list">
? ? <p id="se">javaSE</p>
? ? <p id="ee">javaEE</p>
? ? <p id="me">javaME</p>
</div>
<script>
? ? var js = document.getElementById('js');
? ? var list = document.getElementById('list');
? ? //調(diào)用：
? ? //list.appendChild(js) 追加到后面
? ? var newP = document.createElement('p');//創(chuàng)建一個p標(biāo)簽
? ? newP.id = 'newP';
? ? newP.innerText = 'Hello,bella';
? ? list.appendChild(newP);
? ? var myScript = document.createElement('script');//創(chuàng)建一個標(biāo)簽節(jié)點
? ? myScript.setAttribute('type', 'text/javascript');
? ? myScript.setAttribute('id', 'js123');
? ? list.appendChild(myScript);
? ? //操作 ：list.appendChild(myScript) 講myScript標(biāo)簽作為子結(jié)點添加到list列表內(nèi)
? ? // 創(chuàng)建一個Style 標(biāo)簽
? ? var myStyle1 = document.createElement('style');//創(chuàng)建一個空style標(biāo)簽
? ? myStyle1.setAttribute('type','text/css');//設(shè)置標(biāo)簽的屬性
? ? myStyle1.innerHTML='body{background-color:red;}';//設(shè)置標(biāo)簽的內(nèi)容
?document.getElementsByTagName('head')[0].appendChild(myStyle1)
? ? //插入到head的頭部
</script>
</body>
```
###### insert
## 9、操作表單（驗證）
### 9.1表單是什么 form DOM 樹
##### 。文本框 text
##### 。下拉框< select >
##### 。單選框radio
##### 。多選框checkbox
##### 。隱藏域 hidden
##### 。密碼框password
##### 。表單的目的: 提交信息
```javascript
<body>
<form action="post">
? ? <p>
? ? ? ? <span> 用戶名：</span> <input type="text " id="username">
? ? </p>
? ? <p>
? ? </p>
</form>
<script>
? ? var input_text = document.getElementById('username');
</script>
<!--input_text.value? 獲取輸入框的值
input_text.value=? 修改輸入框的值
-->
</body>
```
### 9.2 獲得要提交的信息
```javascript
<body>
<form action="post">
? ? <p>
? ? ? ? <span> 用戶名：</span>
? ? ? ? <input type="text " id="username">
? ? ? ??
? ? </p>
? ? <p>
? ? ? ? <span>性別:</span>
? ? ? ? <input type="radio" name="sex" value="man" id="boy">男
? ? ? ? <input type="radio" name="sex" value="women" id="girl"> 女
? ? </p>
</form>
<script>
? ? var input_text = document.getElementById('username');
? ? var boy_radio = document.getElementById('boy');
? ? var girl_radio = document.getElementById('girl');
</script>
</body>
```
```javascript
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
</head>
<body>
<form action="https：//www.baidu.com" method="post" onsubmit="return aaa()">
? ? <p>
? ? ? ? <span> 用戶名： </span>
? ? ? ? <input type="text" id="username" name="username">
? ? </p>
?
? ? <p><span>密碼：</span>
? ? ? ? <input type="password" id="input-password">
? ? </p>
? ? <input type="hidden" id="md5-password" name="password">
? ? <!--? ? 綁定時間 onclick 被點擊 -->
? ? <button type="submit">提交</button>
</form>
<script>
? ? function aaa() {
? ? ? ? alert(1);
? ? ? ? var uname = document.getElementById('username');
? ? ? ? var pwd = document.getElementById('input-password');
? ? ? ? var md5pwd = document.getElementById('md5-password');
? ? ?//? ?pwd.value = md5(pwd.value);
? ? ? ? md5pwd.value = md5(pwd.value);
? ? ? ? //可以校驗判斷表單內(nèi)容，true就是通過提交 false就是阻止提交
? ? }
</script>
</body>
</html>
```
## 10、初識jQuery及公式
### 10.1 公式：$(selector).action()
<script>
? ? document.getElementById('id');
? ? //選擇器就是css的選擇器? 獲取id?
? ? $('#test-jquery').click(function () {
? ? ? ? alert('hello，jQuery');
? ? })
</script>
```javascript
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
? ? <script src="jquery-3.7.0.js"></script>
</head>
<body>
<a href="" id="test-jquery">點我</a>
<!--公式：$(selector).action()-->
<script>
? ? document.getElementById('id');
? ? //選擇器就是css的選擇器
? ? $('#test-jquery').click(function () {
? ? ? ? alert('hello，jQuery');
? ? })
</script>
</body>
</html>
```
### 10.2選擇器
####? ? ?1 原生js，選擇器少，麻煩不好記
##### document.getElementsByTagName();//標(biāo)簽
##### document.getElementById();//ID
##### document.getElementsByClassName(); //類
####? ? ?2 jQuery css 中的選擇器它全部部能用!
#####? ? ?$('p').click(); //標(biāo)簽選擇器
#####? ? ?$('#id1').click(); //id選擇器'
#####? ? ?$('.class1').click() //cLass選擇器
### 文檔工具站：https://jquery.cuishifeng.cn
### 10.3事件?
鼠標(biāo)事件
鍵盤事件
其他事件
$(selector).action()
```javascript
? ? $('.class1').click() //cLass選擇器
? ? $('.class1').mousedown()(jQuery)
? ? $('.class1').mouseenter()(jQuery)
? ? $('.class1').mouseleave()(jQuery)
? ? $('.class1').mousemove()(jQuery)
? ? $('.class1').mouseout()(jQuery)
? ? $('.class1').mouseover()(jQuery)
? ? $('.class1').mouseup()(jQuery)
```
