JavaScript基础（三） ---- 字符串、Math、节点、元素的动态

1.字符串常用方法：

1. 根据索引找对应字符： 
    charAt(索引)          通过索引找对应字符
    charCodeAt(索引)      通过索引找对应字符的ASCII值；

2. 根据字符找对应索引 
    indexOf(字符串)       从前往后找：通过字符找对应索引； 找不到返回-1;
    lastIndexOf(字符串)   从后往前找： 通过字符找对应索引； 找不到返回-1;

3. 查找字符串 
    substr(n,m)          从索引n开始，查找m个；
    substring(n,m)       从索引n开始，找到索引m，但不包含m；
    slice(n,m)           他的功能跟substring一样；但是他可以取负值；

4. 字符串转大小写2个
    toUpperCase()        转大写
    toLowerCase()        转小写

5. 可以跟正则配合的字符串方法 
    1.split(‘切割形式’)   字符串转数组
    2.replace('内容','')  字符串替换
    3.match(‘’)          捕获的功能；
    4.search()           匹配的功能：通过字符找对应内容的索引； 找不到返回-1;

例一

    var str='基础知识&&javascript&&知识';
    var str2='abcdefg'
   // alert(str.charCodeAt(3))
   // console.log(str.indexOf('知识'))
   // console.log(str.lastIndexOf('知'))
   // console.log(str.substring(2,5))
   // console.log(str.slice(-4,-1))
   // console.log(str.slice(-4))
   /*var ary=str.split('&&');
    console.log(ary)*/
   // console.log(str2.toUpperCase().toLowerCase())
   // console.log(str.replace('基础','知识'))
   // console.log(str.match('知识'))
   // console.log(str.search('lala'))

例二

    var str='zhishi';
    // console.log(str.charAt(0).toUpperCase()+str.slice(1))
    /*console.log(str.charAt(0).toUpperCase()+str.substring(1))
    console.log(str.charAt(0).toUpperCase()+str.substr(1))*/
    // str=str.replace('z','Z');
    // console.log(str)

2.Math 常用方法

    1.Math.round()     四舍五入
    2.Math.floor()     向下取整
    3.Math.ceil        向上取整
    4.Math.abs()       取绝对值
    5.Math.pow()       幂
    6.Math.sqrt()      开平方
    7.Math.max()       求最大值
    8.Math.min()       求最小值
    9.Math.random()    0-1之间的随机小数
    求n-m之间的随机整数，包含n和m; Math.round(Math.random()*(m-n)+n);

3. 0-61之间4个不重复的随机整数： for循环， while循环 —– 验证码常用

方法一：

var ary=[];
for(var i=0; i<4; i++){
        var rnd=Math.round(Math.random()*61);
        if(ary.indexOf(rnd)!==-1){//重复
            i--;
        }else{
            ary.push(rnd);
        }
    }

方法二：

var ary=[];
while(ary.length<4){
        var rnd=Math.round(Math.random()*61);
        if(ary.indexOf(rnd)===-1){
            ary.push(rnd);
        }
    }

4. 获取4位不重复的随机验证码 – 常用

var strCode='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var str='';
    //只要字符串的长度小于4，满足循环条件
    while(str.length<4){
        var rnd=Math.round(Math.random()*61);//拿随机数的目的，把数字做为索引找对应的内容；
        //字符串中如果没有该字符，才给字符串里添加
        if(str.indexOf(strCode.charAt(rnd))===-1){
            str+=strCode.charAt(rnd);
        }
    }
    console.log(str);

5. 节点

节点类型	nodeType	nodeName	nodeValue
文本节点	3	text	文本内容
注释节点	8	comment	注释内容
元素节点	1	大写的标签名	null
document	9	document	null

6. 节点关系

  1. parentNode        父节点；结构上的父级；
  2. childNodes        兼容所有浏览器，拿到的当前元素下所有的子节点
  3. children
  4. previousSibling             上一个兄弟节点  
     previousElementSibling      上一个哥哥元素节点 ---- 不兼容
  5. nextSiling                  下一个兄弟节点  
     nextElementSibling          下一个弟弟元素节点 ----   不兼容
  6. firstChild       第一个子节点
  7. lastChild        最后一个子节点

7. 关于元素的动态操作

1. 元素的动态创建
    document.createElement('标签名')；
    obj.cloneNode(布尔值) 
       true:深度克隆  
       false：只克隆表面，不克隆元素的内容

2. 元素的动态插入
    parent.appendChild(curEle);             把当前元素插入到父容器的末尾；
    parent.insertBefore(curEle，oldEle);    把新元素插入到指定元素的前面；

3. 元素的删除和替换
    parent.removeChild(要移除的元素);        删除
    parent.replaceChild(curEle,oldEle);    替换

4.attribute系列：
    obj.getAttribute(属性名)          获取元素身上的某个属性
    obj.setAttribute(属性名)          设置元素的自定义属性；
    obj.removeAttribute(属性名)       移除元素身上的某个属性；

8. 关于.和attribute的区别

1）如果已经在标签上设置了自定义属性，通过"."不能获取到；通过getAttribute可以获取到自定义属性
2）通过"."设置的自定义属性；在标签上看不到；但是通过setAttribute设置的自定义属性，可以看到
注意事项："."和attribute不能混合操作；
小总结：操作元素属性的方法有3个：
.   []   attribute系列

9. DOM元素获取

1. var oDiv=document.getElementById('div');
2. var oDiv=document.getElementsByTagName('div')[0];
3. var oDiv=document.getElementsByClassName('div')[0];
4. var oTxt=document.getElementsByName('t1')[1];
5. var oDiv=document.querySelector('#div');
6. var oDiv=document.querySelector('.div');
7. var clientWidth=document.documentElement.clientWidth||document.body.clientWidth;
8. var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;