javascrip学习三

一、数组

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语言掺杂在一起的出来的,里面的知识不需要总看。

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

『Knight』

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值