1、JavaScript概述
?? ?1、什么是JavaScript
?? ??? ?JavaScript簡稱JS，是一種專門運行于JS解釋器/引擎中的解釋型腳本語言
?? ?2、JS發展史
?? ??? ?1、1992年Nombas公司開發了一款運行在網頁中的腳本語言，名稱為CMM（c--），后來更名為ScriptEase
?? ??? ?2、1995年Netscape(網景)為自己的瀏覽器Navigator2.0開發了另一款腳本語言（LiveScript），更名為JavaScript
?? ??? ?3、1996年，Microsoft為自己的IE3.0，發布了JavaScript的克隆版本JScript
?? ??? ?4、1997年，Netscape找到了ECMA（歐洲計算機制造商協會），將JS提交給了ECMA。從此JS的核心更名為EMCA Script簡稱ES
?? ??? ?JS的組成：
?? ??? ??? ?1、核心—EMCA Script：包含了JS的最基本的語法規范
?? ??? ??? ?2、文檔對象模型（Document Object Model）簡稱DOM
?? ??? ??? ??? ?允許JS操作HTML網頁上的內容
?? ??? ??? ??? ?DOM的規范是有W3C來制定的
?? ??? ??? ?3、瀏覽器對象模型（Browser Object MOdel）簡稱BOM
?? ??? ??? ??? ?允許JS操作瀏覽器

2、使用JS（JS引用）
?? ?1、使用元素事件執行JS腳本代碼
?? ??? ?事件：用戶在元素上所激發的行為操作
?? ??? ??? ?1、onclick事件：當用戶點擊元素時做的操作
?? ??? ?語法：
?? ??? ??? ?<ANY οnclick="JS腳本代碼">
?? ??? ??? ?JS腳本代碼：
?? ??? ??? ??? ?console.log（'向控制臺中輸出的內容'）;
?? ?2、嵌入在網頁中的<script></script>
?? ??? ?語法：<script></script>在任何位置都可以
?? ??? ?特點：
?? ??? ??? ?網頁加載的時候就開始執行
?? ??? ??? ?document.write():向網頁輸出一句話
?? ??? ??? ?注意：如果通過按鈕的單擊事件執行document.write()的話，則會刷新網頁內容
?? ??? ?示例：
?? ??? ??? ?<script>
?? ??? ??? ??? ?document.write("<h1>hello world<h1>")
?? ??? ??? ?<script>
?? ?3、將JS腳本寫在外部的JS文件中
?? ??? ?步驟：
?? ??? ??? ?1、創建JS文件（XXX.js）并編寫腳本
?? ??? ??? ?2、在網頁中對js文件進行引入
?? ??? ??? ??? ?<script src="js文件路徑">此處不能寫js代碼</script>
3、JS基礎語法
?? ?1、語法規范
?? ??? ?1、JS都是由語句組成的
?? ??? ??? ?1、由運算符，表達式，關鍵字組成的稱為語句
?? ??? ??? ?2、嚴格區分大小寫
?? ??? ??? ?3、每條語句必須以；分號表示結束
?? ?2、JS中的注釋
?? ??? ?1、單行注釋：//注釋內容
?? ??? ?2、多行注釋：/*注釋內容*/
4、JS中的變量 和 常量
?? ?1、變量
?? ??? ?1、聲明變量的語法
?? ??? ??? ?聲明：var 變量名;
?? ??? ??? ?賦值：變量名 = 值;
?? ??? ??? ?聲明并賦值：var 變量名=值;
?? ??? ??? ?注意：
?? ??? ??? ??? ?1、聲明變量時，盡量使用var關鍵字，如果省略，也可以，但是容易處問題（全局污染）
?? ??? ??? ??? ?2、聲明變量但未賦值的話，默認值為undefined
?? ??? ?2、變量名的命名規范
?? ??? ??? ?1、不能使用JS中的關鍵字或保留關鍵字
?? ??? ??? ?2、有字母，數字，下劃線（_）和$組成
?? ??? ??? ?3、不能以數字開頭
?? ??? ??? ?4、盡量不要重復
?? ??? ??? ?5、盡量見名知意
?? ??? ??? ?6、如無特殊需求（團隊要求）的話，盡量使用小駝峰命名法
?? ?2、常量
?? ??? ?1、什么是常量：一經聲明就不允許修改的數據就是常量
?? ??? ?2、語法
?? ??? ??? ?const 常量名 = 值;
?? ??? ??? ?注意：常量名采用全大寫的形式

5、數據類型
?? ?1、作用：約束了數據在內存中所占空間大小問題的
?? ?2、JS數據類型分類
?? ??? ?1、基本數據類型（值類型）
?? ??? ??? ?1、number類型
?? ??? ??? ??? ?數字類型，可以表示32位的整數或64位的浮點數
?? ??? ??? ??? ?整數：
?? ??? ??? ??? ??? ?表示十進制，八進制，十六進制
?? ??? ??? ??? ??? ?十進制：var num = 111；
?? ??? ??? ??? ??? ?八進制：var num = 010；
?? ??? ??? ??? ??? ?十六進制：var num = 0x10；
?? ??? ??? ??? ?小數：
?? ??? ??? ??? ??? ?小數點計數法：var num = 123.456；
?? ??? ??? ??? ??? ?科學計數法：var num = 1.5e2；
?? ??? ??? ?2、string類型（所占內存為2-4字節）
?? ??? ??? ??? ?字符串：都是由Unicode的字符，數字，標點組成的
?? ??? ??? ??? ?1、查看字符的Unicode碼(可以根據的Unicode碼對應的二進制判斷所占內存（多少字節）)
?? ??? ??? ??? ??? ?var str = "張三豐";
?? ??? ??? ??? ??? ?var uCode =str.charCodeAt(0).toString(2)
?? ??? ??? ??? ?2、如果將Unicode碼轉換成對應的字符(只能轉16進制的，如果是二進制或八進制需要先轉換成16進制)
?? ??? ??? ??? ??? ?已知Unicode碼：5f20
?? ??? ??? ??? ??? ?var str = '\u5f20';
?? ??? ??? ??? ??? ?console.log(str);
?? ??? ??? ??? ?3、文中范圍
?? ??? ??? ??? ??? ?'\u4e00'~'\u9fa5'
?? ??? ??? ??? ?4、轉義字符
?? ??? ??? ??? ??? ?\n: 換行
?? ??? ??? ??? ??? ?\t: 制表符
?? ??? ??? ??? ??? ?\": "
?? ??? ??? ??? ??? ?\': '
?? ??? ??? ??? ??? ?\\: \
?? ??? ??? ?3、boolean類型
?? ??? ??? ??? ?布爾類型，只用于表示真（true）或假（false）
?? ??? ??? ??? ?注意：
?? ??? ??? ??? ??? ?在參與數字運算時，true當做1運算，false當做0
?? ??? ??? ?4、查看數據類型
?? ??? ??? ??? ?使用typeof() 或 typeof 都可以查看變量的數據類型
?? ??? ?2、引用數據類型


