前端学习笔记（5）
2020/5/29 周五
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)+' ');
}
document.write('<br>')//九九乘法表
}
</script>
3.while语句
<script>
var i=0;
while(i<10){
document.write(i+' ');
i++;
}//结果：0 1 2 3 4 5 6 7 8 9
</script>
4.do while语句
<script>
var i=0;
do{
document.write(i+' ');
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>
附加：
var names=['Ros','Tom','Lren'];//数组
var ages={lastname:"lion",firstname:"lisa"};//对象
扫一扫
4806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
