一個切圖仔的 JS 筆記

1，經常使用數據操做

Math.round(mum,2);num.toFixed(2);兩位數
Math.floor(); 返回不大於的最大整數
Math.ceil(); 則是不小於他的最小整數
Math.floor(Math.random()*10+1); //生成1-10的隨機數

2，原生DOM 操做

//1， 如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），而後向一個已存在的元素追加該元素。
<div id="div1">
    <p id="p1">這是一個段落</p>
    <p id="p2">這是另外一個段落</p>
</div>
<script>
    var para=document.createElement("p");  建立該元素節點
    var node=document.createTextNode("這是新段落。"); 建立文本節點
    para.appendChild(node); 元素追加文本節點
    var element=document.getElementById("div1"); 選擇已存在節點
    element.appendChild(para); 追加
</script>
//2， 如需刪除 HTML 元素，您必須首先得到該元素的父元素：
<script>
way1:
    var parent=document.getElementById("div1"); 獲取父元素
    var child=document.getElementById("p1"); 要刪處的子節點
    parent.removeChild(child);
way2:這是經常使用的解決方案：找到您但願刪除的子元素，而後使用其 parentNode 屬性來找到父元素：
    var child=document.getElementById("p1");
    child.parentNode.removeChild(child);
</script>
DOM事件基本上都是on啥的： onchange輸入字段改變時觸發，  onunload離開頁面觸發，  onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的全部部分

3，Html5規範中規定自定義屬性須要添加前綴data-,目的是提供與渲染無關的信息。

使用getAttribute()方法以及setAttribute()方法操做自定義屬性 
例子：
<div id="user" data-name="monster1935" data-age="123"></div>
var user=document.getElementById('user');
//使用attributes方法操做屬性
//獲取相關屬性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//設置相關屬性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

var el=document.querySelector('#user');
var elem=document.querySelectorAll("[data-name='monster1935']");
div[data-name="monster"]{background-color: green;}

4，form表單提交

4-1：所謂form表單提交，submit會把input裏面name對應的value值提交，radio爲name一致。form標籤加action爲提交地址
4-2：var oUser = document.getElementByName('user')[0] ， 能夠獲取name爲全部user的第一個
4-3：oForm.onsubmit = function(){if(oUser.value==' '){reture false}} 當用戶未填寫提交時在form上加reture false 能夠阻止提交
4-4：對於reset ，oForm.onreset=function(){reture confirm('是否要清空')} 能夠防止用戶誤點擊reset

5，數據處理

str.search('a') //能夠在str中找到a所在位置
str.cahrAt( 1 ) //取字符串str 第 1 位的值

.push向數組尾部添加元素
.pop刪除數組尾部
.unshift向數組頭部添加元素
.shift刪除數組頭部
.join把數組分割成字符串
.split把字符串分割成字符串數組
.splice(index,howmany,item1,.....,itemX) 向/從數組中添加/刪除項目，而後返回被刪除的項目，index爲開始位置，howmany爲刪除個數，爲0則不刪除，iremX爲添加項目（可選）
arr.splice(1,2) //改變原數組 ,從1項開始刪除1,2項
arr.splice(1,2,"aaa","bbb") //替換鍵值對爲1,2的值
arr.splice(1,0,"aaa","bbb") //在鍵值對爲1的前面插入兩個值
.concat() 方法用於鏈接兩個或多個數組。或者直接把concat裏的參數鏈接到數組中
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。或者某個值在數組中的索(返回的是 valuesearch 第一次在數組（字符串）出現的位置（從左往右）)
lastIndexOf 返回的是 valuesearch 最後一次在數組（字符串）出現的位置（從左往右）《只不過查詢的方向不一樣而已》
string.charCodeAt(index)方法可返回指定位置的字符的 Unicode 編碼。

截取字符串silce substr substring
stringObject.substr(start,length)
arrayObject.slice(start,end)
var test = 'hello world';
alert(test.slice(4,7));             //o w
alert(test.substr(4,7));            //o world
alert(test.substring(7,4));          //o w
alert(test.substring(4,7));         //o w
alert(test.slice(-3));         //rld
1，substring是以兩個參數中較小一個做爲起始位置，較大的參數做爲結束位置。 2,當接收的參數是負數時，slice會將它字符串的長度與對應的負數相加，結果做爲參數；substr則僅僅是將第一個參數與字符串長度相加後的結果做爲第一個參數；substring則乾脆將負參數都直接轉換爲0。
2，IE對substr接收負值的處理有錯，它會返回原始字符串。因此推薦用slice

6，正則基本知識

正則表達式：
<script type="text/javascript">
            var str = 'abcdef'
//            var re = new Exp('A' , 'i')  //js風格寫法
            //後面加i忽略大小寫ignore /跟g就是全局搜索 、/ +號表示量詞，多個a

            var re = /a+/ig; //perl風格寫法
            console.log(re.test(str))
//            例如敏感詞過濾  str.replace(re, '***') 用***替換str中的全部re
        </script>
篩選漢字：  .replace(/[^\u4E00-\u9FA5]/g,'')
篩選全角：  .replace(/[^\uFF00-\uFFFF]/g,'')
篩選數字：  .replace(/[^\d]/g,'')
1，兩個特殊的符號 '^' 和 '$' 。 分別指出一個字符串的開始和結束
2，轉義字符： \d 數字， \w 全部字母，數字下劃線， \s 空白字符， \b 匹配一個單詞邊界(boundary)  。大寫的直接是相反了。如：\D除了數字全部字符
3，量詞：{n, m} 至少n次最多出現m次，{ n ,}至少n次 ， * 任意次 {0 ，}， ？ 零次或者一次{ 0 ， 1}，  +  一次或者任意詞{ 1，} ， { n }  正好n次
4，search 、 match（匹配）、replace（替換）
5，字符類：[ abc ] abc出現任意一個 ， [ a-z ]、[ 0-9 ]  a到z、0到9 ， [ ^a ] 除了a的全部字符
6， 組合類： [ a-z0-9A-Z ]  
7， a|b  a或者b 例如(b|cd)ef：表示"bef"或"cdef"；
8，( )標記一個子表達式的開始和結束位置。子表達式能夠獲取供之後使用。要匹配這些字符，請使用 \( 和 \)。
9， .  匹配除換行符 \n 以外的任何單字符。要匹配 . ，請使用 \. 。
"[a-d]"：表示一個字符串包含小寫的'a'到'd'中的一個（至關於"a|b|c|d"或者"[abcd]"）；
10.做爲元字符我本要匹配他$自己（美圓符號），用 \ 將它貶爲庶民。\也是一個元字符，它跟在另外一個元字符後面，就能還原它原本的含義
總結：
匹配量的：* + ? {n} {n,} {n,m} .
匹配位置的：^ $ 只匹配開頭，$只匹配結尾，不加這兩個就是全部匹配
匹配而且須要支持分組的時候須要括號來包裹：(匹配的模式)
匹配條件的：|  例如：/(^\s*)|(\s*$)/g 匹配開頭和結尾
匹配集合的：[]
匹配非集合的：[^]
匹配html標籤 .match(/<([a-zA-Z]+)>.*<\/\1>/)