?? ?3、數據類型轉換
?? ??? ?1、隱式轉換
?? ??? ??? ?不同類型的數據在左加法運算時，會進行自動轉換
?? ??? ??? ?1、字符串+數字：將數字轉換為字符串
?? ??? ??? ??? ?var num = 15；
?? ??? ??? ??? ?var str = ‘18’；
?? ??? ??? ??? ?var r = num+str；//1518
?? ??? ??? ??? ?var r = '15'+18+15;//151815
?? ??? ??? ??? ?var r =? 15+18+'15';//3315
?? ??? ??? ?2、數字+布爾：將布爾轉為數字做加法（true轉為1，false轉為0）
?? ??? ??? ?3、字符串+布爾：將布爾轉為字符串做連接
?? ??? ??? ??? ?var boo = true；
?? ??? ??? ??? ?var str = ‘Hello’；
?? ??? ??? ??? ?var r = boo+str；//trueHello
?? ??? ??? ?4、布爾+布爾：都轉為數字做加法運算
?? ??? ?2、強制轉換（轉換函數）
?? ??? ??? ?1、toString（）：將任意類型的數據轉為字符串，并返回轉換后的結果
?? ??? ??? ??? ?語法：
?? ??? ??? ??? ??? ?var r = 變量.toString();
?? ??? ??? ??? ??? ?var r = 變量+'';
?? ??? ??? ?2、parseInt（）
?? ??? ??? ??? ?作用：將指定的數據盡量轉換為整數，如果實在無法轉換的話，則返回NaN（Not a Number）
?? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ?1、var r = parseInt（‘456’）；
?? ??? ??? ??? ??? ??? ?r：456
?? ??? ??? ??? ??? ?2、var r = parseInt（‘123.556’）；
?? ??? ??? ??? ??? ??? ?r：123
?? ??? ??? ??? ??? ?3、var r = parseInt（‘123Hello’）；
?? ??? ??? ??? ??? ??? ?r：123
?? ??? ??? ??? ??? ?4、var r = parseInt（‘hello123’）；
?? ??? ??? ??? ??? ??? ?r：NaN
?? ??? ??? ?3、parseFloat（）
?? ??? ??? ??? ?作用：盡量將任意類型的數據轉為小數，如果實在無法轉換的話，那么結果為NaN
?? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ?1、var r = parseFloat('3.14');
?? ??? ??? ??? ??? ??? ?r:3.14
?? ??? ??? ??? ??? ?2、var r = parseFloat('3.14hello');
?? ??? ??? ??? ??? ??? ?r:3.14
?? ??? ??? ??? ??? ?3、var r = parseFloat('hello3.14')
?? ??? ??? ??? ??? ??? ?r:NaN
?? ??? ??? ?4、Number（）
?? ??? ??? ??? ?作用：將任意類型的數據轉為數字，只要包含非法字符，結果就是NaN
?? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ?1、var r = Number('123hello');
?? ??? ??? ??? ??? ??? ?r:NaN
6、運算符
?? ?1、算數運算符
?? ??? ?1、+ - * /? %
?? ??? ?2、++ --
?? ??? ??? ?++：自增運算符，在自身基礎上做+1操作
?? ??? ??? ?--：自減運算符，在自身基礎上做-1操作
?? ??? ??? ?后綴：
?? ??? ??? ??? ?var num = 10；
?? ??? ??? ??? ?num++；
?? ??? ??? ??? ?特點：先使用num的值，然后再做自增運算
?? ??? ??? ??? ?var num = 10；
?? ??? ??? ??? ?console.log(num++);輸出10
?? ??? ??? ??? ?console.log(num);? 輸出11
?? ??? ??? ?前綴：
?? ??? ??? ??? ?var num = 10；
?? ??? ??? ??? ?++um；
?? ??? ??? ??? ?特點：先對變量進行自增，然后再使用變量的值
?? ??? ??? ??? ?var num = 10；
?? ??? ??? ??? ?console.log(++num);輸出11
?? ??? ??? ??? ?console.log(num);? 輸出11
?? ??? ??? ?練習：
?? ??? ??? ??? ?var num = 5；
?? ??? ??? ??? ?var result = num + ++num + num++ + ++num +num;
?? ??? ??? ??? ??? ??? ??? ?? 5? + (6)6?? ? +?? ?6(7) + (8)8?? ? + 8?? ?
?? ?2、關系運算符（比較運算符）
?? ??? ?> < >= <= == != === !==
?? ??? ?1、10>5:true
?? ??? ?2、'10'>5:true
?? ??? ??? ?運算符兩端如果有一個是數字的話，那么另外一個會自動轉換（通過Number）成數字，再進行比較
?? ??? ?3、'10a' > 5:false
?? ??? ?4、"10a" < 5:false
?? ??? ??? ?NaN除了 != 運算時為true，其他都為false
?? ??? ?5、"10" > "5":false
?? ??? ??? ?比較的是字符1的ASCII 和 字符5的ASCII
?? ??? ?6、"張三豐" > "張無忌"：false
?? ??? ??? ?比較三和無的Unicode碼的大小
?? ??? ?7、’10‘ == 10 ：true
?? ??? ?===、判斷數值和數據類型必須全相等時才返回true
?? ??? ?!==、只要數值或數據類型中有一個不相等即返回true
?? ?3、邏輯運算符
?? ??? ?！：邏輯非，等同于python中的not
?? ??? ?&&：邏輯與，and
?? ??? ?||：邏輯或，or
?? ?4、為運算符
?? ??? ?1、按位與 &：兩個數字的二進制進行比較，對應位都為1，則該結果為1，否則 為0
?? ??? ??? ?場合：奇偶性驗證，將一個數與1按位求與，結果為1則為奇數，否則為偶數
?? ??? ??? ??? ?7 & 1 =1
?? ??? ??? ??? ??? ?7:111
?? ??? ??? ??? ??? ?1:001
?? ??? ?2、按位或 |：只要有1即為1，
?? ??? ?3、按位異或^:不同則為1，相同則為0
?? ??? ??? ?場合：不借助第三方變換兩個數字
?? ??? ??? ?示例:
?? ??? ??? ??? ?var a = 3;
?? ??? ??? ??? ?var b = 5;
?? ??? ??? ??? ?a = a ^ b;? 110
?? ??? ??? ??? ??? ?3:011
?? ??? ??? ??? ??? ?5:101
?? ??? ??? ??? ?b = b ^ a;? 011
?? ??? ??? ??? ??? ?b(5):101
?? ??? ??? ??? ??? ?a(6):110
?? ??? ??? ??? ?a = a ^ b;? 101
?? ??? ??? ??? ??? ?a(6):110
?? ??? ??? ??? ??? ?b(3):011
?? ?5、條件運算符（三目運算）
?? ??? ?語法：？：
?? ??? ??? ?條件表達式 ？ 表達式1 ：表達式2;
?? ??? ??? ?當條件表達式的結果為true的時候，執行表達式1中的內容，并將表達式1的結果作為整體表達式的結果，否則執行表達式2
?? ??? ?練習：
?? ??? ??? ?BMI計算器
?? ??? ??? ?1、分兩次從彈框中輸入數據
?? ??? ??? ??? ?1、第一次：輸入 身高（m）
?? ??? ??? ??? ?2、第二次：輸入 體重（kg）
?? ??? ??? ?2、計算bmi
?? ??? ??? ??? ?bmi = 體重 /(身高*身高)
?? ??? ??? ?3、
?? ??? ??? ??? ?如果bmi的值小于20，提示偏瘦
?? ??? ??? ??? ?如果bmi的值大于25，提示偏胖
?? ??? ??? ??? ?否則：提示正常
?? ?6、賦值運算符
?? ??? ?+= -= *= /= ^=
?? ??? ?a ^= b 等價于 a =


?? ??? ?a^b
7、流程控制
?? ?1、程序控制結構
?? ??? ?1、順序結構
?? ??? ?2、分支結構/選擇結構
?? ??? ?3、循環結構
?? ?2、分支結構
?? ??? ?1、if結構
?? ??? ??? ?1、if結構
?? ??? ??? ??? ?語法：
?? ??? ??? ??? ??? ?if（條件表達式）{
?? ??? ??? ??? ??? ??? ?語句塊；
?? ??? ??? ??? ??? ?}
?? ??? ??? ?2、if...else結構
?? ??? ??? ??? ?語法：
?? ??? ??? ??? ??? ?if（條件表達式）{
?? ??? ??? ??? ??? ??? ?語句塊1；
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?語句塊2；
?? ??? ??? ??? ??? ?}
?? ??? ??? ?3、if ...else if...結構
?? ??? ??? ??? ?語法：
?? ??? ??? ??? ??? ?if（條件表達式）{
?? ??? ??? ??? ??? ??? ?語句塊1
?? ??? ??? ??? ??? ?}else if（條件表達式2）{
?? ??? ??? ??? ??? ??? ?語句塊2；
?? ??? ??? ??? ??? ?}else if（條件表達式n）{
?? ??? ??? ??? ??? ??? ?語句塊n；
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?語句塊n+1；
?? ??? ??? ??? ??? ?}
?? ??? ??? ?練習：
?? ??? ??? ??? ?1、分三次從彈框中輸入年，月，日
?? ??? ??? ??? ?2、判斷該日是概念的第幾天

