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

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

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


?? ?3、數(shù)據(jù)類型轉(zhuǎn)換
?? ??? ?1、隱式轉(zhuǎn)換
?? ??? ??? ?不同類型的數(shù)據(jù)在左加法運算時，會進行自動轉(zhuǎn)換
?? ??? ??? ?1、字符串+數(shù)字：將數(shù)字轉(zhuǎn)換為字符串
?? ??? ??? ??? ?var num = 15；
?? ??? ??? ??? ?var str = ‘18’；
?? ??? ??? ??? ?var r = num+str；//1518
?? ??? ??? ??? ?var r = '15'+18+15;//151815
?? ??? ??? ??? ?var r =? 15+18+'15';//3315
?? ??? ??? ?2、數(shù)字+布爾：將布爾轉(zhuǎn)為數(shù)字做加法（true轉(zhuǎn)為1，false轉(zhuǎn)為0）
?? ??? ??? ?3、字符串+布爾：將布爾轉(zhuǎn)為字符串做連接
?? ??? ??? ??? ?var boo = true；
?? ??? ??? ??? ?var str = ‘Hello’；
?? ??? ??? ??? ?var r = boo+str；//trueHello
?? ??? ??? ?4、布爾+布爾：都轉(zhuǎn)為數(shù)字做加法運算
?? ??? ?2、強制轉(zhuǎn)換（轉(zhuǎn)換函數(shù)）
?? ??? ??? ?1、toString（）：將任意類型的數(shù)據(jù)轉(zhuǎn)為字符串，并返回轉(zhuǎn)換后的結(jié)果
?? ??? ??? ??? ?語法：
?? ??? ??? ??? ??? ?var r = 變量.toString();
?? ??? ??? ??? ??? ?var r = 變量+'';
?? ??? ??? ?2、parseInt（）
?? ??? ??? ??? ?作用：將指定的數(shù)據(jù)盡量轉(zhuǎn)換為整數(shù)，如果實在無法轉(zhuǎn)換的話，則返回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（）
?? ??? ??? ??? ?作用：盡量將任意類型的數(shù)據(jù)轉(zhuǎn)為小數(shù)，如果實在無法轉(zhuǎn)換的話，那么結(jié)果為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（）
?? ??? ??? ??? ?作用：將任意類型的數(shù)據(jù)轉(zhuǎn)為數(shù)字，只要包含非法字符，結(jié)果就是NaN
?? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ?1、var r = Number('123hello');
?? ??? ??? ??? ??? ??? ?r:NaN
6、運算符
?? ?1、算數(shù)運算符
?? ??? ?1、+ - * /? %
?? ??? ?2、++ --
?? ??? ??? ?++：自增運算符，在自身基礎(chǔ)上做+1操作
?? ??? ??? ?--：自減運算符，在自身基礎(chǔ)上做-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、關(guān)系運算符（比較運算符）
?? ??? ?> < >= <= == != === !==
?? ??? ?1、10>5:true
?? ??? ?2、'10'>5:true
?? ??? ??? ?運算符兩端如果有一個是數(shù)字的話，那么另外一個會自動轉(zhuǎn)換（通過Number）成數(shù)字，再進行比較
?? ??? ?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
?? ??? ?===、判斷數(shù)值和數(shù)據(jù)類型必須全相等時才返回true
?? ??? ?!==、只要數(shù)值或數(shù)據(jù)類型中有一個不相等即返回true
?? ?3、邏輯運算符
?? ??? ?！：邏輯非，等同于python中的not
?? ??? ?&&：邏輯與，and
?? ??? ?||：邏輯或，or
?? ?4、為運算符
?? ??? ?1、按位與 &：兩個數(shù)字的二進制進行比較，對應(yīng)位都為1，則該結(jié)果為1，否則 為0
?? ??? ??? ?場合：奇偶性驗證，將一個數(shù)與1按位求與，結(jié)果為1則為奇數(shù)，否則為偶數(shù)
?? ??? ??? ??? ?7 & 1 =1
?? ??? ??? ??? ??? ?7:111
?? ??? ??? ??? ??? ?1:001
?? ??? ?2、按位或 |：只要有1即為1，
?? ??? ?3、按位異或^:不同則為1，相同則為0
?? ??? ??? ?場合：不借助第三方變換兩個數(shù)字
?? ??? ??? ?示例:
?? ??? ??? ??? ?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;
?? ??? ??? ?當條件表達式的結(jié)果為true的時候，執(zhí)行表達式1中的內(nèi)容，并將表達式1的結(jié)果作為整體表達式的結(jié)果，否則執(zhí)行表達式2
?? ??? ?練習：
?? ??? ??? ?BMI計算器
?? ??? ??? ?1、分兩次從彈框中輸入數(shù)據(jù)
?? ??? ??? ??? ?1、第一次：輸入 身高（m）
?? ??? ??? ??? ?2、第二次：輸入 體重（kg）
?? ??? ??? ?2、計算bmi
?? ??? ??? ??? ?bmi = 體重 /(身高*身高)
?? ??? ??? ?3、
?? ??? ??? ??? ?如果bmi的值小于20，提示偏瘦
?? ??? ??? ??? ?如果bmi的值大于25，提示偏胖
?? ??? ??? ??? ?否則：提示正常
?? ?6、賦值運算符
?? ??? ?+= -= *= /= ^=
?? ??? ?a ^= b 等價于 a =


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

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

