JavaScript

1. 什麼是JavaScript

• 一款瀏覽器指令碼語言
• 設定IDEA支援es6語法
  

2. 快速入門

內部樣式

<script>
alert("hello");//彈窗
console.log("hello");//在瀏覽器控制檯輸出
document.write("hello");//在瀏覽器介面輸出
</script>

<input>

• 先彈出hello，點選確定之後纔會出現輸入框。
• script可以定義在html頁面任意位置，但是定義的位置會影響執行順序
• script可以定義多個

外部樣式

• 通過外部匯入的方式script標籤src屬性
• 注意，script標籤必須成對出現，不然可能程式碼會不生效，不建議自閉和標籤

alert("hello");
 ==========================
<script src = "js/hello.js">
</script>

• F12開發者模式

3. JavaScript基本語法

'user strict';

• JavaScript嚴格檢查模式，建議書寫JS程式碼將該語句放在開頭第一行

'use strict';
i = 3;
console.log(i);

使用該語句之前

i=3:表示是全域性變數

使用該語句之後

ES6

在es6中，區域性變數使用let表示。 let i = 3;

3.1 數據型別

• 原始數據型別（也叫基本數據型別）
  • number 數位 包括整數/小數/NaN
  • string 字串 「abc」 ‘a’ ‘abc’（字串也是不可變的）

  注意跳脫字元:\' 
  \n :換行符  \t：製表符
  \u#### unicode編碼 	\u4e2d："中"
  \x41 ASCII編碼 'A'
  多行字串編寫（tab鍵上面的那個鍵）
  var msg =`A
  B
  C`
  模板字串：
  let name ="zhangsan";
  var msg ="你好,${name}"
  subString方法擷取字串，從指定索引擷取，含頭不含尾
  "你好啊張三".substring(3,5) //張三
  

  • boolean true false
  • null 一個物件爲空的佔位符（用typeof方法顯示是object型別）
  • undefined 未定義，如果一個變數沒有進行初始化，則會預設賦值爲undefined
• 參照數據型別
  • 和java中的物件類似，不過是用{}括起來的,相當於匿名內部類
  • 陣列用[],物件用{}
  • var arr = [1,2,3] var person = { }

var person = {
    name:"張三",
    age:18,
    array:[1,2,3,4]
}
//獲取物件的屬性
console.log(person.name);

獲取變數的型別

• typeof運算子：獲取變數的型別

<script>
	var a = 3;
	document.write(typeof(a));
	//結果爲number
</script>

3.2 運算子

• 一元運算子

只有一個運算數的運算子
+(正號)  -(負號)
++  -- 自增（自減）
	++在前，先自增，再運算
	++在後，先運算，再自增

<script>
	var num = 3;
	var a = num++;
//先運算，再自增，先把num賦值給a，num再自增。a=3，num=4
</script>

注意：
在JS中，如果運算數不是運算子所要求的型別，那麼js引擎會自動將運算數進行型別轉換 其他型別轉number：
String型別轉number，按字面值轉換，如果字面值不是數位，則轉爲NaN（不是數位的數位） NaN和任意數位進行運算，結果都是NaN
boolean轉number：true轉爲1，false轉爲0

• 算術運算子

+ - * / %
和java一樣
唯一不同是 / 結果可以爲小數

• 比較運算子

>, <, >=, <=, !=, ===
比較方式
 型別相同：直接比較
		字串：按照字典順序進行比較，按位元逐一比較，直到得到大小爲止。
型別不同：先進行型別轉化，再比較
	==:型別不一致，值一樣也會返回true，比如1和"1"
	=== 全等於，在比較之前，先判斷型別，如果型別不一樣，直接返回false
	NaN與所有的數值都不相等，包括自己本身。NaN===NaN結果是false
	isNaN(變數)：通過該方法判斷一個變數是否是NaN
浮點數存在精度問題
(1/3)===1-(2/3)：結果是false

• 邏輯運算子

