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