?? ??? ?2、switch結構
?? ??? ??? ?1、作用：等值判斷
?? ??? ??? ?2、語法
?? ??? ??? ??? ?switch（變量）{
?? ??? ??? ??? ??? ?case 值1：
?? ??? ??? ??? ??? ??? ?語句塊1；
?? ??? ??? ??? ??? ??? ?break；//跳出switch結構，可以選
?? ??? ??? ??? ??? ?case 值：
?? ??? ??? ??? ??? ??? ?語句塊2；
?? ??? ??? ??? ??? ??? ?break；//跳出switch結構，可以選
?? ??? ??? ??? ??? ?.......
?? ??? ??? ??? ??? ?default：
?? ??? ??? ??? ??? ??? ?語句塊n；
?? ??? ??? ??? ??? ??? ?/*所有case都未匹配上時，才執行default*/
?? ??? ??? ??? ?}
?? ??? ??? ??? ?注意：
?? ??? ??? ??? ??? ?1、變量 和 case后的值的判斷，采用===來判斷的
?? ??? ??? ??? ??? ?2、break，如果省略break的話，則從匹配的case塊開始，依次向下執行（執行下面所有case塊的內容，或default塊內容）直到遇見break或執行結束
?? ??? ??? ?3、練習：
?? ??? ??? ??? ?從彈框中輸入1-7任意一個數字表示1-星期日
?? ??? ??? ??? ?輸入1：今天吃紅燒肉
?? ??? ??? ??? ?輸入2：今天吃紅燒魚
?? ??? ??? ??? ?輸入3：今天吃清蒸甲魚
?? ??? ??? ??? ?輸入4：今天吃紅燒皮皮蝦
?? ??? ??? ??? ?輸入5：今天吃紅燒排骨
?? ??? ??? ??? ?輸入6：今天休息
?? ??? ??? ??? ?輸入7：今天休息
?? ??? ??? ??? ?其他：輸入有誤！
?? ?3、循環結構
?? ??? ?1、作用：重復執行相同或相似的代碼
?? ??? ?2、循環的二要素
?? ??? ??? ?1、循環條件：循環從什么時候開始，到什么時候結束
?? ??? ??? ?2、循環操作：循環中要做的事情（要執行的代碼）
?? ??? ?3、while循環
?? ??? ??? ?1、語法
?? ??? ??? ??? ?while（循環條件）{
?? ??? ??? ??? ??? ?循環操作
?? ??? ??? ??? ?}
?? ??? ??? ??? ?流程：
?? ??? ??? ??? ??? ?1、判斷循環條件（boolean值/表達式）
?? ??? ??? ??? ??? ?2、如果條件為真，則執行循環操作
?? ??? ??? ??? ??? ??? ?2.1、執行完操作后，再回來判斷條件
?? ??? ??? ??? ??? ?3、如果條件為假，則退出循環
?? ??? ?4、do...while循環
?? ??? ??? ?語法：
?? ??? ??? ??? ?do{
?? ??? ??? ??? ??? ?循環操作；
?? ??? ??? ??? ?}while（條件）；
?? ??? ??? ?流程
?? ??? ??? ??? ?1、先執行循環操作
?? ??? ??? ??? ?2、再判斷循環條件
?? ??? ??? ??? ?3、如果條件為真，再繼續執行循環條件，當條件為假時結束循環
?? ??? ?5、循環的流程控制
?? ??? ??? ?1、break：跳出循環結構
?? ??? ??? ?2、continue：結束本次循環，繼續執行下次循環
?? ??? ?6、for循環
?? ??? ??? ?1、while
?? ??? ??? ??? ?打印1-100之間的所有數字
?? ??? ??? ??? ?var i = 1;//循環條件的初始化
?? ??? ??? ??? ?while(i <= 100){//循環條件的判斷
?? ??? ??? ??? ??? ?console.log(i);//循環操作
?? ??? ??? ??? ??? ?i++;//更新循環條件
?? ??? ??? ??? ?}
?? ??? ??? ?2、語法：
?? ??? ??? ??? ?for（表達式1；表達式2；表達式3）{
?? ??? ??? ??? ??? ?循環操作；
?? ??? ??? ??? ?}
?? ??? ??? ??? ?表達式1：循環條件的初始化
?? ??? ??? ??? ?表達式2：循環條件的判斷
?? ??? ??? ??? ?表達式3：更新循環條件
?? ??? ??? ??? ?流程：
?? ??? ??? ??? ??? ?1、先執行表達式1，即循環條件初始化（執行1次）
?? ??? ??? ??? ??? ?2、判斷表達式2的值，true 或 false
?? ??? ??? ??? ??? ?3、如果表達式2的結果為true則執行循環操作，如果為false則退出循環
?? ??? ??? ??? ??? ?4、執行循環操作后，再執行表達式3
?? ??? ??? ??? ??? ?5、再判斷表達式2，同步驟2
?? ??? ??? ??? ?for(var i = 1; i<=100; i++){
?? ??? ??? ??? ??? ?console.log(i)
?? ??? ??? ??? ?}
?? ??? ?7、循環嵌套
?? ??? ??? ?允許在一個循環中再出現另一個循環
?? ??? ??? ?for(var i=1; i<=10;i++){//外層循環
?? ??? ??? ??? ?for(var j=1;j<1=0;j++){//內層循環

?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?外層循環走一次，內層循環走一輪

8、函數-function
?? ?1、函數的聲明
?? ??? ?function 函數名(參數列表){
?? ??? ??? ?函數體
?? ??? ?}
?? ??? ?1、參數列表
?? ??? ??? ?參數列表，允許聲明0或多個參數，多個參數的話使用，逗號隔開，沒有默認參數
?? ??? ?2、返回值
?? ??? ??? ?返回值是可選的，如果需要返回值的話，通過return 值；進行返回
?? ?2、函數調用
?? ??? ?在任意JS的合法位置處，都允許做函數調用
?? ??? ??? ?函數名(參數列表);
?? ?3、由ES提供的函數（內嵌函數）
?? ??? ?在網頁中無需聲明，就可以直接使用
?? ??? ?parseInt（）/parseFolat（）/Number（）
?? ??? ?1、isNaN（value）：判斷value是否為非數字，返回true表示不是數字，返回false表示是數字
?? ??? ??? ?示例：
?? ??? ??? ??? ?1、isNaN（1）//false
?? ??? ??? ??? ?2、isNaN（‘1’）//false
?? ??? ??? ??? ?3、isNaN（‘hello’）//true
?? ??? ?2、eval（）：執行由字符串來表示的JS代碼
?? ?4、局部變量與 全局變量
?? ??? ?1、全局變量：一經聲明，在JS的任何位置處都能使用的變量就是全局變量
?? ??? ??? ?1、在<script></script>內部在函數體外邊
?? ??? ??? ?2、或則在函數內部不適用var聲明的變量也是全局變量（不建議使用）
?? ??? ?2、局部變量：使用var關鍵字，并且聲明在function中的變量
?? ??? ??? ?局部變量的作用于只在聲明的函數內，出了函數就不能使用

9、數組（在python中稱為列表）
?? ?1、什么是數組
?? ??? ?數組（Array）是一個用于保存批量數據的結構，即一個變量中允許保存多個數據。是按照線性結構的方式來保存數據的
?? ??? ?說明：字符串與數組相加，會將數組準變為字符串
?? ??? ?示例：
?? ??? ??? ?‘names’+['張無忌','張翠山','張三豐','金毛獅王']
?? ??? ??? ?names張無忌,張翠山,張三豐,金毛獅王
?? ?2、創建數組
?? ??? ?1、創建一個空數組
?? ??? ??? ?var 數組名 = [];
?? ??? ?2、創建數組并初始化元素
?? ??? ??? ?var 數組名 = [元素1，元素2，... ,...];
?? ??? ?3、創建一個空數組：
?? ??? ??? ?var 數組名 = new Array（）;
?? ??? ?4、創建數組并初始化元素
?? ??? ??? ?var 數組名 = new Array（元素1，元素2，... ,...）；
?? ?3、數組的使用
?? ??? ?獲取 或設置數組中的元素，一律都使用下標
?? ??? ?下標范圍：從0開始，到元素個數-1為止,如果超出下標不會報錯，而是返回undefined
?? ??? ?1、向獲取元素的第二個元素
?? ??? ??? ?數組名[1];
?? ??? ?2、為數組元素賦值
?? ??? ??? ?數組名[下標] = 值；
?? ??? ??? ?說明：如果下標越界，會將越界的下標賦值，前面的為undefined（空empty）
?? ?4、獲取數組的長度
?? ??? ?屬性：length
?? ??? ?用法：數組名.length;
?? ??? ?使用場合：
?? ??? ??? ?1、配合循環，遍歷數組中的每個元素
?? ??? ??? ?2、能夠找到數組中，最新要插入元素的位置
?? ?5、關聯數組
?? ??? ?1、什么是關聯數組
?? ??? ??? ?JS中數組分為索引數組 和 關聯數組
?? ??? ??? ??? ?索引數組：由數字做下標
?? ??? ??? ??? ?關聯數組：由字符串做下標
?? ??? ?2、聲明和使用關聯數組
?? ??? ??? ?var names = [];
?? ??? ??? ?names['x'] = '西游記';
?? ??? ??? ?names['y'] = '紅樓夢';
?? ??? ?3、注意
?? ??? ??? ?length只能統計索引數組，不能統計關聯數組
?? ??? ?4、使用for ... in遍歷數組
?? ??? ??? ?能夠遍歷數組中所有的數字下標和字符串下標
?? ??? ??? ?for(var 變量 in 數組){
?? ??? ??? ??? ?變量：數組中所有的數字下標和字符串下標（變量為字符串）
?? ??? ??? ?}
?? ?6、數組的常用API
?? ??? ?1、toString():將數組轉換為字符串并返回
?? ??? ??? ?console.log(['aa','bb','cc'].toString())//aa,bb,cc
?? ??? ?2、join（seperator）：返回一個由指定連接符連接的數組元素的字符串,連接符不能數\反斜杠，默認是逗號
?? ??? ??? ?console.log(['aa','bb','cc'].join('|'))//aa|bb|cc
?? ??? ?3、concat
?? ??? ?（arr，arr2，...）:拼接多個數組到一起，并返回拼接后的結果
?? ??? ??? ?注意：該函數并不會改變數組，而是返回拼接后的一個副本
?? ??? ?4、reverse（）：反轉
?? ??? ??? ?語法：arr.reverse()
?? ??? ??? ?注意：該函數會改變現有數組的結構
?? ??? ?5、sort（）：排序，默認情況下，按照元素的Unicode碼進行排序（升序）
?? ??? ??? ?注意：該函數會改變現有數組的結構
?? ??? ??? ?允許通過自定義的排序函數來指定數字的排序規則
?? ??? ??? ??? ?語法：arr.sort(排序函數名);
?? ??? ??? ??? ??? ?1、指定排序函數
?? ??? ??? ??? ??? ??? ?function sortAsc（a，b）{將數組的值依次傳遞給a，b
?? ??? ??? ??? ??? ??? ??? ?return a-b；//返回值大于0則交換a b的位置，
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?2、調用arr.sort(sortAsc)
?? ??? ??? ??? ??? ?3、使用匿名函數
?? ??? ??? ??? ??? ??? ?arr.sort(function(a,b){a,b});
?? ??? ?6、進出棧操作
?? ??? ??? ?棧式操作：提供了快速操作數組頭部或尾部的方法
?? ??? ??? ?1、push（）：入棧，向數組的尾部添加新元素，并返回新數組的長度
?? ??? ??? ?2、pop（）：出棧，刪除并返回數組尾部的元素
?? ??? ??? ?3、unshift（）：向數組頭部增加新元素并返回新數組的長度
?? ??? ??? ?4、Shift（）：刪除并返回數組頭部的元素
?? ??? ?7、二維數組
?? ??? ??? ?1、什么是二維數組
?? ??? ??? ??? ?數組中的數組，在一個數組中的每個元素又是一個數組
?? ??? ??? ?2、聲明二位數組
?? ??? ??? ??? ?var names = [['aa','bb'],['cc',dd]];
?? ??? ??? ??? ?names[0][1] = 'bb'
10、字符串-string
?? ?1、聲明字符串
?? ??? ?1、var str1 = '字符串1';
?? ??? ?2、var str2 = String（’字符串2‘）；
?? ??? ?3、var str3 = new String（’字符串3‘）；
?? ?2、length-屬性
?? ??? ?作用：返回當前字符串中字符的個數
?? ?3、常用函數-string API
?? ??? ?1、大小寫轉換函數
?? ??? ??? ?1、toUpperCase（）：返回字符串的完全大寫形式
?? ??? ??? ?2、toLowerCase（）：返回字符串的完全小寫形式
?? ??? ?2、獲取指定位置的字符 或 Unicode碼
?? ??? ??? ?1、charAt（index）：返回指定下標位置處的字符
?? ??? ??? ?2、charCodeAt（index）返回指定下標位置處的字符的Unicode碼（十進制）
?? ??? ?3、檢索字符串
?? ??? ??? ?1、作用：查詢子字符串在指定字符串中的起始下標
?? ??? ??? ?2、函數
?? ??? ??? ??? ?1、indexOf（value，fromIndex）
?? ??? ??? ??? ??? ?value：要查詢的子字符串
?? ??? ??? ??? ??? ?fromIndex：從哪個位置處開始查，如果省略的話，則從頭查找
?? ??? ??? ??? ??? ?返回值：返回第一次出現子字符串的下標，如果為找到，則返回-1
?? ??? ??? ??? ?2、lastIndexOf（value，fromIndex）
?? ??? ??? ??? ??? ?作用：查找value最后一次出現的下標
?? ??? ??? ??? ??? ?注意：該函數的查找方式是從后向前找
?? ??? ??? ??? ??? ?fromIndex如果省略，則將從字符串的最后一個字符處開始檢索
?? ??? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ??? ?'avcdbabcd'.lastIndexOf('cd',7)//7
?? ??? ??? ??? ??? ??? ?說明：如果在下標為7的位置上匹配到字符串的頭部，則會繼續向后面判斷剩余部分是否可以匹配到
?? ??? ?4、截取子字符串
?? ??? ??? ?函數：substring（start，end）
?? ??? ??? ?作用：返回從start到end-1之間的子字符串，如果end省略表示截取到字符串的結尾
?? ??? ?5、分割字符串
?? ??? ??? ?函數：split（seperator）
?? ??? ??? ?作用：將字符串，通過seperator拆分成一個數組
?? ??? ?6、模式匹配
?? ??? ??? ?1、作用：配合正則表達式來完成字符串的查找和替換...
?? ??? ??? ?2、正則表達式
?? ??? ??? ??? ?語法：/正則表達式/修飾符
?? ??? ??? ??? ?示例：/\d{6}/gim

?? ??? ??? ??? ??? ?修飾符：
?? ??? ??? ??? ??? ??? ?i：忽略大小寫匹配（Ignorcase）
?? ??? ??? ??? ??? ??? ?g：全局匹配（Global）
?? ??? ??? ??? ??? ??? ?m：允許多行匹配（Multiple）
?? ??? ??? ?3、函數
?? ??? ??? ??? ?1、replace（substr/regexp,replacement）
?? ??? ??? ??? ??? ?作用：使用replacement替換substr/regexp的內容，并返回一個替換后的字符串
?? ??? ??? ??? ?2、match（substr/regexp）
?? ??? ??? ??? ??? ?作用：返回滿足substr 或 regexp格式的字符串，將這些字符串放在數組中進行返回?? ?
?? ??? ??? ??? ?3、serach（substr、regexp）
?? ??? ??? ??? ??? ?作用：返回滿足substr或regexp格式的子字符串第一次出現的下標。如為未找到，則返回-1
?? ??? ??? ??? ??? ?注意：search函數不支持全局匹配，將自動忽略g?? ??? ??? ?
11、其他內置對象
?? ?1、JS的對象分類
?? ??? ?1、內置對象—ES提供
?? ??? ??? ?String,Array,... ...
?? ??? ?2、外部對象
?? ??? ??? ?1、window（BOM）瀏覽器對象
?? ??? ??? ?2、document（DOM）文檔對象
?? ??? ?3、自定義對象
?? ??? ??? ?function 就是一個自定義對象
?? ?2、RegExp對象
?? ??? ?RegExp：Regular Expression - 正則表達式
?? ??? ?1、創建RegExp對象
?? ??? ??? ?1、var regExp = /匹配模式/修飾符；
?? ??? ??? ?2、var regExp = new RegExp（‘匹配模式’，‘修飾符’）；
?? ??? ?2、RegExp對象方法
?? ??? ??? ?1、regExp.test（string）
?? ??? ??? ??? ?string：要驗證的字符串，如果string符合regExp格式的話，返回true，否則返回false
?? ?3、Math對象
?? ??? ?1、作用：執行與數學相關的運算和數據
?? ??? ?2、屬性：
?? ??? ??? ?Math.PI,
?? ??? ??? ?Math.E
?? ??? ?3、函數
?? ??? ??? ?1、三角函數
?? ??? ??? ??? ?Math.sin（x）
?? ??? ??? ??? ?Math.cos(x)
?? ??? ??? ??? ?Math.tan(x)
?? ??? ??? ?2、計算函數
?? ??? ??? ??? ?Math.sqrt(x):開方
?? ??? ??? ??? ?Math.log(x)：對數
?? ??? ??? ??? ?Math.pow(x,y)：求x的有次方
?? ??? ??? ?3、數字比較函數
?? ??? ??? ??? ?Math.abs(x)：絕對值
?? ??? ??? ??? ?Math.max()：最大值
?? ??? ??? ??? ?Math.min()：最小值
?? ??? ??? ??? ?Math.random():返回0-1之間的隨機小數，包括0但不包括1
?? ??? ??? ??? ?Math.round(x):將x四舍五入
?? ?4、Date對象
?? ??? ?1、創建Date對象
?? ??? ??? ?1、獲取當前系統日期時間
?? ??? ??? ??? ?var now = new Date（）；
?? ??? ??? ?2、初始化自定義日期時間對象
?? ??? ??? ??? ?var date = new Date（‘2018//01/01’）;
?? ??? ?2、函數
?? ??? ??? ?1、讀取或設置當前時間的毫秒數
?? ??? ??? ??? ?1、getTime（）：返回自1900-1-1 00:00:00以來的毫秒數
?? ??? ??? ??? ?2、setTime(毫秒數):
?? ??? ??? ?2、讀取時間分量函數
?? ??? ??? ??? ?1、getFullYear（）：獲取日期時間對象的年份
?? ??? ??? ??? ?2、getYear（）：獲取自1900年以來到當前日期時間對象所經過的年數
?? ??? ??? ?3、getMonth（）：返回0-11的數字來表示1-12月
?? ??? ??? ?4、getDate（）：返回當前日期對象對應的日
?? ??? ??? ?5、getDay（）：返回當前日期對象所對應的日期，0-6來表示星期日-星期六
?? ??? ??? ?6、獲取時間
?? ??? ??? ??? ?1、getHourse（）：
?? ??? ??? ??? ?2、getMinutes（）：
?? ??? ??? ??? ?3、getSeconds（）；
?? ??? ??? ??? ?4、getMilliseconds（）：獲取毫秒
?? ??? ??? ?7、轉換為字符串
?? ??? ??? ??? ?1、toString()
?? ??? ??? ??? ??? ?"Mon Aug 13 2018 12:14:38 GMT+0800 (CST)"
?? ??? ??? ??? ?2、toLocaleString（）
?? ??? ??? ??? ??? ?"2018/8/13 下午12:14:59"
?? ??? ??? ??? ?3、toLocalTimeString（）
?? ??? ??? ??? ??? ?"下午12:15:22"
?? ??? ??? ??? ?4、tolocalDateString（）
?? ??? ??? ??? ??? ?"2018/8/13"
12、外部對象
?? ?1、BOM 和DOM
?? ??? ?BOM：Browser Object Model-瀏覽器對象模型
?? ??? ?DOM：Document Object Model-文檔瀏覽器對象模型
?? ?2、BOM
?? ??? ?1、作用：表示瀏覽器窗口，BOM提供了一個核心對象-window
?? ??? ?2、window對象的使用
?? ??? ??? ?window對象會包含若干屬性 和 方法
?? ??? ??? ??? ?屬性：document，location，history，navigator，screen
?? ??? ??? ??? ?方法：alert（），prompt（），...
?? ??? ??? ?調用window對象的屬性和方法時，可以省略window.不寫
?? ??? ??? ?window中的對話框
?? ??? ??? ??? ?1、警告框：window.alert()/ alert()
?? ??? ??? ??? ?2、輸入框：window.prompt()/ prompt()
?? ??? ??? ??? ?3、確認框：window.confirm()/ confirm,按‘確認‘按鈕的話，返回true，否則返回false

?? ??? ??? ?window中的定時器
?? ??? ??? ??? ?1、定時器分類
?? ??? ??? ??? ??? ?1、周期性定時器：每隔一定時間就會執行一遍指定程序，返回執行
?? ??? ??? ??? ??? ?2、一次性定時器：在指定的時間間隔之后，只執行一次操作
?? ??? ??? ??? ?2、周期性定時器
?? ??? ??? ??? ??? ?1、聲明定時器
?? ??? ??? ??? ??? ??? ?var ret = setInterval（fun，time）；
?? ??? ??? ??? ??? ??? ?fun：要周期性執行的操作，可以是匿名函數
?? ??? ??? ??? ??? ??? ?time：時間間隔周期，以毫秒為單位
?? ??? ??? ??? ??? ??? ?ret：返回已經創建好的定時器對象（用于停止定時器）
?? ??? ??? ??? ??? ?2、清除定時器
?? ??? ??? ??? ??? ??? ?clearInterval（timer）
?? ??? ??? ??? ??? ??? ?timer：創建好的，要停止的定時器對象
?? ??? ??? ??? ?3、一次性定時器
?? ??? ??? ??? ??? ?1、聲明一次性定時器
?? ??? ??? ??? ??? ??? ?var ret = setTimeout(fun,time);
?? ??? ??? ??? ??? ??? ?fun：指定時時間間隔后要執行的操作
?? ??? ??? ??? ??? ??? ?time：時間間隔，以毫秒為單位
?? ??? ??? ??? ??? ??? ?ret：返回已經啟動的定時器對象
?? ??? ??? ??? ??? ?2、清除定時器
?? ??? ??? ??? ??? ??? ?clearTimeout（timer）；
?? ??? ??? ??? ??? ??? ?timer：創建好的，要停止的定時器對象?? ?
?? ??? ??? ?Window的屬性（了解）
?? ??? ??? ??? ?1、screen：獲取客戶端顯示器的相關信息
?? ??? ??? ??? ??? ?屬性：
?? ??? ??? ??? ??? ??? ?1、width/ height
?? ??? ??? ??? ??? ??? ?2、availWidth/ availHeight
?? ??? ??? ??? ?2、history：
?? ??? ??? ??? ??? ?1、作用：包含當前窗口所訪問過的url地址
?? ??? ??? ??? ??? ?2、屬性 和方法
?? ??? ??? ??? ??? ??? ?1、屬性
?? ??? ??? ??? ??? ??? ??? ?length：訪問過的URL的數量
?? ??? ??? ??? ??? ??? ?2、方法
?? ??? ??? ??? ??? ??? ??? ?1、back（）：后退
?? ??? ??? ??? ??? ??? ??? ?2、forward（）：前進
?? ??? ??? ??? ??? ??? ??? ?3、go（num）：去往歷史記錄中的第num個頁面
?? ??? ??? ??? ??? ??? ??? ??? ?go（1）相當于forward
?? ??? ??? ??? ??? ??? ??? ??? ?go（-1）相當于back
?? ??? ??? ??? ?3、location
?? ??? ??? ??? ??? ?1、作用：表示瀏覽器地址欄上的信息
?? ??? ??? ??? ??? ?2、屬性和方法
?? ??? ??? ??? ??? ??? ?1、href：表示當前窗口中正在瀏覽的網頁的地址，如果href設置值的話，則相當于瀏覽器頁面跳轉的功能
?? ??? ??? ??? ??? ??? ?2、reload（）：重新加載當前頁面，等同于刷新
?? ??? ??? ??? ?4、navigator
?? ??? ??? ??? ??? ?1、作用：包含瀏覽器的相關信息
?? ??? ??? ??? ??? ?2、屬性
?? ??? ??? ??? ??? ??? ?1、userAgent：顯示瀏覽器相關信息（"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"）
?? ?3、DOM-document對象（重點）
?? ??? ?1、document的概述
?? ??? ??? ?document對象，是DOM中的頂級對對象。封裝了和HTML相關的屬性，方法和事件。

?? ??? ??? ?在網頁加載HTML的時候，會在內存中生成一棵節點樹（DOM樹），DOM樹的根就是document
?? ??? ??? ?每個元素其實都是DOM樹上的一個節點

?? ??? ??? ?DOM中所提供的操作：
?? ??? ??? ??? ?1、查找節點的信息
?? ??? ??? ??? ?2、讀取節點的信息
?? ??? ??? ??? ?3、修改節點的信息
?? ??? ??? ??? ?4、刪除節點的信息
?? ??? ??? ??? ?5、創建節點的信息
?? ??? ?2、查找節點
?? ??? ??? ?1、通過元素的id查找節點
?? ??? ??? ??? ?var elem = document.getElementById（"元素ＩＤ"）;
?? ??? ??? ??? ?元素ID：要獲取的元素的ID
?? ??? ??? ??? ?elem：所得到的元素的對象-DOM對象/元素，如果沒有找到匹配的元素，則返回null

?? ??? ??? ??? ?DOM對象的常用屬性
?? ??? ??? ??? ??? ?1、innerHTML：獲取 或設置當前DOM對象的HTML文本值,會獲取標簽
?? ??? ??? ??? ??? ?2、innerText：獲取 或設置當前DOM對象的文本值,只獲取文本不獲取標簽
?? ??? ??? ??? ??? ?3、value：獲取 或設置表單控件對象的值
?? ??? ??? ??? ??? ??? ?說明：value獲取的值只是表單控件框中輸入的值，設置值也只是設置表單控件框中的值，不會改變value的默認值
?? ??? ??? ?2、通過標簽名查詢
?? ??? ??? ??? ?語法：document.getElementsByTagName(標簽名);或則 elem.getElementsByTagName(標簽名);
?? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ?1、document>getElementsByTagName('p')//查找網頁中所有的p元素
?? ??? ??? ??? ??? ?2、var div = document.getElementById('d1');
?? ??? ??? ??? ??? ??? ?div.getElementsByTagName('p')//查找id為d1的div內部的p元素
?? ??? ??? ??? ?返回值：由指定標簽元素所組成的數組（列表）
?? ??? ??? ?3、通過元素的name屬性值來查詢節點(優先使用在 單選框 和 復選框中)
?? ??? ??? ??? ?語法：document.getElementsByName()
?? ??? ??? ??? ?返回值：返回由指定name值的元素所組成的數組
?? ??? ??? ?4、通過元素class值查詢節點
?? ??? ??? ??? ?語法：documnet.getElementsByClassName(className) 或 elem.getElementsByClassName(className)
?? ??? ??? ??? ?返回值：由指定className值的元素組成的數組
?? ??? ??? ?5、根據節點的層級關系查詢節點
?? ??? ??? ??? ?1、parentNode：返回當前元素的父節點
?? ??? ??? ??? ?2、childNodes：返回當前元素的所有子節點組成的數組（子節點元素節點，屬性節點，文本節點（包括空格和回車）、注釋節點，文檔節點）
?? ??? ??? ??? ?3、children:返回當前元素的子節點組成的數（子節點中只包含元素節點）
?? ??? ??? ??? ?4、nextSibling：返回當前元素的下一個兄弟節點
?? ??? ??? ??? ?5、nextElementSibing：返回當前元素的下一個兄弟元素節點
?? ??? ??? ??? ?6、previousSibling：返回當前元素的上一個兄弟節點
?? ??? ??? ??? ?7、previousElementSibling：返回當前元素的上一個兄弟元素節點
?? ??? ?3、讀取節點的信息
?? ??? ??? ?1、節點的類型
?? ??? ??? ??? ?1、元素節點：表示頁面上的一個元素
?? ??? ??? ??? ?2、屬性節點：表示頁面上元素的一個屬性
?? ??? ??? ??? ?3、文本節點：表示頁面上元素的一個文本內容（包含空格和回車）
?? ??? ??? ??? ?4、注釋節點：表示網頁上的一個注釋
?? ??? ??? ??? ?5、文檔節點：表示html文檔
?? ??? ??? ??? ?屬性：nodeType
?? ??? ??? ??? ?取值：
?? ??? ??? ??? ??? ?返回1：元素節點
?? ??? ??? ??? ??? ?返回2：屬性節點
?? ??? ??? ??? ??? ?返回3：文本節點
?? ??? ??? ??? ??? ?返回8：注釋節點
?? ??? ??? ??? ??? ?返回9：HTML文檔（文檔節點）
?? ??? ??? ?2、讀取節點名稱
?? ??? ??? ??? ?屬性：nodeName
?? ??? ??? ??? ?返回值：
?? ??? ??? ??? ??? ?元素節點 和屬性節點：返回元素名 或 屬性名
?? ??? ??? ??? ??? ?文本節點：#text
?? ??? ??? ??? ??? ?文檔節點：#document
?? ??? ??? ??? ??? ?注釋節點：#comment
?? ??? ?4、獲取 或設置元素節點的方法
?? ??? ??? ?1、getAttribute（attrName）
?? ??? ??? ??? ?作用：獲取某元素指定的屬性值
?? ??? ??? ??? ?attrName：要獲取的屬性的名稱
?? ??? ??? ??? ?返回值attrName屬性名對應的值
?? ??? ??? ??? ?注意：獲取的屬性值，必須要在標簽中編寫出來，否則值為null
?? ??? ??? ?2、setAttribute（attrName，attrValue）
?? ??? ??? ??? ?作用：修改指定屬性的值
?? ??? ??? ??? ?attrName：要修改的屬性的名稱
?? ??? ??? ??? ?attrValue：要修改屬性名的值
?? ??? ??? ??? ?說明：setAttribute（"value","aa"）只會改變value的默認值，如果此時表單控件框中有值是不會被修改的。與getAttribute（）聯合使用，不要和value屬性混合使用。
?? ??? ??? ?3、removeAttribute（attrName）
?? ??? ??? ??? ?作用：將attrName屬性從元素中刪除出去
?? ??? ??? ?練習：
?? ??? ??? ??? ?1、網頁中創建一個a標記，內容為 百度 ，鏈接地址為https://www.baidu.com
?? ??? ??? ??? ?2、網頁中創建一個按鈕，文本為修改
?? ??? ??? ??? ?3、點擊按鈕時，將超鏈接的文本修改為 騰訊，將超鏈接的地址修改為 http:www.qq.com
?? ??? ?5、元素的樣式
?? ??? ??? ?1、使用setAttribute（）設置class屬性值
?? ??? ??? ??? ?elem.setAttribute（“class”，”類選擇器名稱“）；
?? ??? ??? ?2、使用元素的className屬性修改class值
?? ??? ??? ??? ?elem.className="類選擇器"；
?? ??? ??? ?3、自定義元素樣式
?? ??? ??? ??? ?elem.style.css屬性 = 值 ；
?? ??? ??? ??? ?注意：如果CSS屬性名中包含-連字符的話，連字符要取消，并且-后面的第一個字符要變大寫
??? ??? ??? ??? ?elem.style.color = 'red';
??? ??? ??? ??? ?elem.style.fontSize = "18px";
??? ??? ??? ??? ?elem.style.borderRightColor = 'yellow';
??? ??? ?6、增加節點
??? ??? ??? ?1、創建元素節點
??? ??? ??? ??? ?var elem = document.createElement(”元素名“);
??? ??? ??? ??? ?elem:表示創建好的DOM元素
??? ??? ??? ?2、增加節點
??? ??? ??? ??? ?1、document.boby.appendChild(elem):向body中追加新元素elem，在body中的最后一個元素
??? ??? ??? ??? ?2、parentNode.appendChild(elem)：將elem追加到parentNode的內部
??? ??? ??? ??? ??? ?parentNode：表示的是已經存在的一個元素
??? ??? ??? ??? ?3、parentNode.insertBefore(newElem,oldElem)
??? ??? ??? ??? ??? ?將newElem元素插入到parentNode中oldElem之前
??? ??? ??? ??? ?說明：創建一個元素節點，只能增加一次，不能多次增加該元素
??? ??? ?7、刪除節點：
??? ??? ??? ?刪除節點只能由父元素來發起
??? ??? ??? ?1、document.body.removeChild(elem)：刪除body中的elem元素
??? ??? ??? ?2、parentNode.removeChild(elem)：在parentNode中刪除elem元素

??? ?4、事件
??? ??? ?1、什么是事件：允許通過特殊的行為來激發的操作
??? ??? ?2、常用的事件
??? ??? ??? ?1、鼠標事件
??? ??? ??? ??? ?1、click：鼠標單擊事件
??? ??? ??? ??? ?2、mousevoer：鼠標進入元素時激發的事件
??? ??? ??? ??? ?3、mousemove：鼠標在元素內移動時激發的事件
??? ??? ??? ??? ?4、mouseout：鼠標從元素內移出時激發的事件
??? ??? ??? ?2、鍵盤事件
??? ??? ??? ??? ?1、keydown：鍵位按下時的事件
??? ??? ??? ??? ?2、keypress：鍵位按下時的事件
??? ??? ??? ??? ?3、keyup：鍵位抬起時的事件
??? ??? ??? ?3、狀態改變事件
??? ??? ??? ??? ?1、load：當元素加載完畢時觸發的事件
??? ??? ??? ??? ?2、change：當元素發生改變時觸發的事件,一般用在select下拉框中
??? ??? ??? ??? ?3、focus：當元素獲取焦點時觸發的事件
??? ??? ??? ??? ?4、blur：當元素失去焦點時觸發的事件
??? ??? ??? ??? ?5、submit：當表單被提交時觸發的事件
??? ??? ??? ?注意：在為html元素綁定事件時，必須要在事件名前加 on
??? ??? ?3、綁定事件的方式
??? ??? ??? ?1、在元素中綁定事件
??? ??? ??? ??? ?<button οnclick=""></button>
??? ??? ??? ??? ?<input οnblur="">
??? ??? ??? ?2、在js中動態的為元素綁定事件
??? ??? ??? ??? ?<script>
??? ??? ??? ??? ??? ?var div = $("d1");
??? ??? ??? ??? ??? ?div.on事件名 = function（）{

??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ?div.onclick = function(){

??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ?</script>
??? ??? ??? ??? ?或者
??? ??? ??? ??? ?<script>
??? ??? ??? ??? ??? ?function func(){

??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ?var div = $("d1");
??? ??? ??? ??? ??? ?div.on事件名 = func；

??? ??? ??? ??? ?</script>
??? ??? ?4、事件行為詳解
??? ??? ??? ?1、load事件
??? ??? ??? ??? ?常用場合：當網頁加載完畢時，要執行的操作
??? ??? ??? ??? ?方式1：在元素中綁定事件
??? ??? ??? ??? ??? ??? ?<body οnlοad="函數（）"></dody>
??? ??? ??? ??? ?方式2：JS中動態綁定事件
??? ??? ??? ??? ??? ?<script>
??? ??? ??? ??? ??? ??? ?window.onload = function(){
??? ??? ??? ??? ??? ??? ??? ?//網頁中其他元素加載完畢時，才會執行
??? ??? ??? ??? ??? ??? ??? ?var div = $("d1");
??? ??? ??? ??? ??? ??? ??? ?div.onclick = function(){
??? ??? ??? ??? ??? ??? ??? ?this:指的是綁定事件的元素
??? ??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ?</script>
??? ??? ??? ?2、submit事件
??? ??? ??? ??? ?功能：表單被提交時要觸發的事件
??? ??? ??? ??? ?注意：通過一個boolean的返回值，通知表單是否被提交，返回值為true可以提交表單，為false不能提交
??? ??? ??? ??? ??? ?<form οnsubmit="return 函數（）">
??? ??? ??? ?3、focus事件
??? ??? ??? ??? ?功能：當元素獲取焦點時觸發的事件
??? ??? ??? ?4、blur事件
??? ??? ??? ??? ?功能：當元素失去焦點時觸發的事件
??? ??? ?5、事件對象（event對象）
??? ??? ??? ?1、什么是事件對象
??? ??? ??? ??? ?事件對象中封裝了事件中要用到的一些參數和一些操作
??? ??? ??? ?2、獲取事件對象（event對象）
??? ??? ??? ??? ?1、html元素中綁定事件
??? ??? ??? ??? ??? ?<ANY οnclick="btnClick(event)">//event表示事件對象，是實參，不可修改
??? ??? ??? ??? ??? ?<script>
??? ??? ??? ??? ??? ??? ?function btnClick(event){
??? ??? ??? ??? ??? ??? ??? ?//event表示事件對象，是形參，此處event可以修改，
??? ??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ?</script>
??? ??? ??? ??? ?2、使用JS動態綁定
??? ??? ??? ??? ??? ?<script>
??? ??? ??? ??? ??? ??? ?d1.onclick = function(event){

??? ??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ?</script>
??? ??? ??? ?3、事件對象的常用屬性
??? ??? ??? ??? ?1、事件源：觸發當前事件的元素
??? ??? ??? ??? ??? ?獲取事件源：
??? ??? ??? ??? ??? ??? ?通過event.target獲取事件源，返回DOM對象
??? ??? ??? ??? ?2、鼠標事件
??? ??? ??? ??? ??? ?1、offsetX,offsetY
??? ??? ??? ??? ??? ??? ?獲取鼠標在 元素上的坐標，以元素的左上角（border內邊緣）為（0,0）計算的
??? ??? ??? ??? ??? ?2、clientX,clientY
??? ??? ??? ??? ??? ??? ?獲取鼠標在網頁上的坐標，以網頁左上角為（0，0）計算的
??? ??? ??? ??? ??? ?3、screenX，screenY
??? ??? ??? ??? ??? ??? ?獲取鼠標在 顯示器上的坐標點，以屏幕左上角為（0,0）計算的
??? ??? ??? ??? ?3、鍵盤事件
??? ??? ??? ??? ??? ?1、event.key
??? ??? ??? ??? ??? ??? ?得到按下鍵的字符
??? ??? ??? ??? ??? ?2、event.which :在keypress事件中 和在keydown事件中的含義不同
??? ??? ??? ??? ??? ??? ?1、在keypress中
??? ??? ??? ??? ??? ??? ??? ?event.which：表示按下字符的ASCII碼
??? ??? ??? ??? ??? ??? ?2、在keydown中
??? ??? ??? ??? ??? ??? ??? ?event.which：表示的是鍵位碼，只記錄鍵位，不記錄字符（大小寫英文字母的鍵位碼是相同的，一些數字和標點的鍵位碼有可能是相同的）
??? ??? ??? ?4、事件冒泡
??? ??? ??? ??? ?1、什么是事件冒泡
??? ??? ??? ??? ??? ?當激發了子元素的事件時，把父元素對應的事件也一并給執行了
??? ??? ??? ??? ??? ?場合：
??? ??? ??? ??? ??? ??? ?1、必須是父子元素或具備層級關系的元素
??? ??? ??? ??? ??? ??? ?2、為元素們設置了相同的事件
??? ??? ??? ??? ?2、阻止事件冒泡
??? ??? ??? ??? ??? ?只讓事件在當前元素中執行，不向上冒泡
??? ??? ??? ??? ??? ?event.stopPropagation();

jQuery
?? ?1、jQuery的簡介
?? ??? ?是一個輕量級的JS庫-是一個封裝好的JS文件。提供了更為簡便的頁面元素操作方式。
?? ??? ?封裝了 DOM，JS，CSS
?? ??? ?核心理念： Write Less Do More
?? ??? ?jQuery版本：
?? ??? ??? ?jQuery 3.3.1
?? ??? ??? ?jQuery 2.x：不再支持IE6,7,8
?? ??? ??? ?jQuery 1.11.x
?? ?2、使用jQuery
?? ??? ?1、引入jQuery文件
?? ??? ??? ?<script src='文件路徑'></script>
?? ??? ??? ?注意：引入文件的操作必須放在其他jQuery操作之前
?? ??? ?2、使用jQuery
?? ?3、jQuery對象
?? ??? ?1、什么是jQuery對象
?? ??? ??? ?jQuery對象是由jQuery對頁面元素進行封裝后的一種體現
?? ??? ??? ?jQuery中所提供的所有操作都只針對jQuery對象，其他對象不能使用（如DOM對象）
?? ??? ?2、工廠函數 - $()
?? ??? ??? ?想要獲取jQuery對象 或 轉換為jQuery對象的話，就必須要使用工廠函數
?? ??? ?3、DOM對象和jQuery對象之間的轉換
?? ??? ??? ?DOM對象：以DOM的方式獲取出來的節點對象，都是DOM對象，DOM對象只能使用DOM中所提供的方法和屬性，是不能訪問jQUery提供的屬性和方法
?? ??? ??? ?jQuery對象：有jQuery封裝而得到的對象。jQuery對象只能訪問jQuery提供的屬性和方法，是不能訪問DOM提供的屬性和方法
?? ??? ??? ?1、將DOM對象轉換為jQuery對象
?? ??? ??? ??? ?語法:var $obj = $(DOM對象)；
?? ??? ??? ??? ?注意：在為jQuery對象起名的時候，最好在變量名稱前 + $;
?? ??? ??? ?2、將jQuery對象轉換為DOM對象
?? ??? ??? ??? ?1、var dom對象 = jQuery對象.get(0);
?? ??? ??? ??? ?2、var dom對象 = jQuery對象[0];
?? ?4、JS中創建對象（補充）
?? ??? ?1、使用Object 直接創建對象
?? ??? ??? ?var newObj = new Object（）；
?? ??? ??? ?newObj.property = value1；//添加屬性
?? ??? ??? ?newObj.method1 = function(){
?? ??? ??? ??? ?//添加無參方法
?? ??? ??? ?}
?? ??? ??? ?newObj.method2 =function（arg）{
?? ??? ??? ??? ?//添加含參方法
?? ??? ??? ?}
?? ??? ?2、使用構造器創建對象
?? ??? ??? ?function 對象名（參數1，參數2，....）{
?? ??? ??? ??? ?//只能使用this來訪問或創建當前對象的成員

?? ??? ??? ??? ?//使用參數為屬性賦值
?? ??? ??? ??? ?this.屬性1 = 參數1；
?? ??? ??? ??? ?this.屬性2 = 參數2；
?? ??? ??? ??? ?//創建方法
?? ??? ??? ??? ?this.funName = function(){

?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?使用對象
?? ??? ??? ?var obj1 = new 對象名（參數1，參數2，...）
?? ??? ?3、使用JSON創建對象
?? ??? ??? ?1、什么是JSON
?? ??? ??? ??? ?JSON：JavaScript Object Notation - JS對象的表現形式
?? ??? ??? ??? ?JSON通常會作為輕量級的數據交換格式
?? ??? ??? ??? ?JSON一般表示只有屬性沒有方法的對象
?? ??? ??? ?2、聲明JSON對象
?? ??? ??? ??? ?1、使用鍵值對的方式來聲明數據，鍵表示該對象的屬性，值表示該對象的值
?? ??? ??? ??? ?2、所有的屬性，必須用""雙引號引起來，如果值是字符串的話，也必須用""雙引號引起來，單引號有時不好用
?? ??? ??? ??? ?3、屬性和值之間用：隔開
?? ??? ??? ??? ?4、多對屬性之間用，隔開
?? ??? ??? ??? ?5、JSON對象使用{}來表示
?? ??? ??? ??? ?var person = {"name":"張無忌","age":25,"gender":"Male"}
?? ?5、jQuery選擇器
?? ??? ?1、作用：獲取頁面上的元素們，返回jQuery對象所組成的數組
?? ??? ??? ?語法：$（"選擇器"）；
?? ??? ?2、選擇器的分類
?? ??? ??? ?1、基礎選擇器
?? ??? ??? ??? ?1、ID選擇器
?? ??? ??? ??? ??? ?用法：$("#ID值")
?? ??? ??? ??? ??? ?說明：返回HTML中指定ID的元素
?? ??? ??? ??? ?2、類選擇器
?? ??? ??? ??? ??? ?用法：$(".className")
?? ??? ??? ??? ??? ?說明：返回HTML中所有class為className的元素
?? ??? ??? ??? ?3、元素選擇器
?? ??? ??? ??? ??? ?用法:$("元素名稱")
?? ??? ??? ??? ??? ?說明：返回HTML中所有指定標記的元素
?? ??? ??? ??? ?4、通用選擇器
?? ??? ??? ??? ??? ?用法：$("*")
?? ??? ??? ??? ??? ?說明：返回HTML中所有的元素
?? ??? ??? ??? ?5、群組選擇器
?? ??? ??? ??? ??? ?用法：$("selector,selector2,...")
?? ??? ??? ??? ??? ?說明：返回滿足工廠函數內多有選擇器的元素
?? ??? ??? ?2、層級選擇器：
?? ??? ??? ??? ?1、$("selector1 selector2"):后代選擇器
?? ??? ??? ??? ?2、$("selector1 > selector2"):子代選擇器
?? ??? ??? ??? ?3、$("selector1 + selector2")：相鄰兄弟選擇器
?? ??? ??? ??? ??? ?說明：匹配緊緊跟在selector1后面且滿足selector2選擇器的元素，如果selector1緊后面的元素不滿足selector2時，則找不到
?? ??? ??? ??? ?4、$("selector1 ～ selector2")：通用兄弟選擇器
?? ??? ??? ??? ??? ?說明：匹配selector1后面且滿足selector2選擇器的所有元素
?? ??? ??? ?3、過濾選擇器
?? ??? ??? ??? ?1、基本過濾選擇器
?? ??? ??? ??? ??? ?1、：first：只匹配到一組元素中的第一個
?? ??? ??? ??? ??? ?2、：last：只匹配到一組元素中的最后一個
?? ??? ??? ??? ??? ?3、：not（selector）：在一組元素中，將滿足selector的元素排除出去
?? ??? ??? ??? ??? ?4、：odd：匹配 (奇數索引1,3,5,7,...）的元素
?? ??? ??? ??? ??? ?5、：even：匹配（偶數索引0,2,4，...）的元素
?? ??? ??? ??? ??? ?6、：eq（index）：匹配下標等于index的元素
?? ??? ??? ??? ??? ?7、：gt（index）：匹配下標大于index的元素
?? ??? ??? ??? ??? ?8、：lt（index）：匹配下標小于index的元素
?? ??? ??? ??? ?2、內容過濾選擇器
?? ??? ??? ??? ??? ?1、：contains（“text”）：匹配包含指定文本的元素
?? ??? ??? ??? ??? ?2、：empty：匹配空元素（不包含任何子元素以及文本）
?? ??? ??? ??? ??? ?3、：has（selector）：匹配含有指定選擇器的元素
?? ??? ??? ??? ??? ?4、：parent：匹配本身是父元素的元素
?? ??? ??? ??? ?3、可見性過濾選擇器
?? ??? ??? ??? ??? ?1、：visible：匹配所有的可見元素
?? ??? ??? ??? ??? ?2、：hidded: 匹配所有不可見元素
?? ??? ??? ??? ?4、狀態過濾選擇器
?? ??? ??? ??? ??? ?主要用在表單控件上
?? ??? ??? ??? ??? ?1、：enabled：匹配所有的可用元素
?? ??? ??? ??? ??? ?2、：disabled：匹配所有禁用元素
?? ??? ??? ??? ??? ?3、：checked：匹配所有被選中的元素（radio 和 checkbox）
?? ??? ??? ??? ??? ?4、：selected：匹配所有被選中的元素（select）
?? ??? ??? ??? ?5、子元素過濾選擇器
?? ??? ??? ??? ??? ?1、：first-child：匹配屬于其父元素中的第一個子元素
?? ??? ??? ??? ??? ?2、：last-child：匹配屬于其父元素中的最后一個子元素
?? ??? ??? ??? ??? ?3、：nth-child（n）：匹配屬于其父元素的第n個子元素
?? ??? ??? ??? ??? ??? ?說明：n>=0的任意一個數，（n+1）表示大于0的任意整數，但是不能寫成（1+n），n需要寫在表達式之前
?? ??? ??? ?4、屬性選擇器
?? ??? ??? ??? ?使用元素的屬性來匹配頁面的元素
?? ??? ??? ??? ?1、[attr]：匹配具有attr屬性的元素
?? ??? ??? ??? ??? ?示例：$["id"]匹配所有具有id屬性的元素
?? ??? ??? ??? ?2、[attr=value]：匹配attr屬性值為value的元素
?? ??? ??? ??? ??? ?示例：匹配頁面中所有文本框
?? ??? ??? ??? ??? ??? ?1、$(":text")
?? ??? ??? ??? ??? ??? ?2、$("input[type='text']")
?? ??? ??? ??? ?3、[attr!=value]
?? ??? ??? ??? ?4、[attr^=value]：匹配attr屬性值是以value字符開始的元素們
?? ??? ??? ??? ?5、[attr$=value]：匹配attr屬性值是以value字符結束的元素們
?? ??? ??? ??? ?6、[attr*=value]：匹配attr屬性值中包含value字符的元素們
?? ?6、jQuery操作DOM
?? ??? ?1、基本操作
?? ??? ??? ?1、html（）：等同于DOM中的innerHTML
?? ??? ??? ??? ?作用：讀取或者設置jQuery對象中的HTML內容，無參數表示獲取，有參數表示設置
?? ??? ??? ?2、text（）：等同于DOM中的innerText
?? ??? ??? ?3、val（）：等同于DOM中的value
?? ??? ??? ?4、屬性操作
?? ??? ??? ??? ?1、attr（）：
?? ??? ??? ??? ??? ?作用：讀取或設置jQuery對象的屬性值
?? ??? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ??? ?1、$("#main").attr("id");：獲取id屬性值
?? ??? ??? ??? ??? ??? ?2、$("#main").attr("class","redBack")；：設置class屬性值為reBack
?? ??? ??? ??? ?2、removeAttr（attrName）
?? ??? ??? ??? ??? ?作用：刪除jQuery對象的指定屬性
?? ??? ?2、樣式操作
?? ??? ??? ?1、attr（"class","className"）:為元素動態綁定class屬性值
?? ??? ??? ?2、$obj.addClass("className")：追加類選擇器
?? ??? ??? ??? ?$obj.addClass("c1").addClass("c2").addClass("c3").html('測試文本')；
?? ??? ??? ?3、removeClass（”className“）：刪除指定的類選擇器
?? ??? ??? ?4、removeClass（）：刪除所有的類選擇器
?? ??? ??? ?5、toggleClass（”className“）：
?? ??? ??? ??? ?樣式切換
?? ??? ??? ??? ??? ?元素如果具有className選擇器，則刪除
?? ??? ??? ??? ??? ?元素如果沒有className選擇器，則添加
?? ??? ??? ?6、hasClass（”className“）：判斷元素是否包含className選擇器
?? ??? ??? ?7、css（”屬性“，”值“）：為元素動態的設置某css屬性和值
?? ??? ??? ??? ?$obj.css("background-color",'red');
?? ??? ??? ?8、css(JSON對象)
?? ??? ??? ??? ?$obj.css({
?? ??? ??? ??? ??? ?"color":"red",
?? ??? ??? ??? ??? ?"font-size":"32px",
?? ??? ??? ??? ?});
?? ??? ?3、遍歷節點
?? ??? ??? ?1、children（） / children(selector)
?? ??? ??? ??? ?獲取jQuery對象的所有子元素或帶有指定選擇器的子元素
?? ??? ??? ??? ?注意：以考慮子代元素，不考慮后代元素
?? ??? ??? ?2、next（）/ next(selector)
?? ??? ??? ??? ?獲取jQuery對象的下一個兄弟元素或滿足selector的下一個兄弟元素
?? ??? ??? ?3、prev（） / prev(selcetor)
?? ??? ??? ??? ?獲取jQuery對象的上一個兄弟元素或滿足selector的上一個兄弟元素
?? ??? ??? ?4、siblings（）/ siblings（selector）
?? ??? ??? ??? ?獲取jQuery對象的所有兄弟元素 或滿足selector的所有兄弟元素
?? ??? ??? ?5、find（selector）
?? ??? ??? ??? ?查找滿足selector選擇器的后代元素
?? ??? ??? ?6、parent（）
?? ??? ??? ??? ?查找jQuery對象的父元素
?? ??? ?4、創建和插入節點
?? ??? ??? ?1、創建對象
?? ??? ??? ??? ?語法：$("創建內容")
?? ??? ??? ??? ?示例：$("<div>文本內容</div>");
?? ??? ??? ?2、插入節點
?? ??? ??? ??? ?1、內部插入
?? ??? ??? ??? ??? ?1、$obj.append（$new）：將$new作為$obj的最后一個子元素插入進來
?? ??? ??? ??? ??? ?2、$obj.prepend($new)：將$new作為$obj的第一個子元素插入進來
?? ??? ??? ??? ?2、外部插入
?? ??? ??? ??? ??? ?1、$obj.after（$new）:將$new作為$obj的下一個兄弟元素插入進來
?? ??? ??? ??? ??? ?2、$obj.before（$new）:將$new作為$obj的上一個兄弟元素插入進來
?? ??? ?5、刪除節點
?? ??? ??? ?1、remove（）
?? ??? ??? ??? ?語法：$obj.remove（）：刪除$obj元素
?? ??? ??? ?2、remove（“selector”）: 按選擇器刪除元素
?? ??? ??? ?3、empty（）
?? ??? ??? ??? ?語法：$obj.empty():清空$obj中所有的內容
?? ??? ?6、替換和賦值（非重點）
?? ??? ??? ?1、替換
?? ??? ??? ??? ?1、replaceWith
?? ??? ??? ??? ??? ?語法：$old.replaceWith($new)
?? ??? ??? ??? ??? ?使用$new元素替換$old元素
?? ??? ??? ??? ?2、replaceAll
?? ??? ??? ??? ??? ?語法：$new.replaceAll($lod)
?? ??? ??? ??? ??? ?使用$new元素替換$old元素
?? ??? ??? ?2、賦值
?? ??? ??? ??? ?1、clone（）
?? ??? ??? ??? ??? ?$new = $old.clone();
?? ?7、jQuery事件
?? ??? ?1、頁面加載后執行
?? ??? ??? ?HTML頁面加載流程：
?? ??? ??? ??? ?1、向服務器發送請求
?? ??? ??? ??? ?2、接收服務器的相應
?? ??? ??? ??? ?3、在內存中生成DOM樹
?? ??? ??? ??? ?4、渲染-顯示內容到網頁上
?? ??? ??? ??? ?5、執行window.onload
?? ??? ? ?? ?jQuery處理的時候
?? ??? ? ?? ??? ?1、向服務器發送請求
?? ??? ??? ??? ?2、接收服務器的相應
?? ??? ??? ??? ?3、在內存中生成DOM樹
?? ??? ??? ??? ?4、執行 加載后的 操作
?? ??? ??? ??? ?5、渲染-顯示內容到網頁上
?? ??? ??? ?如何實現頁面加載后執行：
?? ??? ??? ??? ?1、$(document).ready(function(){
?? ??? ??? ??? ??? ?//頁面的初始化操作，DOM樹加載完成后就開始執行
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?2、$().ready(function(){
?? ??? ??? ??? ??? ?//頁面的初始化操作，DOM樹加載完成后就開始執行
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?3、$(function(){
?? ??? ??? ??? ??? ?//頁面的初始化操作，DOM樹加載完成后就開始執行
?? ??? ??? ??? ??? ?});
?? ??? ?2、jQuery實現事件的綁定
?? ??? ??? ?1、方式1
?? ??? ??? ??? ?$obj.bind("事件名稱"，function（）{
?? ??? ??? ??? ??? ?//事件操作
?? ??? ??? ??? ??? ?//允許使用this來表示當前元素(dom對象)
?? ??? ??? ??? ?})；
?? ??? ??? ??? ?$obj.bind("事件名稱"，function（event）{
?? ??? ??? ??? ??? ?//事件操作
?? ??? ??? ??? ??? ?//允許使用this來表示當前元素(dom對象),
?? ??? ??? ??? ??? ?//允許傳遞event對象，作為事件對象
?? ??? ??? ??? ?})；
?? ??? ??? ?2、方式2
?? ??? ??? ??? ?$obj.事件名（function（）{
?? ??? ??? ??? ??? ?//事件操作
?? ??? ??? ??? ??? ?//允許使用this來表示當前元素(dom對象)
?? ??? ??? ??? ?}）；
?? ??? ??? ??? ?$obj.事件名（function（event）{
?? ??? ??? ??? ??? ?//事件操作
?? ??? ??? ??? ??? ?//允許使用this來表示當前元素(dom對象)
?? ??? ??? ??? ??? ?//允許傳遞event對象，作為事件對象
?? ??? ??? ??? ?}）；
?? ?8、jQuery動畫
?? ??? ?1、基本顯示 和 隱藏
?? ??? ??? ?語法：
?? ??? ??? ??? ?顯示：$obj.show(); / $obj.show(duration);毫秒為單位
?? ??? ??? ??? ?隱藏：$obj.hide(); / $obj.hide(duration);毫秒為單位
?? ??? ?2、滑動式顯示 和 隱藏
?? ??? ??? ?語法：
?? ??? ??? ??? ?顯示：$obj.slideDown() / $obj.slideDown(duration);毫秒為單位
?? ??? ??? ??? ?隱藏：$obj.slideUp()? /?? ? $obj.slideUp(duration);毫秒為單位?? ?
?? ??? ?3、淡入淡出式顯示 和 隱藏
?? ??? ??? ?語法：
?? ??? ??? ??? ?顯示：$obj.fadeIn() /?? $obj.fadeIn(duration);毫秒為單位
?? ??? ??? ??? ?隱藏：$obj.fadeOut()?? ?/? $obj.fadeOut(duration);毫秒為單位? ? ? ??

　　9、jQuery插件

　　　　http://www.jq22.com

　　　　1、下載插件并引入（jquery,插件文件，css文件）

　　　　2、結合當前網頁修改css

　　　　3、去插件中修改數據（替換圖片/圖片名稱）

　　10、jQuery循環

　　　　each（）函數

　　　　方式1：

　　　　　　$(遍歷對象).each(function(下標,遍歷出來的數據){})

　　　　方式2：

　　　　　　$.each(遍歷對象，function(下標，遍歷出來的數據){})

　　　　說明：如果遍歷的是字典的話下標就代表 字典的鍵 ，遍歷出來的數據就是 字典的值

<body><script src="/static/js/jquery-1.11.3.js"></script><script>var arr = [{"name":"xdl","age": 20,"gender":"男",},{"name":"gj","age": 18,"gender":"女",},]$(arr).each(function(i,obj){console.log(i+"："+obj.name);})$.each(arr,function (i,obj){console.log(i+"："+obj.name);})</script> </body>

?

?? ??? ??? ??? ?

轉載于:https://www.cnblogs.com/xdl-smile/p/9484892.html

總結

以上是生活随笔為你收集整理的JSjQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。