JavaScript基礎(2)---dom，bom，變數型別，事件，ajax
變數型別：
JavaScript中變數有值型別和引用型別，值型別就是直接給變數賦值，引用型別是把一個地址指標賦值給變數
引用型別包括------》陣列，物件和函式，其它為值型別
用typeof可以區分哪些型別？
複製程式碼
1 typeof undefined //undefined
2 typeof 123 //number
3 typeof 'abc' //string
4 typeof true //boolean
5 typeof [] //object
6 typeof {} //object
7 typeof console.log //function
8 typeof null //object
複製程式碼
可以從結果看到，typeof不能區分陣列型別，物件型別和null，都是輸出object型別
==和===的區別
==是不嚴格的等於，===要求你的資料型別以及值都要相等，所以能用三個等號的就用
1 false == 0 //true
2 false === 0 //false
3 1 == '1' //true
4 1 === '1' //false
使用兩個等號的時候JavaScript會進行強制型別轉換，試圖讓兩個比較物件相等
什麼時候使用兩個等號合適呢：比如if（obj.a == null） 這時候相當於obj.a === null 或 obj.a === undefined（jquery原始碼中是這麼寫的，我沒讀過）
使用instanceof
使用instanceof就可以區分是否是array型別的了
var arr = []
arr instanceof Array //true
JavaScript的內建函式
我個人的理解就是需要new出來的就是內建函式，因為如果自己定義一個建構函式的話，你也要new出一個例項物件才能使用
複製程式碼
1 Array
2 String
3 Object
4 Boolean
5 Function
6 Error
7 Regexp
8 Number
9 Date
複製程式碼
JavaScript的內建物件
常用的有Math， json
dom
dom的本質
瀏覽器把那道 html程式碼，結構化一個瀏覽器能識別並且js可操作的一個模型
dom操作中property和attribute的區別
prototye和attribute都是操作屬性，不同的是prototype操作的是dom物件上的屬性，attribute操作的是html上的屬性
一個div的prototype屬性如下，我自定義的oppo屬性在attributes裡，而attributes又包含在prototype裡
常用的Attribute，例如id、class、title等，已經被作為Property附加到DOM物件上，可以和Property一樣取值和賦值。但是自定義的Attribute，就不會有這樣的特殊優待，只要是DOM標籤中出現的屬性（html程式碼），都是Attribute。然後有些常用特性（id、class、title等），會被轉化為Property。可以很形象的說，這些特性/屬性，是“腳踏兩隻船”的
處理dom固有屬性時用prop，處理自己定義的屬性時用attr，這樣比較合適
Bom
在w3c中，Browser物件就是bom
複製程式碼
1 navigator.userAgent //返回瀏覽器用於 HTTP 請求的使用者代理頭的值
2 location.hash //返回#後面的值
3 location.protocal //返回http或https
4 location.search //返回從？開始的url部分
5 location.port //返回埠號，比如8080
6 location.href //返回完整的url路徑
複製程式碼
原生ajax
複製程式碼
1 // 1. 建立一個 XMLHttpRequest 型別的物件 —— 相當於打開了一個瀏覽器
2 var xhr = new XMLHttpRequest()
3 // 2. 開啟與一個網址之間的連線 —— 相當於在位址列輸入訪問地址
4 xhr.open('GET', './time.php')
5 // 3. 通過連線傳送一次請求 —— 相當於回車或者點選訪問傳送請求
6 xhr.send(null)
7 // 4. 指定 xhr 狀態變化事件處理函式 —— 相當於處理網頁呈現後的操作
8 xhr.onreadystatechange = function () {
9 // 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
10 if (this.readyState === 4) {
11 // 通過 xhr 的 responseText 獲取到響應的響應體
12 console.log(this)
13 }
14 }
複製程式碼
get請求
複製程式碼
1 var xhr = new XMLHttpRequest()
2 // GET 請求傳遞引數通常使用的是問號傳參
3 // 這裡可以在請求地址後面加上引數，從而傳遞資料到服務端
4 xhr.open('GET', './delete.php?id=1')
5 // 一般在 GET 請求時無需設定響應體，可以傳 null 或者乾脆不傳
6 xhr.send(null)
7 xhr.onreadystatechange = function () {
8 if (this.readyState === 4) {
9 console.log(this.responseText)
10 }
11 }
12 // 一般情況下 URL 傳遞的都是引數性質的資料，而 POST 一般都是業務資料
複製程式碼
post請求
複製程式碼
1 var xhr = new XMLHttpRequest()
2 // open 方法的第一個引數的作用就是設定請求的 method
3 xhr.open('POST', './add.php')
4 // 設定請求頭中的 Content‐Type 為 application/x‐www‐form‐urlencoded
5 // 標識此次請求的請求體格式為 urlencoded 以便於服務端接收資料
6 xhr.setRequestHeader('Content‐www.gcyl158.com Type', 'application/x‐www‐form‐urlencoded')
7 // 需要提交到服務端的資料可以通過 send 方法的引數傳遞
8 // 格式：key1=value1&key2=value2
9 xhr.send('key1=value1&key2=value2')
10 xhr.onreadystatechange = function () {
11 if (this.readyState === 4) {
12 console.log(this.responseText)
13 }
14 }
複製程式碼
事件
JavaScript中繫結事件可以用addEventListener
比如繫結click，可以用onclick，也可以用addEventListener（‘click’，function（）{}）
onclick繫結的點選事件會覆蓋，addEventListener繫結的click不會覆蓋（就是可以繫結多個click事件）
事件冒泡
點選div裡的p後，p的點選事件被觸發，事件冒泡到div，divde點選事件也被動觸發
想阻止冒泡事件可以解開第9行的註釋
複製程式碼
1 <body>
2 <div class="wrapper">
3 <p class="one">one<www.gcyL157.com /p>
4 <p class="two">two</p>
5 <p class="three">three</p>
6 </div>
7 <script>
8 var one = document.querySelector(".one").addEventListener('click',function(e){
9 // e.stopPropagation() //阻止事件冒泡
10 alert('this is one')
11 })
12 var wrapper = document.querySelector(".wrapper").addEventListener('click',function(){
13 alert('this is wrapper')
14 })
15 </script>
16 </body>
複製程式碼
但是，假設一個場景，如果上述div是一個無限下拉的頁面，點選每個p都要打印出p的內容，那應該怎麼辦？
給每個p都繫結事件時不可能的，一是你不知道有多少個p， 二是這樣太麻煩了
這時候我們可以寫一個函式
複製程式碼
1 function bindEvent(elem, type, selector, fn){
2 if(fn == null)www.michenggw.com{
3 fn = selector //如果沒有傳入selector，給fn賦值，把selector設定為null
4 selector www.wanchuang178.cn = null
5 }
6 elem.addEventListener(type, function(www.taohuayuangw.com){
7 var target
8 if(selector){
9 //獲取觸發此事件的元素
10 target = e.target
11 console.log(target)
12 //檢測是否是代理元素觸發的
13 if(target.matches(selector)){
14 fn.call(target, e)
15 }
16 } else {
17 fn(e)
18 }
19 })
20 }
21 var wrapper = document.querySelector('.wrapper')
22 var one = document.querySelector('.one')
23 //不使用代理
24 // bindEvent(wrapper,"click",function(){
25 // console.log(one.innerHTML)
26 // })
27
28 //使用代理
29 bindEvent(wrapper,www.mhylpt.com"click",'p',function(e){
30 console.log(this.innerHTML)
31 })
複製程式碼
給最外層的div繫結一個點選事件，通過事件冒泡，當點選裡面的p元素時，冒泡觸發外層的div。這樣無論你有多少個p，只要繫結一個事件就行。
第14行的call() 方法呼叫一個函式, 其具有一個指定的this值和分別地提供的引數，所以第30行的this就是call裡的第一個引數target
常用陣列API
forEach 遍歷所有陣列，對空陣列不會執行回撥函式
every 判斷所有元素是否都符合條件
some 判斷至少有一個元素符合條件
sort 預設升序排序，會改變原陣列
map 根據條件對陣列重新組裝，生成新陣列，不改變原陣列
filter 過濾符合條件的元素，生成新陣列，不改變原陣列