08.29

# 全局對象
*?escape/unescape()?????對特殊字符編碼/解碼
*?encodeURI / decodeURL????對url進行編碼/解碼
*?encodeURIComponent / decodeURIComponent???對URL解碼/解碼
*?eval()????把字符串當做代碼執行


# JSON對象
*?parse()??把josn字符串轉換為對象
*?stringify()??把對象轉換為json字符串

?

08.30

# BOM（瀏覽器對象模型）
## window
#### 定義
*?window是js在瀏覽器環境中 全局變量
*?函數就是window的方法
*?全局變量就是window的屬性


#### 屬性
*?document
*?location
*?history
*?screen
*?navigator
*?innerWidth???文檔區域寬度
*?innerHeight??文檔區域高度
*?outerWidth???瀏覽器窗口寬度
*?outerHeight??瀏覽器窗口高度
*?name 窗口的名字
*?parent??父窗口
*?top???????頂層窗口
*?length??子窗口的數量
*?frames???子窗口的集合

?

cursor:pointer;光標為呈現一只手的樣子；

<button οnclick="window.open('01s.html/網址','是本窗口的打開的話對本窗口命名寫上名字','width=400,height=400')">對打開的窗口設置寬高</button>
#### 方法
*?alert()???警告框
*?confirm()???確認框
*?prompt()???可輸入彈框
*?setInterval()
*?clearInterval()
*?setTimeout()
*?clearTimeout()
*?open() 打開新窗口
*?close()??關閉窗口
*?print()???打印


## location （地址位置）
#### 屬性
*?href??完整的url
*?protocol???協議
*?hostname??主機名
*?port???端口號
*?host????主機名和端口號
*?pathname??文件路徑
*?search???查詢部分
*?hash?????錨點部分
#### 方法
*?reload() 重新加載當前文檔。
*?assign() 保存記錄
*?replace()不保存記錄

?

## history （歷史記錄）
#### 屬性
*?length??歷史記錄的數量

#### 方法
*?back()??回退一步
*?forward()??前進一步
*?go(n)??前進/后退 n步

?

## screen （屏幕）
#### 屬性
*?width??屏幕寬度
*?height 屏幕高度

?

## navigator （導航）
#### 屬性
*?userAgent????平臺、瀏覽器相關的信息
*?platform??????平臺

?

# DOM （文檔對象模型）



# 補充
### 瀏覽器內核
*?內核應該包含 渲染引擎 \ JS引擎
*?渲染引擎負責渲染HTML和CSS， JS引擎負責運行JS
*?現在提到瀏覽器內核也可以單指渲染引擎

### 常見的瀏覽器內核
*?webkit???（chrom safari）
*?blink??????（webkit的改型，??chrome、opera）
*?trident?????IE
*?Gecko????Firfox
*?Kestrel??老歐朋

### URL URI 區別
*?URI 標準??中包含 URN 和 URL
*?URI：??統一資源標示符
*?URN：統一資源命名符
*?URL： 統一資源定位符

?

08.31

# 事件基礎
### 綁定事件
*?把事件當做HTML元素的屬性
????
?????`<button οnclick="code...">`
*?把事件當做dom對象的方法
????
?????`dom.onclick = function(){code....}`

*??事件監聽方式
????* addEventListener(eventName, fn, true/false)
????* attachEvent(eventName, fn)


### 解除事件的綁定
*?綁定方式： 把事件當做html元素屬性 / 把事件當做dom對象的方法
????
?????重新綁定一個空的function，覆蓋前面

*?綁定方式 是 事件監聽方式
????* removeEventListener(event, fn)
????* detachEvent(event, fn)?????????????????????????????????????????????????

### this的用法
*?循環給一組元素綁定事件的時候
*?事件作為html元素屬性的時候，函數調用，傳this表示 該元素


