JavaScript學習筆記(6月份)

因爲筆記比較雜，自己學習程度並不理想，因此暫時沒有整理這些繁雜的筆記。
ps:博客園markdown用起來和看起來都舒服太多了，這纔是我瞭解的那個markdown，又回來了！

筆記

DOM對象 document object model

DOM 中節點種類一共有三種

注：在JS中全部的節點都是對象
<div title="屬性節點">文本內容</div>

<div></div> => 元素節點 
title => 屬性節點
文本內容 => 文本節點

查找元素節點方法

1. document.getElementById(id);//經過當前元素節點的id，獲取對應元素節點
   

• 元素節點對象：
  經過這個節點對象(note)，訪問它的一系列屬性，如下就是對象名稱：
  1. note.tagname 獲取元素節點的標籤名
     
  2. note.innerHTML 獲取元素節點標籤間的內容
     
  3. note.id
  4. note.className
  5. note.title
  6. note.style等
• HTML屬性的屬性（對應元素節點的對象）：
  id  
  title  
  style  
  innerHTML  
  className
  元素節點.屬性
  元素節點[屬性]
  

document.getElementsByTagName()
    node.getElementsByTagName();

• 從node節點開始，找出符合的標籤節點
  參數：標籤名；
  功能：獲取當前頁面上全部符合改標籤的元素節點
  返回值：一個裝有符合條件的元素節點的數組

• document.getElementsByName(); 只能從document調用 ps：許多的name能夠同樣
  參數：name的值
  返回值：裝有符合條件的元素節點的數組

• document.getElementsByClassName() ps：能夠從某一個元素節點去查找
  參數：class
  返回值：全部符合條件的元素節點組合的數組。
  在第版本的ie瀏覽器中是不支持的 處理辦法
  獲取父節點的全部元素，而後進行一一判斷，符合className等於參數class就能夠加入數組中。

封裝函數·setAttribute·childNotes·Attributes·parentNode

• id document.getElementById()
• class document.getElementsByClassName();
• name document.getElementsByName();
• tagName note.getElementsByTagName();

經過封裝函數，簡化上述操做。

css選擇器

• #id //經過id獲取元素節點
• .class //經過className獲取元素節點
• tagName //經過tagName獲取元素節點
• name=xxx //經過name獲取元素節點

詳情看$()方法 //經過封裝css選擇器的方法，來快速的獲取對應的標籤

做用：操做當前元素的某一個屬性的

get/setAttribute() 獲取元素屬性的兩種方法

removeAttribute()

1. 和點出來的class屬性範圍區別：點操做是經過元素節點點出className參數，
   而set/get是經過傳入class參數來獲取 例如：Obtn.className == Obtn.getAttribute("class")
2. 用戶自定義屬性的支持。自定義xxx="yyyy" Obtn.setAttribute("xxx","yyy")
document.getElementsById("btn").getAttribute("id")

childNotes(); 獲取當前節點的全部子節點，包括三種節點類型 nodeName,nodeType,nodeValue

DOM節點類型
元素節點 屬性節點 文本節點
做用:
(1)刪除子節點中的空白節點
方法：使用正則表達式進行刪除。/^\s+$/.test() 判斷是否value爲空
刪除空白節點的時候必須是倒序刪除，緣由本身想，想不到撞死，提示：他是一個數組類型

(2)不知道

ownerDocument 結果通常是document
parentNode 父親節點 previousSibling 同級別的上一個節點 nextSibling 同級別的下一個元素節點

attributes 返回該節點的屬性節點,[集合]
集合特色:1.不重複;2.無序
其中一種訪問方法：node.attributes.getNamedItem("id");

dom建立帶文本的元素節點

• document.write() //寫入
• document.createElement("div") 插入標籤
• note.appendChild()
• parent.replaceChild(newNode,oldNode)
• note.cloneNode() 參數：true則將文本內容傳入，不然默認只克隆標籤
  ps:系統沒有提供同時插入文本和標籤的方法

var note = document.createElement("span")
    var Ntext = document.createTextNode("文本內容") 插入文本內容
    note.appendChild(Ntext)
    odiv.appendChild(note)

事件

1. 事件基礎

訪問web界面的用戶引發的一系列操做
鼠標事件，鍵盤事件，HTML事件
函數：on+事件名稱

2. 事件流

事件：捕獲，目標，冒泡
阻止冒泡：

evt.cancelBubble = true //對主流瀏覽器和ie生效
    evt.stopPropagation() //只對主流瀏覽器生效

事件委託：利用事件冒泡原理，把本應添加在元素上的事件委託給他的父級（外層）
多個重複的事件，能夠把這個事件委託到父級來實現。更加簡潔

阻止默認事件
好比<a></a>href跳轉標籤

1. onclick 方法裏面,return false
2. evt.preventDefault();
3. evt.returnValue = false;

3. DOM2級事件

DOM2級事件處理程序
添加事件監聽器：addEventListener(事件名，處理函數，布爾值)
移除事件監聽器：removeEventListener(事件名，處理函數)
IE下的事件監聽器：attachEvent(事件名，處理函數) detachEvent(事件名，處理函數)

