本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客 !!
------------------ 数组-------------------
数组的声明
<script>
// 数组的声明方式
var arr = [1,2,5,5]; // 数组名[索引值]; 索引号的顺序从0开始
var arr = new Array(1,4,6);
var testArr = ["刘备","关羽","张飞","诸葛亮"];
console.log(testArr[3]);
// 数组的长度 数组.length
console.log(testArr.length);
// 遍历数组 这种方式会让系统每次都去检测一次数组的长度
for(var i = 0; i < testArr.length; i++){
console.log(testArr[i]);
}
// 而这种方式则不会 相比较而言 是这种遍历方式好点
for(var i = 0, len = testArr.length; i < len; i++){
console.log(testArr[i]);
}
</script>
创建数组
var numArray = new Array();
数组元素的添加
//1.创建数组
var numArray = new Array();
var arr = []; // 这种比较常用
//2.添加元素 push();
var a = numArray.push(1);
alert(numArray)
var b = numArray.push(2);
console.log(numArray);
console.log(a);
console.log(b);
//push():会在数组的结尾处添加一个元素，改变原来的数组,返回值是数组的长度
//2.第二种添加元素 unshift():
var aa = numArray.unshift(0);
console.log(numArray);
console.log(aa);
//unshift()：会在数组的开始添加一个元素，会改变数组，返回值是数组的长度
数组元素的删除
var numArray = [1,2,3,3,4,4,5];
//1.删除元素 pop(); 和push() 对应
var a = numArray.pop();
console.log(a);
console.log(numArray);
//从数组的最后删除元素，返回删除的元素
//2.从开头删除元素 shift():和unshift():对应
var aa = numArray.shift();
console.log(aa);
console.log(numArray);
//shift会改变数组，返回被删除的元素
数组元素的连接
var array1 = [1,2,3,3,5,4];
var array2 = [2,3,3,,35,5];
// concat(array2): 数组里面的元素用concat()来连接
var allArray = array1.concat(array2);
console.log(allArray);
console.log(array1);
console.log(array2);
数组的转化方法
var array =[1,3,5,7,9];
//1.数组转化字符 join(); 传入连接符
//如果join方法中传入什么就会把数组用什么连接起来
var arrStr = array.join('-');
console.log(arrStr);
//2.字符串转化数组 split();
//split会把字符转化成数组，但是这个字符必须是有规律的
var newArray = arrStr.split('-');
console.log(newArray);
数组的排序
var numArray = [1,3,20,5,30,6,36,21];
//数组排序
//numArray.sort();
//console.log(numArray);
//sort以及排序，但是是通过ascii转化后排序的，不能达到我们要的效果
//使用函数与参数
numArray.sort(function(a,b){
// 可以理解为1为true , -1为false
// 返回true则从小到大排序 , 返回false则从大到小排序
return a>b?1:-1;
});
console.log(numArray);
//函数参数必须写，会把数组中的元素进行传递，不可以直接写1 或者-1
//返回值不一定是1 或者-1，可以是任何数字
------------------ 字符串---------------------
字符的转化
var a = 10;
//1.第一种 直接使用引号
var newString = a +'';
console.log(typeof newString);
console.log(newString);
//2.第二种 使用String();方法
var newString1 = String(a);
console.log(typeof newString1);
console.log(newString1);
获取某一个位置的字符
var charString = 'my name is tack 我的名字是';
console.log(charString.length);
//空格也占用位置
//获取元素
var sym = charString.charAt(0);
console.log(sym);
// charAt(); 返回指定位置的字符.
var codeSym = charString.charCodeAt(20);
//charCodeAt：把获取的值转化成unicode编码后显示
console.log(codeSym);
//汉字转换成Unicode编码后都是大于127，一般汉字占位2个字节，其余占用1个
获取字符串占用的字节数
var myString = 'my name 我的名字 abc';
console.log(myString.length);
var totalLength = 0;
for(var i = 0;i < myString.length;i ++){
//获取对应的字符的unicode编码
var charNum = myString.charCodeAt(i);
if (charNum > 127){
totalLength +=2;
}
else {
totalLength +=1;
}
}
console.log(totalLength);
获取某个字符的位置
var charString = 'my is abc dcf a';
//获取某一个字符的位置
var poiont = charString.indexOf('n');
console.log(poiont);
//indexOf:会获取传入的字符的位置，位置从左到右边
//如果获取到第一个元素后，就会返回第一个获取元素的位置,如果没有对应的元素就会返回-1；
var newPoint = charString.lastIndexOf('a');
console.log(newPoint);
//lastIndexOf：从后往前找对应的元素
//如果找到就会把对应的位置返回，但是注意位置排序还是从左到右
字符大小写转化
var lowString = 'abc cddfff';
//转化成大写 toUpperCase();
var newLowString = lowString.toUpperCase();
console.log(newLowString);
//大小写方法不会改变原来的字符，返回值是对应转化后的结果
//转化成小写 toLowerCase();
var newString2 = newLowString.toLowerCase();
console.log(newString2);
字符截取
var charString = 'my name is abc cdf';
//字符截取 slice();
var sliString = charString.slice(1);
console.log(sliString);
//slice:如果传入一个参数，表示从这个参数的位置开始截取直到字符结束
//如果传入两个参数，表示从第一个参数位置开始截取到第二个参数位置结束
//但是不包括第二个参数的位置
var newSliString = charString.slice(1,4);
console.log(newSliString);
var subS = charString.substr(1);
console.log(subS);
//substr:如果传入一个参数，和slice是一样
var newSubS = charString.substr(1,4);
console.log(newSubS);
//如果传入两个参数，会从第一个参数开始，截取第二个参数长度对应的字符
var newSubString1 = charString.substring(4,2);
console.log(newSubString1);
保留两位小数
var num = 3.141591653;
var numString = String(num);
//1.0截取字符
//1.1获取小数点的位置
var index = numString.indexOf('.');//1
var newString = numString.slice(0,index+3);
console.log(newString);
console.log(Number(newString));
//2.通过方法直接设置
var newNum = num.toFixed(2);//传入参数表示保留几位小数
console.log(newNum);
------------------ 定时器--------------------
补充一点定时器的知识
定时器
- 在定时器中使用的this表示的是winodow，如果要是使用按钮我们需要在外面记录对应的this,形式是 var that ; that = this
- 定时器：每隔一段时间执行一个操作,操作一般是一个事件指令
- 定时器的分类：一次定时，多次定时
- 一次定时器：执行一次后就不执行
- 多次定时器：会执行多次，一直执行
一次定时器
setTimeout(function () {
alert('我是一次定时器');
},1000);
- 一次定时器中传入两个参数，第一个参数表示执行的操作，第二个表示间隔的时间
- 时间是毫秒，1秒= 1000毫秒
多次定时器
setInterval(function(){
alert('我是多次定时器')
},1000);
- 多次定时器中传入两个参数，第一个参数表示执行的操作，第二个表示间隔的时间
- 多次定时器会执行多次操作
- 定时器在使用完成后，不会自动清空，我们需要手动清空
clearTimeout(timeOut)
clearInterval(timeInter);
------------------ 节点 --------------------
Js的组成
// ECMAscript
// Dom
// Bom
//可以把一个界面看做一个dom,每一元素都看做一个节点
//会把文本对象看做节点
父子节点
<div class="box">
<span id="x">x</span>
</div>
<style>
.box{
border: 1px solid #d9d9d9;
margin: 100px auto;
position: relative;
width: 107px;
}
#x{
float: left;
display: block;
border: 1px solid #d9d9d9;
width: 14px;
height: 14px;
line-height: 14px;
color: #d6d6d6;
cursor: pointer;
position: absolute;
top: 0;
left: -15px;
}
</style>
<script>
window.onload = function(){
var x = document.getElementById("x");
x.onclick = function(){
// parentNode 父子节点 必须是亲的
this.parentNode.style.display = "none";
}
}
</script>
兄弟节点
<script>
/*
nextSibling (下一个兄弟,包含文本节点) 只有IE 6/7/8认识 别的浏览器不兼容
nextElementSibling (不包含文本节点) 其他浏览器兼容的
previousSibling (上一个兄弟)
previousElementSibling 其他浏览器兼容的
firstChild 只有IE 6/7/8认识 别的浏览器不兼容
firstElementChild 其他浏览器兼容的
lastChild 只有IE 6/7/8认识 别的浏览器不兼容
lastElementChild 其他浏览器兼容的
*/
window.onload = function(){
var one = document.getElementById("one");
// one.nextSibling.style.backgroundColor = "red"; 只有IE6/7/8认识
// 这是一种兼容写法 one.nextElementSibling 一定要写在前面
var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
}
</script>
<ul>
<li>123214124</li>
<li>123214124</li>
<li id="one">123214124</li>
<li>123214124</li>
<li>123214124</li>
</ul>
孩子节点
<ul id="ul">
<li>123</li>
<li>212</li>
<li>331</li>
</ul>
<script>
// childNodes 嫡出(正式推出的)
var ul = document.getElementById("ul");
// 选择全部的孩子 火狐 谷歌等高版本浏览器会把换行和空格也当作一个节点
var children = ul.childNodes;
// 所以输出 7 但是IE6/7/8 不会把换行当作节点 输出三个节点
// alert(children.length);
for(var i = 0; i < children.length; i++){
// 利用nodeType == 1时 才是元素节点 来获取元素节点
if(children[i].nodeType == 1){
children[i].style.backgroundColor = "red";
}
}
// children 庶出 但是很重要 选取全部的孩子(只有元素节点) 没有兼容性的问题
var ul = document.getElementById("ul");
var children = ul.children;
alert(children.length); // IE 6/7/8 包含注释节点 这个要避免开
</script>
节点操作
<!--
DOM的节点操作 新建节点 插入节点 删除节点 克隆节点 等等
创建节点: document.createElement(" ");
插入节点: appendChild(创建的节点); 添加孩子 放到盒子的最后面
insertBefore(插入的节点,参照的节点); 写满两个参数 放到盒子的前面
移除节点: removeChild(); 移除孩子
克隆节点: cloneNode(); 复制节点 见谁复制谁
括号里面可以跟参数 如果里面是true 深层复制 除了复制盒子 还复制子节点
如果为false 浅层复制 只复制本节点 不复制子节点
-->
<div id="demo">
<div id="two"></div>
<div id="xiongda"></div>
</div>
<script>
var demo = document.getElementById("demo");
var childrens = demo.children;
// 创建节点
var firstDiv = document.createElement("div");
// 插入节点
demo.appendChild(firstDiv);
// 创建节点
var test = document.createElement("div");
demo.insertBefore(test,null);
// 如果没有参照节点 就写null 那么默认会把新生成的盒子放在最后面
// 移除节点
var da = document.getElementById("xiongda");
demo.removeChild(da); // 移除xiongda的节点
// 克隆节点
var last = childrens[0].cloneNode();
demo.appendChild(last);
// 给他的爸爸添加孩子 就是我的兄弟
demo.parentNode.appendChild(demo.cloneNode(true));
</script>
