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 過濾符合條件的元素,生成新數組,不改變原數組

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章