一、数组
1.数组的创建
a.Array数组类
var aList01 = new Array(1,2,3);
通过Array数组类来初始化数组,但是这个方法性能不高。
b.直接量方式
var aList02=[1,2,3];//通过直接量的方式
2. 数组的常用方法
A.获取数组长度
<script>
var aList02=[1,2,3];//通过直接量的方式
alert(aList02.length)//获取数组长度
</script>
B.访问数组元素
<script>
var aList02=[1,2,3];//通过直接量的方式
alert(aList02[0]);//获取数组下标为0的成员
</script>
C.push()从数组后面加一个元素
aList02.push('a');//从数组后面加一个元素
D.pop()从数组后面删除一个元素
aList02.pop();//从数组后面删除最后一个元素
E.unshift()从前面增加一个成员
aList02.unshift('b');//从前面增加一个成员
F.shift()从前面删除一个成员
aList02.shift('b');//从前面删除一个成员
G.reverse()对数组进行反转操作
aList02.reverse();//对数组进行顺序反转操作
H. indexof()返回第一次出现该元素的下标
var aList03[1,2,3,2,3,1,5,3,2,1];
aList03.indexof(1);//返回第一次出现该元素的下标
I.splice()删除增加元素
var aList03[1,2,3,2,3,1,5,3,2,1];
aList03.splice(1,0,'e');//在下标为1后面删除0个元素并加上元素e,
aList03.splice(1,2,'a','b','c','d');//在下标为1后面删除2个元素再加上后面一系列的元素
J. join()连接成一个字符
var aList03[1,2,3,2,3,1,5,3,2,1];
aList03.join('-');//将数组的成员以-为连接符连接成一串字符串,数组本身不变只是返回一个字符串
//所有方法中唯有join方法数组本身不变
二、多维数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//lenght()值为3
var aList = [[1,2,3],['a','b','c'],[4,5,6]];
alert(aList);
</script>
</head>
<body>
</body>
</html>
三、for循环
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/* for(var i=0;i<2;i++){
alert('hello world!');
} */
var aList=[1,2,3];
for(var i=0;i<aList.length;i++){//length
alert(aList[i]);
}
</script>
</head>
<body>
</body>
</html>
四、循环将数据放入页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var aList = ['美人鱼', '疯狂动物城','魔兽','美国队长3','湄公河行动'];
var oList = document.getElementById('list');
var iLength = aList.length;
var sTr = '';
for(var i=0;i<iLength;i++){
sTr+='<li>'+aList[i]+'</li>'
oList.innerHTML=sTr
}
}
</script>
<style>
.list{
list-style: none;
margin: 50px auto 0;
padding: 0px;
width: 300px;
height: 305px;
border-bottom: 1px dotted #000;
}
.list li{
height: 60px;
border-bottom: 1px dotted #000;
line-height: 60px;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="list" id="list">
<!-- <li></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</body>
</html>
五、数组去重
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var aList = [2,3,2,3,5,6,6,7,5,8,4,6,7,5,7,6,8,4,1];
var aLength = aList.length;
var aList2 =[];
for(var i=0;i<aLength;i++){
if (aList.indexOf(aList[i]) == i){
aList2.push(aList[i]);
}
}
//alert(aList2);
</script>
</head>
<body>
</body>
</html>
原理:准备两个数组,一个为样本数组,一个为输出去重的数组。将 样本数组进行遍历,判断样本数组下标为i的元素第一次出现的下标值与i是否相等,如果相等则把他放入输出数组中,遍历全部数组就把所有元素第一次出现装入了输出数值中。
六、标签获取元素的第二种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过标签获取元素</title>
<script>
window.onload=function(){
//通过标签名称获取li元素,生成一个选择集,赋值给aLi
var aLi = document.getElementsByTagName("li");
var len=aLi.length;
//alert(aLi.length);//读取选择集里面元素个数
//aLi.style.color="red";//报错因为aLi是一个选择集而非具体的某一个标签
//aLi[0].style.background="pink";//操作选择集的第一个li
for(var i=0; i<len;i++){
aLi[i].style.background="pink";//全部遍历加背景颜色
}
var oUl=document.getElementById('list1');//通过id选出li
var aLi2=oUl.getElementsByTagName("li");//在oUl的基础上再选择li组成一个选择集
var len2=aLi2.length;
for(var j=0;j<len2;j++){
if(j%2==0){
aLi2[j].style.fontSize="30px";
}
}
}
</script>
</head>
<body>
<ul id="list1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
//通过标签名称获取li元素,生成一个选择集,赋值给aLi
var aLi = document.getElementsByTagName("li");因为aLi为一个选择集,所以不可以直接aLi.style.color="red";来操作元素,
而必须改为aLi[0]来获取选择集里面的一个确定的元素,从而操作aLi[0].style.color="red";
其次就是上面的代码提及到了使用选择集和id值共同筛选,得以选出元素方法。
var oUl=document.getElementById('list1');//通过id选出是对于哪个ul的li进行操作
var aLi2=oUl.getElementsByTagName("li");//在oUl的基础上再选择li组成一个选择集,把选中的ul的li直接重组为一个选择集。
七、补充js的组成
js由三部分组成
1.ECMAscript的语法(变量、函数、循环语句)
2.DOM文档对象模型操作html和css的方法:如改变背景颜色
3.BOM浏览器对象模型操作和浏览器的一些方法如:弹框
八、字符串处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var iNum01 = 12;
var sNum02 = '24';
var sTr = 'abc';
alert(sNum02+iNum01)//弹出1224,对于加号来说可以做拼接就不做加法
var sTr02 = '12.05';
alert(parseInt(sTr02));//弹出12直接截断小数部分
alert(parseFloat(sTr02));//弹出12.05
var sTr03='12-45-366';
var aRr = sTr03.split('-');//[12,45,366]
var sTr04 ='#div';
var sTr05=sTr04.charAt(0)//#
var sTr06='abcdef zzh bhbsd';
var iNum03=sTr06.lastIndexOf('zzh');//有返回第一个字符出现的下标,没有则返回-1
var sTr07='abcdef123456efg'
var sTr08=sTr07.substring(6,11);//不包括11所对应的元素
var sTr09='abcdef';
var sTr10 = sTr09.toUpperCase();//大写09本生不会变只是返回大写
var sTr11 = 'ASDFG';
var sTr12 =sTr11.toLowerCase();//返回小写
// 字符串的反转
var sTr13='123456789';
var sTr14=sTr13.split('').reverse().join('');
</script>
</head>
<body>
</body>
</html>
<!--
1.字符串拼接 "+"
2.parselnt()将字符串转换为整数
3.parseFloat将数字字符串转化为小数
4.split把一个字符串分割成字符串组成的数组
5.charAt()获取字符串的某一个值
6.indexOf()查找字符串中含有的某字符,有返回第一个字符出现的下标,没有则返回-1
7.substring()截取字符串 substring(start,end)(不包括end)
8.toUpperCase()字符串转大写
9.toLowerCase()字符串转小写
-->
九、总结
通过对js的语法的接触,个人感觉更像是c语言和python语言掺杂在一起的出来的,里面的知识不需要总看。