测试开发笔记-web前端_web前端var i=1, b=++i, c = i++, d=--i; 求b、c、d、i;-CSDN博客

本文链接：https://blog.csdn.net/Myhappinessisyou/article/details/106480319

Web前端笔记（五）
1. i++与++i

<script>
	var i=1;
	document.write(1+'<br>');
	var b=i++;
	document.write(b+'<br>');
	document.write(i+'<br>');//结果：1 1 2
	
	var j=1;
	document.write(j+'<br>');
	var a=++j;
	document.write(a+'<br>');
	document.write(j+'<br>');//结果：1 2 2
</script>

两者区别在与于：
i++：是先赋值再参与运算
++i：是先运算再赋值
2. 嵌套for循环

<script>
	for(var a=1;a<10;a++){
		for(var b=1;b<=a;b++){
			document.write(b+'*'+a+'='+(a*b)+'&nbsp;');
		}
		document.write('<br>')//九九乘法表
	}	
</script>

3.while语句

<script>
	var i=0;
	while(i<10){
		document.write(i+'&nbsp;');
		i++;
	}//结果：0 1 2 3 4 5 6 7 8 9
</script>

4.do while语句

<script>
	var i=0;
	do{
		document.write(i+'&nbsp;');
		i++;
	}while(i<10);//结果0 1 2 3 4 5 6 7 8 9 
</script>

5.break与continue;

<script>
	var names=['roln','tom','Lion','rton'];
	for(var i=0;i<4;i++){
		if(names[i]=='Lion'){
			document.write('I miss you，Lion'+'<br>');
			// break;//指循环结束，之后的代码不会执行。
			continue;//只会结束当前的循环（指继续进行for循环）
		}
		document.write(names[i]+'<br>');
	}//结果：	roln
				tom
				I miss you，Lion
				rton
</script>

6.函数
6.1函数的作用
实现代码的重复使用，减少代码冗余
6.2函数

<script>
	function myFunction(){
		var a=56;
		var b=40;
		document.write(a/b);
	}
	myFunction();结果：1.4
	
	function hanshu(a,b){
		c=a+b;
		document.write(c);
		return;//return 函数的返回值，且后边的代码不会再执行
	}
	hanshu(2,5);//结果：7
</script>

6.3全局变量，局部变量，return

<script>
	//函数名后边括号里面是定义形象，定义了几个参数，在函数调用的时候就需要传入几个
	//函数的调用：函数调用的时候：函数名（），函数如果定义了参数，调用的时候一定要传入参数，而且传入参数的位置要与形参一样
	//全局变量：定义在函数体外的变量，可在任何地方调用
	//局部变量：定义在函数体内部，只能在内部使用
	var d=0;//d全局变量
	function hanshu(a,b){
		var c=a+b;//定义函数，c局部变量
		document.write(d);
		return c;//return 函数的返回值（即如果return 48；则调用函数时结果为48）且后边的代码不会执行,使用return才可以从外部调用内部变量	
	}			
	hanshu(2,5);//调用函数
	var p=hanshu(3,5);//使用return才可以从外部调用内部变量
	document.write(p);//执行函数
	//结果008
</script>

7.DOM
7.1改变html
四种方式获取html元素
ById、ByName、ById、ByName、ByTagName、ByClassName
1、id定位元素修改 getElementById(’’)
2、通过标签修改 getElementsByTagName(’’)。返回的是一个元素对象的集合。以数组的形式来保存，要改变其中某个标签，需要使用如下：
3、class来选择修改 getElementsByClassName(’’)

<script>
	function dome(){	
		document.getElementById('pid').innerHTML='这是改变后的';
		var btn=document.getElementsByTagName('p');
		var btt=document.getElementsByClassName('aa');
		//elements:复数是指搜来的信息以数组的方式保存
		btn[0].innerHTML='这是改变后的';
		btt[0].innerHTML='这是改变后的';		
	}				
</script>
<body>
	<p>这是一个段落</p>
	<p id="pid">这是一个段落</p>
	<p class="aa">这是一个段落</p>
	<button  type="button" onclick="dome()">修改</button>
</body>

7.2改变属性

<script>
	function dome(){
		var btn=document.getElementsByTagName('font');
		btn[0].color='blue';	
	}
</script>
<body>
	<font color="#008000">Are you ok</font>
	<button  type="button" onclick="dome()">修改</button>
</body>

7.3改变样式

<script>
	function dome(){
		var btn=document.getElementsByIdName('pid');
		btn.style.width='1200px';	
	}
</script>
<body>
	<p id="pid">Are you ok</p>//css{width:600px;}
	<button  type="button" onclick="dome()">修改</button>
</body>

7.4增删
7.4.1删除

<body>
	<ul id="uid">
		<li>名称</li>
		<li>目录</li>
		<li>正文</li>
	</ul>
	<button type="button" onclick="demo()">删除</button>
<script>
	function demo(){
		var btn=document.getElementById('uid');
		var list=document.getElementsByTagName('li');
		btn.removeChild(list[2])
	}
</script>
</body>

7.4.2新增

<script>
	function demo(){
		var btn=document.createElement('button');//创建新的HTML元素
		document.body.appendChild(btn);//在已有的元素中追加元素
	}
</script>
<body>
	<button type="button" onclick="demo()">删除</button>
</body>