# 事件類型
### 鼠標事件
*?click??單擊
*?dblclick???雙擊
*?contextmenu??右擊
*?mouseover???鼠標進入元素
*?mouseout????鼠標離開元素
*?mousedown??鼠標按鍵按下
*?mouseup???????鼠標按鍵抬起
*?mousemove???鼠標移動

### 鍵盤事件
*?keydown??鍵盤按鍵按下
*?keyup??????鍵盤按鍵抬起
*?keypress??鍵盤按鍵按下， 并不是所有的按鍵都可以觸發（只有可以輸入字符的按鍵）


# Event 對象
*?clientX
*?clientY
*?keyCode

?

09.04

# Event對象
### Event種類
*?mouseEvent
*?keyboardEvent
*?focusEvent

### 屬性
*?clientX
*?clientY
*?keyCode
*?target????具體觸發事件的元素


### 方法
*?stopPropagation()???阻止冒泡
*?preventDefault()??????阻止默認動作

### 事件的冒泡和捕獲





# 節點
### 節點分類
*?document??????9
*?element?????????1
*?attr????????????2
*?text???????????????3
*?comment??????8

### 屬性
*?nodeName
*?nodeValue
*?nodeType


# 從HTML獲取元素
### 通過ID
*?getElementById()
*?一個元素具有ID屬性，會自動生成與之同名的全局變量

### 通過Name屬性
*?getElementsByName()
*?IE9+ 所有的元素都有name屬性
*?IE9-???個別元素有name屬性

### 通過標簽名
*?getElementsByTagName()
*?docuemnt.images
*?document.links
*?document.anchors
*?document.forms


### 通過class類型
*?getElementsByClassName()
*?IE9+

### 通過選擇器
*?document.querySelector()
*?document.querySelectorAll()

### document.all
*?文檔中所有的元素




# 文檔節點的結構
### 節點的關系
*?父節點?????父元素
*?子節點??????子元素
*?兄弟節點????兄弟元素
*?祖先節點????祖先元素
*?后代節點???后代元素

### 節點相關屬性
*?parentNode
*?childNodes
*?firstChild
*?lastChild
*?nextSibling
*?previousSibling


### 元相關元素
*?parentElement
*?children
*?firstElementChild??IE9+
*?lastElementChild???IE9+
*?nextElementSibling????IE9+
*?previousElementSibling???IE9+
*?childElementCount???子元素的數量??IE9+
*?ownerDocument?????IE9+

?

09.05

# 屬性
### 內置屬性
*?js對象和html標簽有映射關系

### 自定義屬性
*?getAttribute()
*?setAttribute()
*?hasAttribute()
*?removeAttribute()

### H5新增的自定義屬性操作操作
*?HTML：??`<tag data-attr="">`
*?JS ：??element.dataset.attr

### 把屬性當做屬性節點
*?getAttributeNode(attrname)



# 元素的內容
### 作為HTML的元素內容
*?innerHTML
*?outerHTML

### 作為純文本的元素內容
*?innerText????會忽略多余的空格
*?textContent???IE9+

### 作為Text節點操作




# 元素操作（節點）
### 創建元素
*?document.createElement(tagName)

### 添加元素（給父元素添加子元素）
*?appendChild(node)
*?insertBefore(newNode, oldNode)

### 刪除元素
*?removeChild(node)

### 替換元素
*?replaceChild(newNode, oldNode)

### 克隆節點
*?cloneNode(false)



# 元素的尺寸大小
### 元素的位置
*?getBoundingClientRect()
*?offsetLeft/offsetTop
*?clientLeft/clientTop
*?offsetParent

### 元素的尺寸
*?getBoundingClientRect()
*?offsetWidth/offsetHeight
*?clientWidth/clientHeight
*?scrollWidth/scrollHeight


### 滾動距離
*?scrollLeft
*?scrollTop


# docuemnt?
### 屬性
*?URL????只讀
*?domain???只讀

轉載于:https://www.cnblogs.com/lwwnuo/p/7449783.html

總結

以上是生活随笔為你收集整理的JavaScript 随意整理2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。