ps:普通事件中點擊事件會被後一個點擊事件給覆蓋，而二級事件不會被其餘事件所覆蓋。能夠重複添加
布爾值爲false的時候，爲正常的冒泡事件，true爲捕獲（從外往內）

cookie

• http協議
• cookie的概念
• cookie的基本操做
• cookie的封裝

http：超文本傳輸協議，用於從web服務器傳輸超文本到本地瀏覽器的傳輸協議，是一個無狀態的協議
cookie：緩存存在本地瀏覽器中的數據，包括增刪改查的四個部分

document.cookie = "userName=paikle";
//這種方式添加的cookie會隨着瀏覽器的關閉而消失，要設置時間限制的cookie須要在後面添加date限制

設置時間來讓cookie過時，從而達到刪除的效果。

var oDate = new Date(); //建立時間
oDate.setDate(oDate.getDate()+3) //將時間設置爲三天以後
document.cookie = "user = paikle;expires="+oDate; //將cookie過時時間設置爲三天後

cookie的封裝

setcookie(name,value,day) //設置cookie
getcookie() //獲取cookie
removecookie() //移除cookie

正則表達式

正則表達式是由普通字符和特殊字符組成的對字符串進行過濾的邏輯公式

修飾符 g i

g 表示會所有搜索，返回符合的數字,i 表示忽略大小寫

var reg = /abc/g;
 var str = 'abcabc';

1.test方法

正則表達式方法，檢測字符串是否又符合規則的字串，有返回true，無爲false

//兩種構造方法
var rge = /abc/;
var reg = new RegExp("abc");

var str = "ab";

var flag = reg.test(str)

2.match方法 字符串方法

console.log(str.match(reg))

3.search方法 字符串的方法 用於查找符合規則的字串的位置，只返回第一個匹配的位置

var rg = /bc/
console.log(str.search(rg))

4.split方法

5.replace方法

var tmd = /tmd/gi
var str = "abc tmd tmd TMd sabi";
console.log(str.replace(tmd,"*"));

6.exec 正則表達式的方法 將匹配成功的內容放到數組內，沒有匹配成功返回null

和match差很少的用法，不過在配置全局匹配的時候不能一次出來

符號	效果
.	除了換行符以外的全部單個字符
	var rag = /g..gle/gi;var str = 'googlegole';console.log(rag.test(str))
*	重複屢次匹配，匹配任意次數 無論中間多少次（0-n）
+	至少有一次重複匹配
?	進行0或者1次匹配
[]	一個字母表示可出現的範圍，[0-9] [a-z]
\w	數組字母下劃線等同於[0-9a-zA-Z_]
\W	非數字字母下劃線
\d	數字0-9
\D	非數字
\s	匹配空格 \S 非空格
{m,n}	至少匹配m次，至多匹配n次
/^開頭.*結尾&/
|	或 /a
()	分組 將內容做爲一個總體去匹配

ES6

• let的使用
• 解構賦值
• 模板字符串
• 箭頭函數
• set結構和map結構
• 生成器函數
• 類class

1.let的使用

用來聲明變量。用法相似於var ，可是所聲明的變量，只在let命令所在的代碼塊有效。
存在塊級做用域 {}
不存在聲明提高
不容許重複聲明(包括普通變量和函數參數)
const使用 用來聲明常量，不要試圖改變常量的值，其餘語法參照let

2.解構賦值

//默認賦值
    let [a,b,c] = [1,2,3]
    [a,b=2] = [3] // a = 3,b = 2
    let c ; //undifined;
    [a=1] = [c] //a = 1
    //對象
    let {a,b} = {a:'100',b:'200'} // a = 100 , b = 200
    let {a:b} = {a:111} // b = 111;
    let {a,b = 4} = {a:1} //a = 1;b = 4

3.箭頭函數

1. 只有一個表達式
2. 含有多條語句
3. this的指向問題
   在箭頭函數內的this指向定義時的做用域，而不是執行時的做用域。

var name = "做用域1"
    var obj = {
        'name':'jonson',
        'syHello':()=>{
            this.name;//this指向定義的做用域，則返回：做用域1
        }
    }
//ps
var obj = {
    'name':"joson",
    "syHello":function(){
        this.name;//joson
    }
}

3.set結構 & map結構

set

set的值是不能重複的，至關於集合
var set = new Set([1,3,2,2,34,1,3])
var arr = [...set] 擴展運算符，將類數組對象轉換以逗號分割的序列，set轉換爲數組的方式
arr 爲數組形式
使用for of 遍歷set or 數組

for(let et of set){ //et直接表明元素
    console.log(et)
}

set.size 長度 set.add() 添加一個 set.delete() 刪除某一個 set.has() 是否包含某一個 set.clear() 清空
keys() 返回鍵名
values() 返回鍵值
entries() 返回鍵值對

forEach()

map

let map = new Map([['name':'john'],['age':'30']])
map.set(key,value) 添加元素
map.set(key,value) map.get(key) map.delete() map.has(key) map.clear();

keys() 返回鍵名
values() 返回鍵值
entries() 返回鍵值對
forEach() map.forEarch((value,key) => console.log(value*2))

4.生成器函數

5.class

class Person{
        constructor(name){
            this.name = name;
        }
    }

JS動畫 （7.1記）