&&  || ！
其他型別轉bollean
1.number：0或NaN爲假，其他爲真
2.string:除了空字串，其他都是true
3.null&undefined：都是false
4.物件：所有物件都是true

可以在後期判斷字串是否爲空
    if(a){}等價於if(a != null & a.length>0){}
也可以用來判斷物件是否爲null
    if(stu){}等價於if(stu != null){}

• 三元運算子

? :  表達式
var b = 3;
var a = 4;
var c = a > b ? 1 : 0;
document.write(c);

a是否大於b?如果大於b,將1賦值給c，否則將0賦值給c

3.3 流程控制語句

1. if…else…

//alert("hello,word")瀏覽器彈窗
//document.write("hello");//在瀏覽器介面顯示該內容
var score = 65;//定義變數
if(score>=0 && score<60){
    alert("成績不合格");
}else if(score>=60 && score<=100){
    alert("成績合格");
}else {
    alert("請輸入正確成績")
}

2. switch

• 防止出現case穿透現象（使用break退出回圈解決）
• 在JS中，switch可以和接收任意的原始數據型別
• default：都不滿足預設執行的語句

var a = null;
switch (a) {
    case 5:
        document.write(a);
        break;
    case null:
        document.write(a);
        break;
    case "a":
        document.write(a);
        break;
    default:
        document.write("輸入不符合規範");
}

3. while

//求1到100的總和
var a = 1;
var sum =0;
while(a<=100){
    sum=sum+a;
    a++;
}
document.write("1到100的總和爲："+sum);

4. do …while

• 無論while語句是否成立，都會先執行一次do裏面的程式碼

var a=1;
do {
    a++;
}while (a>20)
document.write(a);//輸出結果是2

5. for

var sum=0;
for (var i=1; i<=100; i++){
    sum+=i;
}
document.write("總和是"+sum)

6. for…in

//遍歷陣列
'use strict';
     var arr =[2,6,4,89,235,45];

     for (let i in arr){
         //遍歷出來的i是陣列的索引
         document.write(arr[i]+"<br/>");
     }

3.4特殊語法

1. 語句以；結尾，如果一行只有一條語句，可以省略；（不建議）
2. 變數定義使用var關鍵字，也可以不使用
   用：定義的變數是區域性變數
   不用：定義的變數是全域性變數（不建議）

如果需要使用全域性變數，建議：

var b;
function fun(){
	b = 4;
}
fun();
alert(b);

4. JavaScript內部物件

JS中的所有鍵都是字串，值是任意物件
物件
建立物件

'use strict';
     let student={
        name:'zhangsan',
         age:23,
         score:60
     }

物件賦值

student.name="張三";

• 使用一個不存在的物件屬性不會報錯，會返回undefined

document.write(student.address); //undefined

動態的刪減屬性

delete student.age; //刪除age屬性
student.address="北京";//新增一個address屬性

判斷屬性是否在一個物件中

1. document.write("age" in person); //包含繼承自上一級的屬性
2. person.hasOwnProperty("age"); //只判斷在自己本身中是否存在該屬性

4.1 Function函數物件

建立

1.var fun = new Function（形式參數列表，方法體）；//不需要掌握
如：var fun1 = new Function("a","b","alert(a);");

2.function 方法名稱(形參列表){  //常用
	方法體
}

3.var 方法名=function(形參列表){
	方法體；
}

屬性和特點

• 屬性 length：代表形參的個數

特點

1. 方法定義時，形參的型別和返回值型別不用寫。因爲都是var
2. 方法是一個物件，如果定義名稱相同的方法，會覆蓋掉前一個方法
3. 在JS中，方法的呼叫只與方法的名稱有關，和參數列表無關
4. 在方法宣告中有一個隱藏的內建物件（陣列），arguments，封裝了所有的實際參數。

如：求任意個數的和

function add(){
	var sum = 0;
	for(var i = 0; i< argument.length;i++){
		sum = sum + argument[i];
	}
	return sum;
}

//呼叫該方法
var sum = add(1,2,3);

4.2 Array陣列物件

