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(<
4000
span class="hljs-string">'知识'))
// 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. 节点

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;