DOM

 

1. 內容

補充:
Number
parseInt("111")
parseFloat("11.11")

函數
函數的定義
通常函數定義:
function foo(a,b){
函數的代碼塊;
return 返回值
}
匿名函數:
var bar = function(){...}
當即執行函數:
(function(a,b){...})(實參1,實參2)
函數的參數:
不嚴謹(可傳多,可傳少,就是不報錯)
arguments:函數內部能夠經過arguments拿到全部的參數

做用域
函數內部能夠調用函數外部的變量
函數外部沒法訪問函數內部的變量

詞法分析
函數調用的一瞬間要作兩部:
1. 分析(AO對象)
1. 先分析有沒有參數,
2. 看看有沒有局部變量
3. 看看有沒有函數聲明

2. 真正執行
取值都是從AO對象上找

自定義對象
定義的兩種方法:
1. var p1 = {name: "xiaoqiang", age: 38}
2. var p2 = new Object();
p2.name = "xiaoqiang"
p2.age = 38;

遍歷自定義對象方式:
for (var i in p1){
console.log(i);
console.log(p1[i]);
}

內置對象和方法
1. Date
1. 生成對象
var d1 = new Date()
var d2 = new Date("2018-03-13")
2. 方法:
1. d1.toLocalString()
2. d1.toUTCString()
3. d1.getFullYear()
4. d1.getMonth() (0~11)
5. d1.getDay() (星期天是0)
6. ...

2. JSON
1. 字符串轉JSON對象
var jsonObj = JSON.parse('{"name": "xiaoqiang", "age": 18}')
2. JSON對象轉成字符串
var s = JSON.stringify(jsonObj)

3. Math
1. 略...
4. RegExp
1. 定義正則兩種方式
1. var reObj1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
2. var reObj2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/

2. 經常使用方法
reObj1.test("將要被校驗的字符串")
3. 正則的匹配模式
1. g --> 全局
"Alexdashabi".replace(/a/g, "呵呵")
2. i --> 不區分大小寫
"Alexdashabi".replace(/a/i, "呵呵")

4. 幾個坑
1. 正則表達式之間不能加空格
2. .test()不傳值至關於.test(undefined)--> .test("undefined")
3. 全局匹配模式注意事項
var reObj = /Alex/g;
reObj.test("Alex") --> lastIndex屬性被設置成下一位4
reObj.test("1234Alex") 就返回true
面試題:
引伸出一個新的知識點:
.sort(key=...)

2. 今日內容

1.BOM
1. location
1. location.href --> 獲取當前的URL
2. location.href="http://www.luffycity.com" --> 跳轉到指定網址
3. location.reload() --> 從新加載當前頁面

2. setTimeout和clearTimeout
多少毫秒以後作什麼事兒
3. setInterval和clearInterval
每隔多少毫秒以後作什麼事兒


2.DOM
1. 什麼是DOM樹
2. DOM都有哪一些內容
3. JS操做DOM
1. 找標籤
1. 基本查找
1. 根據ID找標籤(有且只能找到一個)
document.getElementById("ID值")
2. 根據class名字找(找到的能夠是多個)
document.getElementsByClassName("class值")
3. 根據標籤名找(找到的能夠是多個)
document.getElementsByTagName("標籤名")

2. 間接查找
1. 找父標籤
document.parentElement
2. 找子標籤(找到的多是多個)
document.children
3. 第一個子標籤

4. 最後一個子標籤

5. 前一個兄弟標籤

6. 後一個兄弟標籤
2. 建立標籤 *****
creatElement("標籤名")

3. 添加標籤
1. 在內部的最後添加
appendChild("標籤名")
2. 在內部的某個標籤的前面插入
insertBefore(要插入的新標籤, 哪一個標籤以前)
4. 屬性(內置屬性)
.屬性名="屬性值"

自定義的屬性只能用:
.setAttribute("s9", "hao")
.getAttribute("s9")
.removeAttribute("s9")

5. 文本操做
1. 設置文本的內容
.innerText=""
2. 設置標籤內容
.innerHTML="<p>我是p標籤</p>"
3. 獲取值的區別
1. .innerHTML --> 子標籤和子標籤的內容都取出來
2. .innerText --> 只取標籤之間的文本內容

6. 樣式操做
1. 經過class修改
1. classList.remove(cls) 刪除指定類
2. classList.add(cls) 添加類
3. classList.contains(cls) 存在返回true，不然返回false
4. classList.toggle(cls) 存在就刪除，不然添加
5. className 獲取全部樣式類名(字符串)
2. 經過.style修改
1. 有中橫線的
.style.backgroundColor
2. 沒有中橫線的
.style.color

7. 事件
1. 經常使用事件
1. onclick
2. ondbclick

3. onfocus
4. onblur

5.onchange

2. 綁定事件的方式
1. 在標籤裏直接寫屬性(onclick=foo())
2. 經過JS給標籤綁定事件

3. this --> 表明的是觸發事件的當前標籤