?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?外層循環(huán)走一次，內(nèi)層循環(huán)走一輪

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

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

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

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

?? ??? ??? ?在網(wǎng)頁加載HTML的時候，會在內(nèi)存中生成一棵節(jié)點樹（DOM樹），DOM樹的根就是document
?? ??? ??? ?每個元素其實都是DOM樹上的一個節(jié)點

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

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

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

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

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

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

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

??? ??? ??? ??? ??? ??? ?}
??? ??? ??? ??? ??? ?</script>
??? ??? ??? ?3、事件對象的常用屬性
??? ??? ??? ??? ?1、事件源：觸發(fā)當前事件的元素
??? ??? ??? ??? ??? ?獲取事件源：
??? ??? ??? ??? ??? ??? ?通過event.target獲取事件源，返回DOM對象
??? ??? ??? ??? ?2、鼠標事件
??? ??? ??? ??? ??? ?1、offsetX,offsetY
??? ??? ??? ??? ??? ??? ?獲取鼠標在 元素上的坐標，以元素的左上角（border內(nèi)邊緣）為（0,0）計算的
??? ??? ??? ??? ??? ?2、clientX,clientY
??? ??? ??? ??? ??? ??? ?獲取鼠標在網(wǎng)頁上的坐標，以網(wǎng)頁左上角為（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：表示的是鍵位碼，只記錄鍵位，不記錄字符（大小寫英文字母的鍵位碼是相同的，一些數(shù)字和標點的鍵位碼有可能是相同的）
??? ??? ??? ?4、事件冒泡
??? ??? ??? ??? ?1、什么是事件冒泡
??? ??? ??? ??? ??? ?當激發(fā)了子元素的事件時，把父元素對應(yīng)的事件也一并給執(zhí)行了
??? ??? ??? ??? ??? ?場合：
??? ??? ??? ??? ??? ??? ?1、必須是父子元素或具備層級關(guān)系的元素
??? ??? ??? ??? ??? ??? ?2、為元素們設(shè)置了相同的事件
??? ??? ??? ??? ?2、阻止事件冒泡
??? ??? ??? ??? ??? ?只讓事件在當前元素中執(zhí)行，不向上冒泡
??? ??? ??? ??? ??? ?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對頁面元素進行封裝后的一種體現(xiàn)
?? ??? ??? ?jQuery中所提供的所有操作都只針對jQuery對象，其他對象不能使用（如DOM對象）
?? ??? ?2、工廠函數(shù) - $()
?? ??? ??? ?想要獲取jQuery對象 或 轉(zhuǎn)換為jQuery對象的話，就必須要使用工廠函數(shù)
?? ??? ?3、DOM對象和jQuery對象之間的轉(zhuǎn)換
?? ??? ??? ?DOM對象：以DOM的方式獲取出來的節(jié)點對象，都是DOM對象，DOM對象只能使用DOM中所提供的方法和屬性，是不能訪問jQUery提供的屬性和方法
?? ??? ??? ?jQuery對象：有jQuery封裝而得到的對象。jQuery對象只能訪問jQuery提供的屬性和方法，是不能訪問DOM提供的屬性和方法
?? ??? ??? ?1、將DOM對象轉(zhuǎn)換為jQuery對象
?? ??? ??? ??? ?語法:var $obj = $(DOM對象)；
?? ??? ??? ??? ?注意：在為jQuery對象起名的時候，最好在變量名稱前 + $;
?? ??? ??? ?2、將jQuery對象轉(zhuǎn)換為DOM對象
?? ??? ??? ??? ?1、var dom對象 = jQuery對象.get(0);
?? ??? ??? ??? ?2、var dom對象 = jQuery對象[0];
?? ?4、JS中創(chuàng)建對象（補充）
?? ??? ?1、使用Object 直接創(chuàng)建對象
?? ??? ??? ?var newObj = new Object（）；
?? ??? ??? ?newObj.property = value1；//添加屬性
?? ??? ??? ?newObj.method1 = function(){
?? ??? ??? ??? ?//添加無參方法
?? ??? ??? ?}
?? ??? ??? ?newObj.method2 =function（arg）{
?? ??? ??? ??? ?//添加含參方法
?? ??? ??? ?}
?? ??? ?2、使用構(gòu)造器創(chuàng)建對象
?? ??? ??? ?function 對象名（參數(shù)1，參數(shù)2，....）{
?? ??? ??? ??? ?//只能使用this來訪問或創(chuàng)建當前對象的成員

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

?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?使用對象
?? ??? ??? ?var obj1 = new 對象名（參數(shù)1，參數(shù)2，...）
?? ??? ?3、使用JSON創(chuàng)建對象
?? ??? ??? ?1、什么是JSON
?? ??? ??? ??? ?JSON：JavaScript Object Notation - JS對象的表現(xiàn)形式
?? ??? ??? ??? ?JSON通常會作為輕量級的數(shù)據(jù)交換格式
?? ??? ??? ??? ?JSON一般表示只有屬性沒有方法的對象
?? ??? ??? ?2、聲明JSON對象
?? ??? ??? ??? ?1、使用鍵值對的方式來聲明數(shù)據(jù)，鍵表示該對象的屬性，值表示該對象的值
?? ??? ??? ??? ?2、所有的屬性，必須用""雙引號引起來，如果值是字符串的話，也必須用""雙引號引起來，單引號有時不好用
?? ??? ??? ??? ?3、屬性和值之間用：隔開
?? ??? ??? ??? ?4、多對屬性之間用，隔開
?? ??? ??? ??? ?5、JSON對象使用{}來表示
?? ??? ??? ??? ?var person = {"name":"張無忌","age":25,"gender":"Male"}
?? ?5、jQuery選擇器
?? ??? ?1、作用：獲取頁面上的元素們，返回jQuery對象所組成的數(shù)組
?? ??? ??? ?語法：$（"選擇器"）；
?? ??? ?2、選擇器的分類
?? ??? ??? ?1、基礎(chǔ)選擇器
?? ??? ??? ??? ?1、ID選擇器
?? ??? ??? ??? ??? ?用法：$("#ID值")
?? ??? ??? ??? ??? ?說明：返回HTML中指定ID的元素
?? ??? ??? ??? ?2、類選擇器
?? ??? ??? ??? ??? ?用法：$(".className")
?? ??? ??? ??? ??? ?說明：返回HTML中所有class為className的元素
?? ??? ??? ??? ?3、元素選擇器
?? ??? ??? ??? ??? ?用法:$("元素名稱")
?? ??? ??? ??? ??? ?說明：返回HTML中所有指定標記的元素
?? ??? ??? ??? ?4、通用選擇器
?? ??? ??? ??? ??? ?用法：$("*")
?? ??? ??? ??? ??? ?說明：返回HTML中所有的元素
?? ??? ??? ??? ?5、群組選擇器
?? ??? ??? ??? ??? ?用法：$("selector,selector2,...")
?? ??? ??? ??? ??? ?說明：返回滿足工廠函數(shù)內(nèi)多有選擇器的元素
?? ??? ??? ?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：匹配 (奇數(shù)索引1,3,5,7,...）的元素
?? ??? ??? ??? ??? ?5、：even：匹配（偶數(shù)索引0,2,4，...）的元素
?? ??? ??? ??? ??? ?6、：eq（index）：匹配下標等于index的元素
?? ??? ??? ??? ??? ?7、：gt（index）：匹配下標大于index的元素
?? ??? ??? ??? ??? ?8、：lt（index）：匹配下標小于index的元素
?? ??? ??? ??? ?2、內(nèi)容過濾選擇器
?? ??? ??? ??? ??? ?1、：contains（“text”）：匹配包含指定文本的元素
?? ??? ??? ??? ??? ?2、：empty：匹配空元素（不包含任何子元素以及文本）
?? ??? ??? ??? ??? ?3、：has（selector）：匹配含有指定選擇器的元素
?? ??? ??? ??? ??? ?4、：parent：匹配本身是父元素的元素
?? ??? ??? ??? ?3、可見性過濾選擇器
?? ??? ??? ??? ??? ?1、：visible：匹配所有的可見元素
?? ??? ??? ??? ??? ?2、：hidded: 匹配所有不可見元素
?? ??? ??? ??? ?4、狀態(tài)過濾選擇器
?? ??? ??? ??? ??? ?主要用在表單控件上
?? ??? ??? ??? ??? ?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的任意一個數(shù)，（n+1）表示大于0的任意整數(shù)，但是不能寫成（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字符結(jié)束的元素們
?? ??? ??? ??? ?6、[attr*=value]：匹配attr屬性值中包含value字符的元素們
?? ?6、jQuery操作DOM
?? ??? ?1、基本操作
?? ??? ??? ?1、html（）：等同于DOM中的innerHTML
?? ??? ??? ??? ?作用：讀取或者設(shè)置jQuery對象中的HTML內(nèi)容，無參數(shù)表示獲取，有參數(shù)表示設(shè)置
?? ??? ??? ?2、text（）：等同于DOM中的innerText
?? ??? ??? ?3、val（）：等同于DOM中的value
?? ??? ??? ?4、屬性操作
?? ??? ??? ??? ?1、attr（）：
?? ??? ??? ??? ??? ?作用：讀取或設(shè)置jQuery對象的屬性值
?? ??? ??? ??? ??? ?示例：
?? ??? ??? ??? ??? ??? ?1、$("#main").attr("id");：獲取id屬性值
?? ??? ??? ??? ??? ??? ?2、$("#main").attr("class","redBack")；：設(shè)置class屬性值為reBack
?? ??? ??? ??? ?2、removeAttr（attrName）
?? ??? ??? ??? ??? ?作用：刪除jQuery對象的指定屬性
?? ??? ?2、樣式操作
?? ??? ??? ?1、attr（"class","className"）:為元素動態(tài)綁定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（”屬性“，”值“）：為元素動態(tài)的設(shè)置某css屬性和值
?? ??? ??? ??? ?$obj.css("background-color",'red');
?? ??? ??? ?8、css(JSON對象)
?? ??? ??? ??? ?$obj.css({
?? ??? ??? ??? ??? ?"color":"red",
?? ??? ??? ??? ??? ?"font-size":"32px",
?? ??? ??? ??? ?});
?? ??? ?3、遍歷節(jié)點
?? ??? ??? ?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、創(chuàng)建和插入節(jié)點
?? ??? ??? ?1、創(chuàng)建對象
?? ??? ??? ??? ?語法：$("創(chuàng)建內(nèi)容")
?? ??? ??? ??? ?示例：$("<div>文本內(nèi)容</div>");
?? ??? ??? ?2、插入節(jié)點
?? ??? ??? ??? ?1、內(nèi)部插入
?? ??? ??? ??? ??? ?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、刪除節(jié)點
?? ??? ??? ?1、remove（）
?? ??? ??? ??? ?語法：$obj.remove（）：刪除$obj元素
?? ??? ??? ?2、remove（“selector”）: 按選擇器刪除元素
?? ??? ??? ?3、empty（）
?? ??? ??? ??? ?語法：$obj.empty():清空$obj中所有的內(nèi)容
?? ??? ?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、頁面加載后執(zhí)行
?? ??? ??? ?HTML頁面加載流程：
?? ??? ??? ??? ?1、向服務(wù)器發(fā)送請求
?? ??? ??? ??? ?2、接收服務(wù)器的相應(yīng)
?? ??? ??? ??? ?3、在內(nèi)存中生成DOM樹
?? ??? ??? ??? ?4、渲染-顯示內(nèi)容到網(wǎng)頁上
?? ??? ??? ??? ?5、執(zhí)行window.onload
?? ??? ? ?? ?jQuery處理的時候
?? ??? ? ?? ??? ?1、向服務(wù)器發(fā)送請求
?? ??? ??? ??? ?2、接收服務(wù)器的相應(yīng)
?? ??? ??? ??? ?3、在內(nèi)存中生成DOM樹
?? ??? ??? ??? ?4、執(zhí)行 加載后的 操作
?? ??? ??? ??? ?5、渲染-顯示內(nèi)容到網(wǎng)頁上
?? ??? ??? ?如何實現(xiàn)頁面加載后執(zhí)行：
?? ??? ??? ??? ?1、$(document).ready(function(){
?? ??? ??? ??? ??? ?//頁面的初始化操作，DOM樹加載完成后就開始執(zhí)行
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?2、$().ready(function(){
?? ??? ??? ??? ??? ?//頁面的初始化操作，DOM樹加載完成后就開始執(zhí)行
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?3、$(function(){
?? ??? ??? ??? ??? ?//頁面的初始化操作，DOM樹加載完成后就開始執(zhí)行
?? ??? ??? ??? ??? ?});
?? ??? ?2、jQuery實現(xiàn)事件的綁定
?? ??? ??? ?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、結(jié)合當前網(wǎng)頁修改css

　　　　3、去插件中修改數(shù)據(jù)（替換圖片/圖片名稱）

　　10、jQuery循環(huán)

　　　　each（）函數(shù)

　　　　方式1：

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

　　　　方式2：

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

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

<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>

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/xdl-smile/p/9484892.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。