JS&jQuery
一、JavaScript概述
一、什麼是JavaScript
JavaScript簡稱JS，是一種專門運行於JS解釋器/引擎中的解釋型腳本語言
二、JS發展史
一、1992年Nombas公司開發了一款運行在網頁中的腳本語言，名稱爲CMM（c--），後來改名爲ScriptEase
二、1995年Netscape(網景)爲本身的瀏覽器Navigator2.0開發了另外一款腳本語言（LiveScript），改名爲JavaScript
三、1996年，Microsoft爲本身的IE3.0，發佈了JavaScript的克隆版本JScript
四、1997年，Netscape找到了ECMA（歐洲計算機制造商協會），將JS提交給了ECMA。今後JS的核心改名爲EMCA Script簡稱ES
JS的組成：
一、核心—EMCA Script：包含了JS的最基本的語法規範
二、文檔對象模型（Document Object Model）簡稱DOM
容許JS操做HTML網頁上的內容
DOM的規範是有W3C來制定的
三、瀏覽器對象模型（Browser Object MOdel）簡稱BOM
容許JS操做瀏覽器
二、使用JS（JS引用）
一、使用元素事件執行JS腳本代碼
事件：用戶在元素上所激發的行爲操做
一、onclick事件：當用戶點擊元素時作的操做
語法：
<ANY onclick="JS腳本代碼">
JS腳本代碼：
console.log（'向控制檯中輸出的內容'）;
二、嵌入在網頁中的<script></script>
語法：<script></script>在任何位置均可以
特色：
網頁加載的時候就開始執行
document.write():向網頁輸出一句話
注意：若是經過按鈕的單擊事件執行document.write()的話，則會刷新網頁內容
示例：
<script>
document.write("<h1>hello world<h1>")
<script>
三、將JS腳本寫在外部的JS文件中
步驟：
一、建立JS文件（XXX.js）並編寫腳本
二、在網頁中對js文件進行引入
<script src="js文件路徑">此處不能寫js代碼</script>
三、JS基礎語法
一、語法規範
一、JS都是由語句組成的
一、由運算符，表達式，關鍵字組成的稱爲語句
二、嚴格區分大小寫
三、每條語句必須以；分號表示結束
二、JS中的註釋
一、單行註釋：//註釋內容
二、多行註釋：/*註釋內容*/
四、JS中的變量 和 常量
一、變量
一、聲明變量的語法
聲明：var 變量名;
賦值：變量名 = 值;
聲明並賦值：var 變量名=值;
注意：
一、聲明變量時，儘可能使用var關鍵字，若是省略，也能夠，可是容易處問題（全局污染）
二、聲明變量但未賦值的話，默認值爲undefined
二、變量名的命名規範
一、不能使用JS中的關鍵字或保留關鍵字
二、有字母，數字，下劃線（_）和$組成
三、不能以數字開頭
四、儘可能不要重複
五、儘可能見名知意
六、如無特殊需求（團隊要求）的話，儘可能使用小駝峯命名法
二、常量
一、什麼是常量：一經聲明就不容許修改的數據就是常量
二、語法
const 常量名 = 值;
注意：常量名採用全大寫的形式
五、數據類型
一、做用：約束了數據在內存中所佔空間大小問題的
二、JS數據類型分類
一、基本數據類型（值類型）
一、number類型
數字類型，能夠表示32位的整數或64位的浮點數
整數：
表示十進制，八進制，十六進制
十進制：var num = 111；
八進制：var num = 010；
十六進制：var num = 0x10；
小數：
小數點計數法：var num = 123.456；
科學計數法：var num = 1.5e2；
二、string類型（所佔內存爲2-4字節）
字符串：都是由Unicode的字符，數字，標點組成的
一、查看字符的Unicode碼(能夠根據的Unicode碼對應的二進制判斷所佔內存（多少字節）)
var str = "張三丰";
var uCode =str.charCodeAt(0).toString(2)
二、若是將Unicode碼轉換成對應的字符(只能轉16進制的，若是是二進制或八進制須要先轉換成16進制)
已知Unicode碼：5f20
var str = '\u5f20';
console.log(str);
三、文中範圍
'\u4e00'~'\u9fa5'
四、轉義字符
\n: 換行
\t: 製表符
\": "
\': '
\\: \
三、boolean類型
布爾類型，只用於表示真（true）或假（false）
注意：
在參與數字運算時，true當作1運算，false當作0
四、查看數據類型
使用typeof() 或 typeof 均可以查看變量的數據類型
二、引用數據類型
三、數據類型轉換
一、隱式轉換
不一樣類型的數據在左加法運算時，會進行自動轉換
一、字符串+數字：將數字轉換爲字符串
var num = 15；
var str = ‘18’；
var r = num+str；//1518
var r = '15'+18+15;//151815
var r = 15+18+'15';//3315
二、數字+布爾：將布爾轉爲數字作加法（true轉爲1，false轉爲0）
三、字符串+布爾：將布爾轉爲字符串作鏈接
var boo = true；
var str = ‘Hello’；
var r = boo+str；//trueHello
四、布爾+布爾：都轉爲數字作加法運算
二、強制轉換（轉換函數）
一、toString（）：將任意類型的數據轉爲字符串，並返回轉換後的結果
語法：
var r = 變量.toString();
var r = 變量+'';
二、parseInt（）
做用：將指定的數據儘可能轉換爲整數，若是實在沒法轉換的話，則返回NaN（Not a Number）
示例：
一、var r = parseInt（‘456’）；
r：456
二、var r = parseInt（‘123.556’）；
r：123
三、var r = parseInt（‘123Hello’）；
r：123
四、var r = parseInt（‘hello123’）；
r：NaN
三、parseFloat（）
做用：儘可能將任意類型的數據轉爲小數，若是實在沒法轉換的話，那麼結果爲NaN
示例：
一、var r = parseFloat('3.14');
r:3.14
二、var r = parseFloat('3.14hello');
r:3.14
三、var r = parseFloat('hello3.14')
r:NaN
四、Number（）
做用：將任意類型的數據轉爲數字，只要包含非法字符，結果就是NaN
示例：
一、var r = Number('123hello');
r:NaN
六、運算符
一、算數運算符
一、+ - * / %
二、++ --
++：自增運算符，在自身基礎上作+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
二、關係運算符（比較運算符）
> < >= <= == != === !==
一、10>5:true
二、'10'>5:true
運算符兩端若是有一個是數字的話，那麼另一個會自動轉換（經過Number）成數字，再進行比較
三、'10a' > 5:false
四、"10a" < 5:false
NaN除了 != 運算時爲true，其餘都爲false
五、"10" > "5":false
比較的是字符1的ASCII 和 字符5的ASCII
六、"張三丰" > "張無忌"：false
比較三和無的Unicode碼的大小
七、’10‘ == 10 ：true
===、判斷數值和數據類型必須全相等時才返回true
!==、只要數值或數據類型中有一個不相等即返回true
三、邏輯運算符
！：邏輯非，等同於python中的not
&&：邏輯與，and
||：邏輯或，or
四、爲運算符
一、按位與 &：兩個數字的二進制進行比較，對應位都爲1，則該結果爲1，不然 爲0
場合：奇偶性驗證，將一個數與1按位求與，結果爲1則爲奇數，不然爲偶數
7 & 1 =1
7:111
1:001
二、按位或 |：只要有1即爲1，
三、按位異或^:不一樣則爲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
五、條件運算符（三目運算）
語法：？：
條件表達式 ？ 表達式1 ：表達式2;
當條件表達式的結果爲true的時候，執行表達式1中的內容，並將表達式1的結果做爲總體表達式的結果，不然執行表達式2
練習：
BMI計算器
一、分兩次從彈框中輸入數據
一、第一次：輸入 身高（m）
二、第二次：輸入 體重（kg）
二、計算bmi
bmi = 體重 /(身高*身高)
三、
若是bmi的值小於20，提示偏瘦
若是bmi的值大於25，提示偏胖
不然：提示正常
六、賦值運算符
+= -= *= /= ^=
a ^= b 等價於 a =
a^b
七、流程控制
一、程序控制結構
一、順序結構
二、分支結構/選擇結構
三、循環結構
二、分支結構
一、if結構
一、if結構
語法：
if（條件表達式）{
語句塊；
}
二、if...else結構
語法：
if（條件表達式）{
語句塊1；
}else{
語句塊2；
}
三、if ...else if...結構
語法：
if（條件表達式）{
語句塊1
}else if（條件表達式2）{
語句塊2；
}else if（條件表達式n）{
語句塊n；
}else{
語句塊n+1；
}
練習：
一、分三次從彈框中輸入年，月，日
二、判斷該日是概念的第幾天
二、switch結構
一、做用：等值判斷
二、語法
switch（變量）{
case 值1：
語句塊1；
break；//跳出switch結構，能夠選
case 值：
語句塊2；
break；//跳出switch結構，能夠選
.......
default：
語句塊n；
/*全部case都未匹配上時，才執行default*/
}
注意：
一、變量 和 case後的值的判斷，採用===來判斷的
二、break，若是省略break的話，則從匹配的case塊開始，依次向下執行（執行下面全部case塊的內容，或default塊內容）直到碰見break或執行結束
三、練習：
從彈框中輸入1-7任意一個數字表示1-星期日
輸入1：今天吃紅燒肉
輸入2：今天吃紅燒魚
輸入3：今天吃清蒸甲魚
輸入4：今天吃紅燒皮皮蝦
輸入5：今天吃紅燒排骨
輸入6：今天休息
輸入7：今天休息
其餘：輸入有誤！
三、循環結構
一、做用：重複執行相同或類似的代碼
二、循環的二要素
一、循環條件：循環從何時開始，到何時結束
二、循環操做：循環中要作的事情（要執行的代碼）
三、while循環
一、語法
while（循環條件）{
循環操做
}
流程：
一、判斷循環條件（boolean值/表達式）
二、若是條件爲真，則執行循環操做
2.一、執行完操做後，再回來判斷條件
三、若是條件爲假，則退出循環
四、do...while循環
語法：
do{
循環操做；
}while（條件）；
流程
一、先執行循環操做
二、再判斷循環條件
三、若是條件爲真，再繼續執行循環條件，當條件爲假時結束循環
五、循環的流程控制
一、break：跳出循環結構
二、continue：結束本次循環，繼續執行下次循環
六、for循環
一、while
打印1-100之間的全部數字
var i = 1;//循環條件的初始化
while(i <= 100){//循環條件的判斷
console.log(i);//循環操做
i++;//更新循環條件
}
二、語法：
for（表達式1；表達式2；表達式3）{
循環操做；
}
表達式1：循環條件的初始化
表達式2：循環條件的判斷
表達式3：更新循環條件
流程：
一、先執行表達式1，即循環條件初始化（執行1次）
二、判斷表達式2的值，true 或 false
三、若是表達式2的結果爲true則執行循環操做，若是爲false則退出循環
四、執行循環操做後，再執行表達式3
五、再判斷表達式2，同步驟2
for(var i = 1; i<=100; i++){
console.log(i)
}
七、循環嵌套
容許在一個循環中再出現另外一個循環
for(var i=1; i<=10;i++){//外層循環
for(var j=1;j<1=0;j++){//內層循環
}
}
外層循環走一次，內層循環走一輪
八、函數-function
一、函數的聲明
function 函數名(參數列表){
函數體
}
一、參數列表
參數列表，容許聲明0或多個參數，多個參數的話使用，逗號隔開，沒有默認參數
二、返回值
返回值是可選的，若是須要返回值的話，經過return 值；進行返回
二、函數調用
在任意JS的合法位置處，都容許作函數調用
函數名(參數列表);
三、由ES提供的函數（內嵌函數）
在網頁中無需聲明，就能夠直接使用
parseInt（）/parseFolat（）/Number（）
一、isNaN（value）：判斷value是否爲非數字，返回true表示不是數字，返回false表示是數字
示例：
一、isNaN（1）//false
二、isNaN（‘1’）//false
三、isNaN（‘hello’）//true
二、eval（）：執行由字符串來表示的JS代碼
四、局部變量與 全局變量
一、全局變量：一經聲明，在JS的任何位置處都能使用的變量就是全局變量
一、在<script></script>內部在函數體外邊
二、或則在函數內部不適用var聲明的變量也是全局變量（不建議使用）
二、局部變量：使用var關鍵字，而且聲明在function中的變量
局部變量的做用於只在聲明的函數內，出了函數就不能使用
九、數組（在python中稱爲列表）
一、什麼是數組
數組（Array）是一個用於保存批量數據的結構，即一個變量中容許保存多個數據。是按照線性結構的方式來保存數據的
說明：字符串與數組相加，會將數組準變爲字符串
示例：
‘names’+['張無忌','張翠山','張三丰','金毛獅王']
names張無忌,張翠山,張三丰,金毛獅王
二、建立數組
一、建立一個空數組
var 數組名 = [];
二、建立數組並初始化元素
var 數組名 = [元素1，元素2，... ,...];
三、建立一個空數組：
var 數組名 = new Array（）;
四、建立數組並初始化元素
var 數組名 = new Array（元素1，元素2，... ,...）；
三、數組的使用
獲取 或設置數組中的元素，一概都使用下標
下標範圍：從0開始，到元素個數-1爲止,若是超出下標不會報錯，而是返回undefined
一、向獲取元素的第二個元素
數組名[1];
二、爲數組元素賦值
數組名[下標] = 值；
說明：若是下標越界，會將越界的下標賦值，前面的爲undefined（空empty）
四、獲取數組的長度
屬性：length
用法：數組名.length;
使用場合：
一、配合循環，遍歷數組中的每一個元素
二、可以找到數組中，最新要插入元素的位置
五、關聯數組
一、什麼是關聯數組
JS中數組分爲索引數組 和 關聯數組
索引數組：由數字作下標
關聯數組：由字符串作下標
二、聲明和使用關聯數組
var names = [];
names['x'] = '西遊記';
names['y'] = '紅樓夢';
三、注意
length只能統計索引數組，不能統計關聯數組
四、使用for ... in遍歷數組
可以遍歷數組中全部的數字下標和字符串下標
for(var 變量 in 數組){
變量：數組中全部的數字下標和字符串下標（變量爲字符串）
}
六、數組的經常使用API
一、toString():將數組轉換爲字符串並返回
console.log(['aa','bb','cc'].toString())//aa,bb,cc
二、join（seperator）：返回一個由指定鏈接符鏈接的數組元素的字符串,鏈接符不能數\反斜槓，默認是逗號
console.log(['aa','bb','cc'].join('|'))//aa|bb|cc
三、concat
（arr，arr2，...）:拼接多個數組到一塊兒，並返回拼接後的結果
注意：該函數並不會改變數組，而是返回拼接後的一個副本
四、reverse（）：反轉
語法：arr.reverse()
注意：該函數會改變現有數組的結構
五、sort（）：排序，默認狀況下，按照元素的Unicode碼進行排序（升序）
注意：該函數會改變現有數組的結構
容許經過自定義的排序函數來指定數字的排序規則
語法：arr.sort(排序函數名);
一、指定排序函數
function sortAsc（a，b）{將數組的值依次傳遞給a，b
return a-b；//返回值大於0則交換a b的位置，
}
二、調用arr.sort(sortAsc)
三、使用匿名函數
arr.sort(function(a,b){a,b});
六、進出棧操做
棧式操做：提供了快速操做數組頭部或尾部的方法
一、push（）：入棧，向數組的尾部添加新元素，並返回新數組的長度
二、pop（）：出棧，刪除並返回數組尾部的元素
三、unshift（）：向數組頭部增長新元素並返回新數組的長度
四、Shift（）：刪除並返回數組頭部的元素
七、二維數組
一、什麼是二維數組
數組中的數組，在一個數組中的每一個元素又是一個數組
二、聲明二位數組
var names = [['aa','bb'],['cc',dd]];
names[0][1] = 'bb'
十、字符串-string
一、聲明字符串
一、var str1 = '字符串1';
二、var str2 = String（’字符串2‘）；
三、var str3 = new String（’字符串3‘）；
二、length-屬性
做用：返回當前字符串中字符的個數
三、經常使用函數-string API
一、大小寫轉換函數
一、toUpperCase（）：返回字符串的徹底大寫形式
二、toLowerCase（）：返回字符串的徹底小寫形式javascript
String.prototype.equalsIgnoreCase = function (str) { if (str == null) return false; return this.toLowerCase() === str.toLowerCase(); }; //定義字符串忽略大小寫比較的函數 "a".equalsIgnoreCase("A") //true
二、獲取指定位置的字符 或 Unicode碼
一、charAt（index）：返回指定下標位置處的字符
二、charCodeAt（index）返回指定下標位置處的字符的Unicode碼（十進制）
三、檢索字符串
一、做用：查詢子字符串在指定字符串中的起始下標
二、函數
一、indexOf（value，fromIndex）
value：要查詢的子字符串
fromIndex：從哪一個位置處開始查，若是省略的話，則從頭查找
返回值：返回第一次出現子字符串的下標，若是爲找到，則返回-1
二、lastIndexOf（value，fromIndex）
做用：查找value最後一次出現的下標
注意：該函數的查找方式是從後向前找
fromIndex若是省略，則將從字符串的最後一個字符處開始檢索
示例：
'avcdbabcd'.lastIndexOf('cd',7)//7
說明：若是在下標爲7的位置上匹配到字符串的頭部，則會繼續向後面判斷剩餘部分是否能夠匹配到
四、截取子字符串
函數：substring（start，end）
做用：返回從start到end-1之間的子字符串，若是end省略表示截取到字符串的結尾
五、分割字符串
函數：split（seperator）
做用：將字符串，經過seperator拆分紅一個數組
六、模式匹配
一、做用：配合正則表達式來完成字符串的查找和替換...
二、正則表達式
語法：/正則表達式/修飾符
示例：/\d{6}/gim
修飾符：
i：忽略大小寫匹配（Ignorcase）
g：全局匹配（Global）
m：容許多行匹配（Multiple）
三、函數
一、replace（substr/regexp,replacement）
做用：使用replacement替換substr/regexp的內容，並返回一個替換後的字符串
二、match（substr/regexp）
做用：返回知足substr 或 regexp格式的字符串，將這些字符串放在數組中進行返回
三、serach（substr、regexp）
做用：返回知足substr或regexp格式的子字符串第一次出現的下標。如爲未找到，則返回-1
注意：search函數不支持全局匹配，將自動忽略g css
function combine(baseurl, pathname) { //bsaeurl是否以/結尾，pathname是否以/開始，拼接baseurl和pathname const separator = (/\/$/.test(baseurl) === false && /^\//.test(pathname) === false) ? '/' : '' return Array.prototype.slice.call(arguments, 0).join(separator) }
十一、其餘內置對象
一、JS的對象分類
一、內置對象—ES提供
String,Array,... ...
二、外部對象
一、window（BOM）瀏覽器對象
二、document（DOM）文檔對象
三、自定義對象
function 就是一個自定義對象
二、RegExp對象
RegExp：Regular Expression - 正則表達式
一、建立RegExp對象
一、var regExp = /匹配模式/修飾符；
二、var regExp = new RegExp（‘匹配模式’，‘修飾符’）；
二、RegExp對象方法
一、regExp.test（string）
string：要驗證的字符串，若是string符合regExp格式的話，返回true，不然返回false
三、Math對象
一、做用：執行與數學相關的運算和數據
二、屬性：
Math.PI,
Math.E
三、函數
一、三角函數
Math.sin（x）
Math.cos(x)
Math.tan(x)
二、計算函數
Math.sqrt(x):開方
Math.log(x)：對數
Math.pow(x,y)：求x的有次方
三、數字比較函數
Math.abs(x)：絕對值
Math.max()：最大值
Math.min()：最小值
Math.random():返回0-1之間的隨機小數，包括0但不包括1
Math.round(x):將x四捨五入
四、Date對象
一、建立Date對象
一、獲取當前系統日期時間
var now = new Date（）；
二、初始化自定義日期時間對象
var date = new Date（‘2018//01/01’）;
二、函數
一、讀取或設置當前時間的毫秒數
一、getTime（）：返回自1900-1-1 00:00:00以來的毫秒數
二、setTime(毫秒數):
二、讀取時間份量函數
一、getFullYear（）：獲取日期時間對象的年份
二、getYear（）：獲取自1900年以來到當前日期時間對象所通過的年數
三、getMonth（）：返回0-11的數字來表示1-12月
四、getDate（）：返回當前日期對象對應的日
五、getDay（）：返回當前日期對象所對應的日期，0-6來表示星期日-星期六
六、獲取時間
一、getHourse（）：
二、getMinutes（）：
三、getSeconds（）；
四、getMilliseconds（）：獲取毫秒
七、轉換爲字符串
一、toString()
"Mon Aug 13 2018 12:14:38 GMT+0800 (CST)"
二、toLocaleString（）
"2018/8/13 下午12:14:59"
三、toLocalTimeString（）
"下午12:15:22"
四、tolocalDateString（）
"2018/8/13"
十二、外部對象
一、BOM 和DOM
BOM：Browser Object Model-瀏覽器對象模型
DOM：Document Object Model-文檔瀏覽器對象模型
二、BOM
一、做用：表示瀏覽器窗口，BOM提供了一個核心對象-window
二、window對象的使用
window對象會包含若干屬性 和 方法
屬性：document，location，history，navigator，screen
方法：alert（），prompt（），...
調用window對象的屬性和方法時，能夠省略window.不寫
window中的對話框
一、警告框：window.alert()/ alert()
二、輸入框：window.prompt()/ prompt()
三、確認框：window.confirm()/ confirm,按‘確認‘按鈕的話，返回true，不然返回false
window中的定時器
一、定時器分類
一、週期性定時器：每隔必定時間就會執行一遍指定程序，返回執行
二、一次性定時器：在指定的時間間隔以後，只執行一次操做
二、週期性定時器
一、聲明定時器
var ret = setInterval（fun，time）；
fun：要週期性執行的操做，能夠是匿名函數
time：時間間隔週期，以毫秒爲單位
ret：返回已經建立好的定時器對象（用於中止定時器）
二、清除定時器
clearInterval（timer）
timer：建立好的，要中止的定時器對象
三、一次性定時器
一、聲明一次性定時器
var ret = setTimeout(fun,time);
fun：指定時時間間隔後要執行的操做
time：時間間隔，以毫秒爲單位
ret：返回已經啓動的定時器對象
二、清除定時器
clearTimeout（timer）；
timer：建立好的，要中止的定時器對象
Window的屬性（瞭解）
一、screen：獲取客戶端顯示器的相關信息
屬性：
一、width/ height
二、availWidth/ availHeight
二、history：
一、做用：包含當前窗口所訪問過的url地址
二、屬性 和方法
一、屬性
length：訪問過的URL的數量
二、方法
一、back（）：後退
二、forward（）：前進
三、go（num）：去往歷史記錄中的第num個頁面
go（1）至關於forward
go（-1）至關於back
三、location
一、做用：表示瀏覽器地址欄上的信息
二、屬性和方法
一、href：表示當前窗口中正在瀏覽的網頁的地址，若是href設置值的話，則至關於瀏覽器頁面跳轉的功能
二、reload（）：從新加載當前頁面，等同於刷新
四、navigator
一、做用：包含瀏覽器的相關信息
二、屬性
一、userAgent：顯示瀏覽器相關信息（"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"）
三、DOM-document對象（重點）
一、document的概述
document對象，是DOM中的頂級對對象。封裝了和HTML相關的屬性，方法和事件。
在網頁加載HTML的時候，會在內存中生成一棵節點樹（DOM樹），DOM樹的根就是document
每一個元素其實都是DOM樹上的一個節點
DOM中所提供的操做：
一、查找節點的信息
二、讀取節點的信息
三、修改節點的信息
四、刪除節點的信息
五、建立節點的信息
二、查找節點
一、經過元素的id查找節點
var elem = document.getElementById（"元素ＩＤ"）;
元素ID：要獲取的元素的ID
elem：所獲得的元素的對象-DOM對象/元素，若是沒有找到匹配的元素，則返回null
DOM對象的經常使用屬性
一、innerHTML：獲取 或設置當前DOM對象的HTML文本值,會獲取標籤
二、innerText：獲取 或設置當前DOM對象的文本值,只獲取文本不獲取標籤
三、value：獲取 或設置表單控件對象的值
說明：value獲取的值只是表單控件框中輸入的值，設置值也只是設置表單控件框中的值，不會改變value的默認值
二、經過標籤名查詢
語法：document.getElementsByTagName(標籤名);或則 elem.getElementsByTagName(標籤名);
示例：
一、document>getElementsByTagName('p')//查找網頁中全部的p元素
二、var div = document.getElementById('d1');
div.getElementsByTagName('p')//查找id爲d1的div內部的p元素
返回值：由指定標籤元素所組成的數組（列表）
三、經過元素的name屬性值來查詢節點(優先使用在 單選框 和 複選框中)
語法：document.getElementsByName()
返回值：返回由指定name值的元素所組成的數組
四、經過元素class值查詢節點
語法：documnet.getElementsByClassName(className) 或 elem.getElementsByClassName(className)
返回值：由指定className值的元素組成的數組
五、根據節點的層級關係查詢節點
一、parentNode：返回當前元素的父節點
二、childNodes：返回當前元素的全部子節點組成的數組（子節點元素節點，屬性節點，文本節點（包括空格和回車）、註釋節點，文檔節點）
三、children:返回當前元素的子節點組成的數（子節點中只包含元素節點）
四、nextSibling：返回當前元素的下一個兄弟節點
五、nextElementSibing：返回當前元素的下一個兄弟元素節點
六、previousSibling：返回當前元素的上一個兄弟節點
七、previousElementSibling：返回當前元素的上一個兄弟元素節點
三、讀取節點的信息
一、節點的類型
一、元素節點：表示頁面上的一個元素
二、屬性節點：表示頁面上元素的一個屬性
三、文本節點：表示頁面上元素的一個文本內容（包含空格和回車）
四、註釋節點：表示網頁上的一個註釋
五、文檔節點：表示html文檔
屬性：nodeType
取值：
返回1：元素節點
返回2：屬性節點
返回3：文本節點
返回8：註釋節點
返回9：HTML文檔（文檔節點）
二、讀取節點名稱
屬性：nodeName
返回值：
元素節點 和屬性節點：返回元素名 或 屬性名
文本節點：#text
文檔節點：#document
註釋節點：#comment
四、獲取 或設置元素節點的方法
一、getAttribute（attrName）
做用：獲取某元素指定的屬性值
attrName：要獲取的屬性的名稱
返回值attrName屬性名對應的值
注意：獲取的屬性值，必需要在標籤中編寫出來，不然值爲null
二、setAttribute（attrName，attrValue）
做用：修改指定屬性的值
attrName：要修改的屬性的名稱
attrValue：要修改屬性名的值
說明：setAttribute（"value","aa"）只會改變value的默認值，若是此時表單控件框中有值是不會被修改的。與getAttribute（）聯合使用，不要和value屬性混合使用。
三、removeAttribute（attrName）
做用：將attrName屬性從元素中刪除出去
練習：
一、網頁中建立一個a標記，內容爲 百度 ，連接地址爲https://www.baidu.com
二、網頁中建立一個按鈕，文本爲修改
三、點擊按鈕時，將超連接的文本修改成 騰訊，將超連接的地址修改成 http:www.qq.com
五、元素的樣式
一、使用setAttribute（）設置class屬性值
elem.setAttribute（「class」，」類選擇器名稱「）；
二、使用元素的className屬性修改class值
elem.className="類選擇器"；
三、自定義元素樣式
elem.style.css屬性 = 值 ；
注意：若是CSS屬性名中包含-連字符的話，連字符要取消，而且-後面的第一個字符要變大寫
elem.style.color = 'red';
elem.style.fontSize = "18px";
elem.style.borderRightColor = 'yellow';
六、增長節點
一、建立元素節點
var elem = document.createElement(」元素名「);
elem:表示建立好的DOM元素
二、增長節點
一、document.boby.appendChild(elem):向body中追加新元素elem，在body中的最後一個元素
二、parentNode.appendChild(elem)：將elem追加到parentNode的內部
parentNode：表示的是已經存在的一個元素
三、parentNode.insertBefore(newElem,oldElem)
將newElem元素插入到parentNode中oldElem以前
說明：建立一個元素節點，只能增長一次，不能屢次增長該元素
七、刪除節點：
刪除節點只能由父元素來發起
一、document.body.removeChild(elem)：刪除body中的elem元素
二、parentNode.removeChild(elem)：在parentNode中刪除elem元素
四、事件
一、什麼是事件：容許經過特殊的行爲來激發的操做
二、經常使用的事件
一、鼠標事件
一、click：鼠標單擊事件
二、mousevoer：鼠標進入元素時激發的事件
三、mousemove：鼠標在元素內移動時激發的事件
四、mouseout：鼠標從元素內移出時激發的事件
二、鍵盤事件
一、keydown：鍵位按下時的事件
二、keypress：鍵位按下時的事件
三、keyup：鍵位擡起時的事件
三、狀態改變事件
一、load：當元素加載完畢時觸發的事件
二、change：當元素髮生改變時觸發的事件,通常用在select下拉框中
三、focus：當元素獲取焦點時觸發的事件
四、blur：當元素失去焦點時觸發的事件
五、submit：當表單被提交時觸發的事件
注意：在爲html元素綁定事件時，必需要在事件名前加 on
三、綁定事件的方式
一、在元素中綁定事件
<button onclick=""></button>
<input onblur="">
二、在js中動態的爲元素綁定事件
<script>
var div = $("d1");
div.on事件名 = function（）{
}
div.onclick = function(){
}
</script>
或者
<script>
function func(){
}
var div = $("d1");
div.on事件名 = func；
</script>
四、事件行爲詳解
一、load事件
經常使用場合：當網頁加載完畢時，要執行的操做
方式1：在元素中綁定事件
<body onload="函數（）"></dody>
方式2：JS中動態綁定事件
<script>
window.onload = function(){
//網頁中其餘元素加載完畢時，纔會執行
var div = $("d1");
div.onclick = function(){
this:指的是綁定事件的元素
}
}
</script>
二、submit事件
功能：表單被提交時要觸發的事件
注意：經過一個boolean的返回值，通知表單是否被提交，返回值爲true能夠提交表單，爲false不能提交
<form onsubmit="return 函數（）">
三、focus事件
功能：當元素獲取焦點時觸發的事件
四、blur事件
功能：當元素失去焦點時觸發的事件
五、事件對象（event對象）
一、什麼是事件對象
事件對象中封裝了事件中要用到的一些參數和一些操做
二、獲取事件對象（event對象）
一、html元素中綁定事件
<ANY onclick="btnClick(event)">//event表示事件對象，是實參，不可修改
<script>
function btnClick(event){
//event表示事件對象，是形參，此處event能夠修改，
}
</script>
二、使用JS動態綁定
<script>
d1.onclick = function(event){
}
</script>
三、事件對象的經常使用屬性
一、事件源：觸發當前事件的元素
獲取事件源：
經過event.target獲取事件源，返回DOM對象
二、鼠標事件
一、offsetX,offsetY
獲取鼠標在 元素上的座標，以元素的左上角（border內邊緣）爲（0,0）計算的
二、clientX,clientY
獲取鼠標在網頁上的座標，以網頁左上角爲（0，0）計算的
三、screenX，screenY
獲取鼠標在 顯示器上的座標點，以屏幕左上角爲（0,0）計算的
三、鍵盤事件
一、event.key
獲得按下鍵的字符
二、event.which :在keypress事件中 和在keydown事件中的含義不一樣
一、在keypress中
event.which：表示按下字符的ASCII碼
二、在keydown中
event.which：表示的是鍵位碼，只記錄鍵位，不記錄字符（大小寫英文字母的鍵位碼是相同的，一些數字和標點的鍵位碼有多是相同的）
四、事件冒泡
一、什麼是事件冒泡
當激發了子元素的事件時，把父元素對應的事件也一併給執行了
場合：
一、必須是父子元素或具有層級關係的元素
二、爲元素們設置了相同的事件
二、阻止事件冒泡
只讓事件在當前元素中執行，不向上冒泡
event.stopPropagation();
jQuery
一、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
二、使用jQuery
一、引入jQuery文件
<script src='文件路徑'></script>
注意：引入文件的操做必須放在其餘jQuery操做以前
二、使用jQuery
三、jQuery對象
一、什麼是jQuery對象
jQuery對象是由jQuery對頁面元素進行封裝後的一種體現
jQuery中所提供的全部操做都只針對jQuery對象，其餘對象不能使用（如DOM對象）
二、工廠函數 - $()
想要獲取jQuery對象 或 轉換爲jQuery對象的話，就必需要使用工廠函數
三、DOM對象和jQuery對象之間的轉換
DOM對象：以DOM的方式獲取出來的節點對象，都是DOM對象，DOM對象只能使用DOM中所提供的方法和屬性，是不能訪問jQUery提供的屬性和方法
jQuery對象：有jQuery封裝而獲得的對象。jQuery對象只能訪問jQuery提供的屬性和方法，是不能訪問DOM提供的屬性和方法
一、將DOM對象轉換爲jQuery對象
語法:var $obj = $(DOM對象)；
注意：在爲jQuery對象起名的時候，最好在變量名稱前 + $;
二、將jQuery對象轉換爲DOM對象
一、var dom對象 = jQuery對象.get(0);
二、var dom對象 = jQuery對象[0];
四、JS中建立對象（補充）
一、使用Object 直接建立對象
var newObj = new Object（）；
newObj.property = value1；//添加屬性
newObj.method1 = function(){
//添加無參方法
}
newObj.method2 =function（arg）{
//添加含參方法
}
二、使用構造器建立對象
function 對象名（參數1，參數2，....）{
//只能使用this來訪問或建立當前對象的成員
//使用參數爲屬性賦值
this.屬性1 = 參數1；
this.屬性2 = 參數2；
//建立方法
this.funName = function(){
}
}
使用對象
var obj1 = new 對象名（參數1，參數2，...）
三、使用JSON建立對象
一、什麼是JSON
JSON：JavaScript Object Notation - JS對象的表現形式
JSON一般會做爲輕量級的數據交換格式
JSON通常表示只有屬性沒有方法的對象
二、聲明JSON對象
一、使用鍵值對的方式來聲明數據，鍵表示該對象的屬性，值表示該對象的值
二、全部的屬性，必須用""雙引號引發來，若是值是字符串的話，也必須用""雙引號引發來，單引號有時很差用
三、屬性和值之間用：隔開
四、多對屬性之間用，隔開
五、JSON對象使用{}來表示
var person = {"name":"張無忌","age":25,"gender":"Male"}
五、jQuery選擇器
一、做用：獲取頁面上的元素們，返回jQuery對象所組成的數組
語法：$（"選擇器"）；
二、選擇器的分類
一、基礎選擇器
一、ID選擇器
用法：$("#ID值")
說明：返回HTML中指定ID的元素
二、類選擇器
用法：$(".className")
說明：返回HTML中全部class爲className的元素
三、元素選擇器
用法:$("元素名稱")
說明：返回HTML中全部指定標記的元素
四、通用選擇器
用法：$("*")
說明：返回HTML中全部的元素
五、羣組選擇器
用法：$("selector,selector2,...")
說明：返回知足工廠函數內多有選擇器的元素
二、層級選擇器：
一、$("selector1 selector2"):後代選擇器
二、$("selector1 > selector2"):子代選擇器
三、$("selector1 + selector2")：相鄰兄弟選擇器
說明：匹配牢牢跟在selector1後面且知足selector2選擇器的元素，若是selector1緊後面的元素不知足selector2時，則找不到
四、$("selector1 ～ selector2")：通用兄弟選擇器
說明：匹配selector1後面且知足selector2選擇器的全部元素
三、過濾選擇器
一、基本過濾選擇器
一、：first：只匹配到一組元素中的第一個
二、：last：只匹配到一組元素中的最後一個
三、：not（selector）：在一組元素中，將知足selector的元素排除出去
四、：odd：匹配 (奇數索引1,3,5,7,...）的元素
五、：even：匹配（偶數索引0,2,4，...）的元素
六、：eq（index）：匹配下標等於index的元素
七、：gt（index）：匹配下標大於index的元素
八、：lt（index）：匹配下標小於index的元素
二、內容過濾選擇器
一、：contains（「text」）：匹配包含指定文本的元素
二、：empty：匹配空元素（不包含任何子元素以及文本）
三、：has（selector）：匹配含有指定選擇器的元素
四、：parent：匹配自己是父元素的元素
三、可見性過濾選擇器
一、：visible：匹配全部的可見元素
二、：hidded: 匹配全部不可見元素
四、狀態過濾選擇器
主要用在表單控件上
一、：enabled：匹配全部的可用元素
二、：disabled：匹配全部禁用元素
三、：checked：匹配全部被選中的元素（radio 和 checkbox）
四、：selected：匹配全部被選中的元素（select）
五、子元素過濾選擇器
一、：first-child：匹配屬於其父元素中的第一個子元素
二、：last-child：匹配屬於其父元素中的最後一個子元素
三、：nth-child（n）：匹配屬於其父元素的第n個子元素
說明：n>=0的任意一個數，（n+1）表示大於0的任意整數，可是不能寫成（1+n），n須要寫在表達式以前
四、屬性選擇器
使用元素的屬性來匹配頁面的元素
一、[attr]：匹配具備attr屬性的元素
示例：$["id"]匹配全部具備id屬性的元素
二、[attr=value]：匹配attr屬性值爲value的元素
示例：匹配頁面中全部文本框
一、$(":text")
二、$("input[type='text']")
三、[attr!=value]
四、[attr^=value]：匹配attr屬性值是以value字符開始的元素們
五、[attr$=value]：匹配attr屬性值是以value字符結束的元素們
六、[attr*=value]：匹配attr屬性值中包含value字符的元素們
六、jQuery操做DOM
一、基本操做
一、html（）：等同於DOM中的innerHTML
做用：讀取或者設置jQuery對象中的HTML內容，無參數表示獲取，有參數表示設置
二、text（）：等同於DOM中的innerText
三、val（）：等同於DOM中的value
四、屬性操做
一、attr（）：
做用：讀取或設置jQuery對象的屬性值
示例：
一、$("#main").attr("id");：獲取id屬性值
二、$("#main").attr("class","redBack")；：設置class屬性值爲reBack
二、removeAttr（attrName）
做用：刪除jQuery對象的指定屬性
二、樣式操做
一、attr（"class","className"）:爲元素動態綁定class屬性值
二、$obj.addClass("className")：追加類選擇器
$obj.addClass("c1").addClass("c2").addClass("c3").html('測試文本')；
三、removeClass（」className「）：刪除指定的類選擇器
四、removeClass（）：刪除全部的類選擇器
五、toggleClass（」className「）：
樣式切換
元素若是具備className選擇器，則刪除
元素若是沒有className選擇器，則添加
六、hasClass（」className「）：判斷元素是否包含className選擇器
七、css（」屬性「，」值「）：爲元素動態的設置某css屬性和值
$obj.css("background-color",'red');
八、css(JSON對象)
$obj.css({
"color":"red",
"font-size":"32px",
});
三、遍歷節點
一、children（） / children(selector)
獲取jQuery對象的全部子元素或帶有指定選擇器的子元素
注意：以考慮子代元素，不考慮後代元素
二、next（）/ next(selector)
獲取jQuery對象的下一個兄弟元素或知足selector的下一個兄弟元素
三、prev（） / prev(selcetor)
獲取jQuery對象的上一個兄弟元素或知足selector的上一個兄弟元素
四、siblings（）/ siblings（selector）
獲取jQuery對象的全部兄弟元素 或知足selector的全部兄弟元素
五、find（selector）
查找知足selector選擇器的後代元素
六、parent（）
查找jQuery對象的父元素
四、建立和插入節點
一、建立對象
語法：$("建立內容")
示例：$("<div>文本內容</div>");
二、插入節點
一、內部插入
一、$obj.append（$new）：將$new做爲$obj的最後一個子元素插入進來
二、$obj.prepend($new)：將$new做爲$obj的第一個子元素插入進來
二、外部插入
一、$obj.after（$new）:將$new做爲$obj的下一個兄弟元素插入進來
二、$obj.before（$new）:將$new做爲$obj的上一個兄弟元素插入進來
五、刪除節點
一、remove（）
語法：$obj.remove（）：刪除$obj元素
二、remove（「selector」）: 按選擇器刪除元素
三、empty（）
語法：$obj.empty():清空$obj中全部的內容
六、替換和賦值（非重點）
一、替換
一、replaceWith
語法：$old.replaceWith($new)
使用$new元素替換$old元素
二、replaceAll
語法：$new.replaceAll($lod)
使用$new元素替換$old元素
二、賦值
一、clone（）
$new = $old.clone();
七、jQuery事件
一、頁面加載後執行
HTML頁面加載流程：
一、向服務器發送請求
二、接收服務器的相應
三、在內存中生成DOM樹
四、渲染-顯示內容到網頁上
五、執行window.onload
jQuery處理的時候
一、向服務器發送請求
二、接收服務器的相應
三、在內存中生成DOM樹
四、執行 加載後的 操做
五、渲染-顯示內容到網頁上
如何實現頁面加載後執行：
一、$(document).ready(function(){
//頁面的初始化操做，DOM樹加載完成後就開始執行
});
二、$().ready(function(){
//頁面的初始化操做，DOM樹加載完成後就開始執行
});
三、$(function(){
//頁面的初始化操做，DOM樹加載完成後就開始執行
});
二、jQuery實現事件的綁定
一、方式1
$obj.bind("事件名稱"，function（）{
//事件操做
//容許使用this來表示當前元素(dom對象)
})；
$obj.bind("事件名稱"，function（event）{
//事件操做
//容許使用this來表示當前元素(dom對象),
//容許傳遞event對象，做爲事件對象
})；
二、方式2
$obj.事件名（function（）{
//事件操做
//容許使用this來表示當前元素(dom對象)
}）；
$obj.事件名（function（event）{
//事件操做
//容許使用this來表示當前元素(dom對象)
//容許傳遞event對象，做爲事件對象
}）；
八、jQuery動畫
一、基本顯示 和 隱藏
語法：
顯示：$obj.show(); / $obj.show(duration);毫秒爲單位
隱藏：$obj.hide(); / $obj.hide(duration);毫秒爲單位
二、滑動式顯示 和 隱藏
語法：
顯示：$obj.slideDown() / $obj.slideDown(duration);毫秒爲單位
隱藏：$obj.slideUp() / $obj.slideUp(duration);毫秒爲單位
三、淡入淡出式顯示 和 隱藏
語法：
顯示：$obj.fadeIn() / $obj.fadeIn(duration);毫秒爲單位
隱藏：$obj.fadeOut() / $obj.fadeOut(duration);毫秒爲單位 html
九、jQuery插件java
http://www.jq22.comnode
一、下載插件並引入（jquery,插件文件，css文件）python
二、結合當前網頁修改cssjquery
三、去插件中修改數據（替換圖片/圖片名稱）正則表達式
十、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>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<a href="https://www.baidu.com/s?wd=">圖片</a>
<a href="https://www.baidu.com/s?wd=">新聞</a>
<script type="text/javascript">
<!--獲取全部的a標籤-->
var as = document.getElementsByTagName("a")
for(var i=0;i<as.length;i++){
<!--循環獲取a每一個標籤-->
var a = as[i]
<!--獲取a標籤的文本-->
var text = a.innerText
<!--獲取url-->
var url = a.href
<!--將原先的url與text文本拼接造成新的URL-->
a.href = url+text
alert(a.href)
}
</script>
</body>
</html>
-
每一个你不满意的现在，都有一个你没有努力的曾经。