建立

1.var arr = new Array(元素列表)；

2. var arr = new Array(預設長度);

3.var arr = [元素列表]；

方法
join(參數):將陣列中的元素按照指定的分隔符拼接爲字串

• document.write(arr.join("++") + 「< br>」);

push() 向陣列的末尾新增一個或更多元素，並返回新的長度
unshift()向陣列的頭部新增一個或多個元素
pop()將最後一個元素彈出陣列
shift()從陣列的頭部彈出一個元素
slice():擷取Array的一部分，返回一個新的陣列，類似於string中的substring方法。
sort()排序
reverse()反轉陣列
concat([1,2])：將陣列1,2新增到原陣列後面返回一個新陣列。原陣列不變

var arr = new Array(10,20,30,40);

var length = arr.length;
document.write("陣列的長度："+length+"<br/>");//陣列的長度：4
document.write(arr.join("@"));//10@20@30@40
arr.push(50,60,70);
document.write(arr);//10,20,30,40,50,60,70

屬性和特點

• 屬性：length：陣列的長度
• indexOf：通過元素獲取下標索引
• 陣列長度可變，假如給Array.length賦值，會自動給陣列新增幾個未定義的差值在末尾。
• 如果賦值過小，元素就會丟失

特點

1. JS中，陣列元素的型別是可變的
   var arr = [1,"abc’,true];
2. JS中,陣列的長度是可變的,類似於JAVA中的集合

4.3 Date日期物件

建立

var date = new Date();

方法

1. toLocaleString();返回當前date物件對應的時間本地字串格式，年月日，時分秒
   document.write(date.toLocaleString());
2. toLocaleDateString();只返回當前時間的年月日
3. getTime();獲取毫秒值，返回當前物件描述的時間到1970年1月1日零點的毫秒值差（用作時間戳）

var date = new Date();
date.getMonth();//獲取當前的月份。0-11，通常加1
var start = date.getTime();
document.write(start+"<br/>");
for (var i = 0; i < 10000; i++) {
    document.write(i);
}
date=new Date(); //更新時間
var end = date.getTime();
document.write("<br/>"+end)
var time = end-start;
document.write("程式共耗時"+time+"毫秒");

4.4 Math數學物件

建立

特點：Math物件不用建立，直接使用即可，和java一樣。 Math.方法名（）；

屬性和方法

• 屬性：PI π

document.write(「π=」+Math.PI);
π=3.141592653589793

方法：

1. random();返回0-1之間的亂數,含0不含1
2. round(x) 把數四捨五入爲最接近的整數
3. ceil(x) 對數進行上舍入 Math.ceil(3.01)4
4. floor(x) 對數進行下舍入Math.ceil(3.99)3

隨機生成1到100之間的整數

步驟：
1.Math.random()返回0到1之間的數
2.Math.random()*100返回0到100之間的數，不包括100
3.Math.floor(Math.random()*100)返回0到99之間的整數
4.Math.floor(Math.random()*100+1)返回1到100之間的整數

document.write("1到100之間的整數"+Math.floor(Math.random()*100+1));

4.5 RegExp正則表達式物件

正則表達式概述

正則表達式：定義字串的組成規則

單個字元：[ ]

如：[a] [ab][a-zA-Z0-9_]
	特殊符號代表特殊含義的單個字元
		\d:單個數字字元[0-9]
		\w:單個單詞字元[a-zA-Z0-9_]

量詞符號：
	?:出現0次或1次
	*：出現0次或多次
	+：出現1次或多次
	{m,n}表示 m<=數量<=n
		m如果預設：{,n}最多n次
		n如果預設：{m,}最少m次

開始結束符號:
開始：^
結束：$

建立

1.var reg = new RegExp(「正則表達式」)；
2.var reg = /正則表達式/；

方法
test(參數):驗證指定的字串是否符合正則定義的規範，符合規範返回true，不符合false

var reg2 = /^\w{6,12}$/;
var username = "zhangsan";
var flag = reg2.test(username);
document.write(flag);
結果爲true

4.6 Global全域性物件

特點：這個Global中封裝的方法不需要物件就可以直接呼叫。 方法名();
方法

encodeURI:url編碼
decodeURI:url解碼



encodeURIComponent:url編碼
decodeURIComponent:url解碼

4.7 Map物件（es6新特性）

'use strict';
   let map =new Map([["張三",100],["李四",50],["王五",100]]);
   let score = map.get("張三"); //獲取指定key的值
   map.set("二狗",50);//新增或修改鍵值對
   map.delete("張三");//刪除鍵值對
   document.write(score);

4.8 Set物件（es6新特性）

• 無序不重複的集合（去重）
• set.add()：新增元素
• set.delete()：刪除元素
• set.has()：是否包含該元素

4.9 iterator迭代器

• 遍歷陣列

 let arr =[1,2,3,4,5];
        for(let i of arr){
            document.write(i);
        }

• 遍歷Map集合

 let map =new Map([["張三",20],["李四",25]]);
        for(let p of map ){
            document.write(p);
        }

• 遍歷Set集合

 let set = new Set([1,2,3,4,4]);
        for (let a of set){
            document.write(a);
        }

5.函數

5.1定義函數

• 定義一個絕對值函數
• 方式一

function abs(x) {
         if(x>=0){
             return x;
         }else {
             return -x;
         }
     }

一旦執行到return代表方法結束，返回結果
如果沒有執行return語句，函數也會返回結果，(形參沒有賦值)返回值是undefined

• 方式二

var abs=function(x) {
       if(x>=0){
             return x;
         }else {
             return -x;
         }
 }

如何限制傳入參數的型別符合要求(手動拋出異常)

var abs =function(x) {
         if(typeof x !== 'number'){
             throw 'not a number';
         } else if(x>=0){
             return x;
         }else {
             return -x;
         }
     }

rest函數（es6新特性）

作用：用來獲取除了已經定義的參數之後的其他參數，將其封裝到一個數組中

function f(x,...rest) {
            console.log("x:"+x);
            console.log("rest:"+rest);
        }

呼叫函數：f(‘a’,‘c’,‘s’,‘d’)
結果：x:a
rest:c,s,d

5.2變數的作用域

在javascript中用var定義變數是有作用域的。
在函數間定義變數，在函數體外不能使用該變數(非要使用的話需要瞭解閉包的知識)

function f() {
     var x=1;
     x = x+1;
}
   x = x + 2;    //Uncaught ReferenceError: x is not defined

• 如果兩個函數在自己的函數內部使用了相同的變數名，不會衝突

內部函數可以使用外部函數的屬性變數，反之不行

function f() {
            var x = 1;
            function f1() {
                var y = x+1;
            }
        }

如果內部函數與外部函數定義的變數重名，則在內外部函數使用自己函數的成員變數。

 function f() {
            var x = 1;
            function f1() {
                var x = 2;
                console.log("內部x："+x); //2
            }
            console.log("外部x:"+x); //1
            f1();
        }

建議：所有的變數都定義到函數的頭部，需要使用該變數時，直接使用即可，便於程式碼維護。

規範

由於我們使用的所有全域性變數都會系結到window物件上，如果不同的js檔案，使用了相同的全域性變數名稱，會發生衝突。

• 解決方法
• 把自己的程式碼全部放入自己定義的唯一空間名字中，降低全域性命名衝突的問題

//定義該js檔案的唯一全域性變數
      var rm ={};
      
      //定義全域性變數
      rm.name ="rm";
      rm.add = function (a,b) {
          return a+b;
      }

Jquery就是這樣做的，（Jquery.屬性等價於$.屬性）

區域性作用域let

• 問題：區域性變數出了for回圈作用域還能夠使用

   function f() {
            for(var i = 1; i<10;i++){
                document.write(i);//1-9
            }
            //11,i等於10的時候退出回圈，此時i=10，再加1是11
            document.write("i+1:"+(i+1)); //11
        }
        f();

解決方法：es6新加入let關鍵字，解決區域性作用域衝突問題

   function f() {
            for(let i = 1; i<10;i++){
                document.write(i);//1-9
            }
            //Uncaught ReferenceError: i is not defined
            document.write("i+1:"+(i+1)); //控制檯報錯
        }
        f();

建議使用let定義區域性作用域的變數
const用來定義常數

• 在es6之前，用全大寫字母定義的變數就是常數，不要修改這些值（雖然只是假常數–仍然可以對其修改）

const a =10; //只讀變數
        a = 20; //編譯不通過，直接報錯

5.3方法

• 如何定義物件中的方法

 var rm = {
            name:"rm",
            birthYear:1998,
            age:function () {
                let now = new Date().getFullYear();
                return now - this.birthYear;
            }
        }

使用物件中的方法(方法名後面加括號，屬性不用加)

rm.age();
this就是呼叫者。如果沒物件呼叫預設就是window物件呼叫
在JAVA中，this是無法指向的，預設指向呼叫它的哪個物件

apply

• 在JavaScript中，this是可以指向的

  function getAge() {
            let now = new Date().getFullYear();
            return (now - this.birthYear);
        }
        var rm = {
            name:"rm",
            birthYear:1998,
            age : getAge
        };
        //表示這個方法中的this指向rm物件，參數爲空
        getAge.apply(rm,[]);//等價於rm.getAge();

6.內部物件

JSON

• 在JavaScript中一切皆是物件，任何js支援的型別都可以用JON表示

格式：

• 物件都有{}
• 陣列都有[]
• 所有的鍵值對 都是key：value

方法：

• js物件轉換爲JSON字串 JSON.stringify(物件)
• json字串轉換爲物件 JSON.parse(Json字串)

var person={
        name:"張三",
        age:25
    }
    let s = JSON.stringify(person);
    document.write(s);//{"name":"張三","age":25}
===============================
//傳遞是參數是一個字串，需要用單引號括起來*斜體樣式*
JSON.parse('{"name":"張三","age":25}');

• JS物件和JSON字串的區別

 var obj={name:"zhangsan",age:24}
 var json='{"name":"zhangsan","age":24}'

7.物件導向程式設計

• java，c#，javascript（javascript有些區別，類稱爲原型物件）

類：模板
物件：具體的範例

proto:原型，A物件原型指向B物件。A物件就能使用B物件中的屬性和方法

ES6 class

• 定義一個類，屬性和方法

//定義類
    class student{
        constructor(name){
            this.name =name;
        }
        run(){
            console.log(this.name+"在跑");
        }
    }
    //建立物件
    let student1 = new student("小明");
    student1.run();
    let student2 = new student("小紅");
    student2.run();

• 實現繼承

//定義類
    class student{
        constructor(name){
            this.name =name;
        }
        run(){
            console.log(this.name+"在跑");
        }
    }
    //繼承
    class primary extends student{
        constructor(name,grade){
            super(name);
            this.grade=grade;
        }
        getGrade(){
            console.log(this.name+"是一名"+this.grade+"學生");
        }
    }
    //建立一個primary物件
    let p1 = new primary("小新","三年級");
    p1.getGrade();//小新是一名三年級學生

本質還是使用的物件原型

操作BOM物件

BOM：瀏覽器物件模型

瀏覽器內核：IE Chrome Safari FireFox
三方瀏覽器：QQ 360 UC

window
window代表瀏覽器視窗

Navigator（不建議使用）

• Navigator,封裝了瀏覽器的資訊
• 大多數不會使用該物件，因爲內容可以被認爲修改

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.26 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.26 Safari/537.36"

screen代表螢幕

screen.width
1440 px
screen.height
960 px

location(重要)

• location代表當前頁面的URL資訊

host: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
protocol: "https:"
reload: ƒ reload() //重新整理網頁
//設定新的地址
location.assign('url地址')

document
document代表當前的頁面，HTML DOM文件樹

• 可以獲取具體的文件樹節點

<ul id="ul">
    <li>JAVA</li>
    <li>JAVASE</li>
    <li>JAVAEE</li>
</ul>

• document可以獲取網頁的cookie

• 伺服器端可以設定cookie:httpOnly，防止劫持cookie

history（不建議使用）

• 瀏覽器的歷史記錄

history.back() //後退一個頁面
history.forward() //前進

DOM物件（重點）

核心

瀏覽器網頁就是一個DOM樹形結構

• 更新：更新DOM節點
• 遍歷DOM節點：得到DOM節點
• 刪除：刪除一個DOM節點
• 新增：新增一個DOM節點

核心：要操作一個DOM節點，就必須要獲得這個DOM節點。

<div id="father">
    <h1>標題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //分別獲取這三個節點
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");
    var children = father.children;
</script>

注意：獲取節點的script標籤一定要寫在標籤內容下面 下麪，不然獲取不到

更新節點

• 操作文字內容

<div id="div1"></div>
<script>
    let div1 = document.getElementById('div1');
    //該方法不會解析標籤內容，輸入標籤也是字串形式
    div1.innerText = "Hello World";
    //該方法會解析html標籤內容
    div1.innerHTML = "<strong>Hello world</strong>";
</script>

• 操作CSS樣式

<div id="div1"></div>
<script>
    let div1 = document.getElementById('div1');
    div1.innerText="Hello"; //屬性值都使用字串包裹
    div1.style.fontSize = "30px"; //下劃線轉駝峯命名
    div1.style.color = "red";
    div1.style.padding= "50px";
</script>

刪除節點

先獲取父節點，然後通過父節點刪除自己。不能自己刪除自己

<div id="div1">
    <span class="span1">Hello</span>
</div>
<script>
    //要刪除span1節點，需要先獲取其父節點
    let span1 = document.getElementsByClassName("span1");
    let father = span1.parentElement;
    father.remove(span1);

	//刪除是一個動態的過程
	father.removeChild(father.children[0]);
	father.removeChild(father.children[1]);
	father.removeChild(father.children[2]);
</script>

注意：刪除多個節點時，children是在時刻變化的，刪除節點時要注意

插入節點

• 獲得了某個DOM節點，假如這個節點中的內容是空的，通過innerHtml方法可以向其新增元素，但是如果節點中存在內容，使用該方法會覆蓋裏面原本的內容。
• 使用追加方法append

追加前

<li id="js">javascript</li>
<ul id="ul">
    <li>javase</li>
    <li>javaee</li>
    <li>javame</li>
</ul>

<script>
    //將以存在的標籤追加到一個標籤後面
    let ul = document.getElementById("ul");
    let js = document.getElementById("js");
    ul.appendChild(js); /追加
</script>

追加後

• let newP = document.createElement(「li」); 建立一個新的標籤，後面是標籤型別。

建立一個新的標籤，實現插入

<ul id="ul">
    <li>javase</li>
    <li>javaee</li>
    <li>javame</li>
</ul>

<script>
    let ul = document.getElementById("ul");
    //建立一個新的標籤
    let newP = document.createElement("li");
    newP.id="p";
    newP.innerText="php1"
    ul.appendChild(newP);

	//建立一個標籤節點
	let img= document.createElement("img");
    img.setAttribute("src","a.jpg"); //等價於<img src="a.jpg">
</script>

10.操作表單

form表單

• 文字方塊 text
• 下拉框 select
• 單選，複選框 radio、checkbox
• 隱藏域 hidden
• 密碼框 password

獲取和修改輸入框的值

<form>
    <span>使用者名稱：<input id="username"></span>
    <span>
        <p>性別：</p>
        <input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="girl" id="girl">女
    </span>
 
</form>

<script>
    let user = document.getElementById("username");
    console.log(user.value);
    user.value="123456";

	//對於單選框，多選框等固定的值，只能獲取到當前的值
	let boy = document.getElementById("boy");
    let girl = document.getElementById("girl");
	boy.checked;//檢視返回的結果，true表示被選中
	girl.checked=true;//修改選擇的結果
</script>

提交表單
使用md5加密,使用隱藏輸入框接收使用者密碼輸入的密碼並對其進行加密

<body>
    <!--表單系結提交事件
        οnsubmit=系結一個提交檢測的函數，返回值是true，false
        將這個結果返回給表單，使用onsubmit接受，true通過提交，false阻止提交
    -->
    <!--onclick單擊事件-->
    <form action="demo2.html" method="post" onsubmit="return check()"> 
        <p>
            使用者名稱:<input type="text" name="username" id="username">
        </p>
        <p>
            密碼:<input type="password" id="pwd"> <!--提交的不是使用者直接輸入的密碼-->
        </p>
        <input type="hidden" name="pwd" id="md5_pwd"><!--提交的是加密後的密碼-->
        <input type="submit" value="登錄" >

    </form>

    <script>
        function check() {
            let pwd = document.getElementById("pwd");
            let md5_pwd = document.getElementById("md5_pwd");
            //md5方法就是對參數進行加密返回加密後的結果,提交上去的是加密後的密碼
            md5_pwd.value =md5(pwd.value); 
            return true;
        }
    </script>

通過md5加密後提交的數據

11.JQuery

JQuery庫，裏面存在大量的JS方法

匯入JQuery

 <!--通過js檔案匯入-->
    <script src="../../lib/js/jquery-3.3.1.js"></script>
    <!--通過cdn線上匯入-->
    <script src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>

公式：$ (選擇器).事件 $ 就代表JQuery

<body>
<a href="#" id="a1">點我</a>

<script>
    $("#a1").click(function () {
        alert("Hello,JQuery")
    })
</script>

選擇器

<script>
    //JS原生態
    let p1 = document.getElementsByTagName("p");
    let a1 = document.getElementById("a1");
    let div1 = document.getElementsByClassName("div1");

    //JQuery CSS中的選擇器都能用
    $("p").click(); //標籤選擇器
    $(".a1").click();//id選擇器
    $("#div1").click();//class選擇器
</script>

文件工具站: https://jquery.cuishifeng.cn/index.html

事件
滑鼠事件，鍵盤事件

當網頁載入完畢之後，響應事件

<script>
    $(document).read(function () {
        //網頁載入完畢之後執行的指令，JS程式碼寫在這裏面
    })
</script>

• 簡化爲

<script>
    $(function () {
        //網頁載入完畢之後執行的指令，JS程式碼寫在這裏面
    })
</script>

• 滑鼠移動事件

    <style>
        #mouseFrame{
            width: 300px;
            height: 300px;
            border: solid 1px red;
        }
    </style>

    滑鼠：<span id="mouse"></span>
    <div id="mouseFrame">在這裏移動滑鼠試試</div>

<script>
    $(function () {
        $("#mouseFrame").mousemove(function (e) {
            $("#mouse").text("x:"+e.pageX+"y:"+e.pageY);
        })
    })
</script>

操作DOM

節點文字操作

<ul id="ul">
    <li id="python">python</li>
    <li name="java">java</li>
    <li class="c">c</li>
</ul>

<script>
    //修改節點中的內容
    $(function () {
        let text = $("#ul li[name='java']").text(); //獲取值
        $("#ul li[name='java']").text("JAVA");//設定值

        let html = $("#ul .python").html();//獲取值
        $("#ul #python").html("<strong>PYTHON</strong>");//設定值

    })
</script>

• 修改CSS樣式

<script>
    //修改css
    $(function () {
         $("#ul li[name='java']").css({"color":"red","font-size":"50px"});
    })
</script>

• 元素的顯示和隱藏
• 本質 display:none

<script>
    //修改css
    $(function () {
         $("#ul li[name='java']").show();//顯示該節點
         $("#ul li[name='java']").hide();//隱藏該節點
         $("#ul li[name='java']").toggle();//將該節點顯示改爲隱藏，隱藏改爲顯示
    })
</script>