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‐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</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){ 3 fn = selector //如果沒有傳入selector,給fn賦值,把selector設置為null 4 selector = null 5 } 6 elem.addEventListener(type, function(e){ 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,"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 過濾符合條件的元素,生成新數組,不改變原數組
JavaScript基礎(2)---dom,bom,變量類型,事件,ajax