一个切图仔的 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);//
//设置相关属性值
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>/)