Web前端开发技术复习javascript初级

web前端开发技术复习|前端初级开发工程师要求|初级web前端开发工程师|前端开发者

一.js入门和一些常用事件
html 代码

<!DOCTYPE html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>web前端开发技术复习javascript初级</title>
<style>
li{
list-style:none;
}
.lis{
width:80px;
height:30px;
border:1pxsolid#333;
position:relative;
}
.lisa{
display:block;
line-height:30px;
text-align:center;
text-decoration:none;
color:#000;
background:#f1f1f1;
}
ulul{
padding:0;
margin:0;
width:140px;
border:1pxsolid#333;
position:absolute;
top:30px;
left:-1px;
background:#FF9;
display:none;
}
ululli{
text-align:center;
line-height:30px;
}
</style>
<!–
希望把某个元素移除你的视线:
1、display:none; 显示为无
2、visibility:hidden; 隐藏
3、width \ height
4、透明度
5、left \ top
6、拿一个白色DIV盖住它
7、margin负值
……
–>
</head>
<body>
<ul>
<liid=”lis” class=”lis”>
<aid=”link” href=”#”>微博</a>
<ulid=”ul1″>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
varli=document.getElementById(‘lis’);
varul=document.getElementById(‘ul1’);
vara=document.getElementById(‘link’);
/*
同样可以这样书写:
li.onmouseover=function(){
//事件
}
*/
li.onmouseover=show;
li.onmouseout=hide;
functionshow(){
ul.style.display =’block’;
a.style.background =’yellow’;
}
functionhide(){
ul.style.display =’none’;
a.style.background =’#f1f1f1′;
}
/*
一.js中如何获取元素:
1、通过ID名称来获取元素:
docuemnt.getElementById(‘link’);
2
……
事件:鼠标事件、键盘事件、系统事件、表单事件、自定义事件……
onclick 点击事件
onmouseover 鼠标移入事件
onmouseout 鼠标离开事件
onmousedown 鼠标按下瞬间时触发事件
onmouseup 鼠标抬起瞬间时触发事件
onmousemove 鼠标移动事件
……
onload 加载完以后执行……
window.onload = 事情
img.onload
body.onload
……
如何添加事件:
元素.onmouseover
函数:可以理解为-命令,做一些事~~
function abc(){ // 肯定不会主动执行的!
……
}
1、直接调用:abc();
2、事件调用:元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数
元素.事件 = function (){};
测试:
alert(1); 带一个确定按钮的警告框
alert(‘ok’); ‘ok’ 字符串
alert(“ok”);
变量:
var li = document.getElementById(‘lis’);
var num = 123;
var name = ‘leo’;
*/
</script>
</body>
</html>

二.属性的操作
主要包括:
属性名:
属性值:
可以通过这样的方式进行读(获取到元素属性的值)和写(修改元素属性的值)
元素.属性名 = 新的值
(1).innerHTML
html 代码

 

(2).文字放大和缩小,给元素添加class属性
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>2018年互联网前端开发</title>
<script>
window.onload = function () {
varoBtn1=document.getElementById(‘btn1’);
varoBtn2=document.getElementById(‘btn2’);
varoBtn3=document.getElementById(‘btn3’);
varoBtn4=document.getElementById(‘btn4’);
varoP=document.getElementById(‘p1’);
varnum=14;
oBtn1.onclick=function(){
num-=2;
//浏览器最小字体为12px
if (num<12) {
num=12;
}
oP.style.fontSize =num+’px’;
// js 不允许出现”-“
// padding-top paddingTop
// margin-left marginLeft
};
oBtn2.onclick=function(){
// num = num + 2;
num+=2;
oP.style.fontSize =num+’px’;
// js 不允许出现”-“
};
oBtn3.onclick=function(){
// oP.class = ‘red’;
// class => className
oP.className =’red’;
};
oBtn4.onclick=function(){
// oP.class = ‘red’;
// class => className
oP.className =’yellow’;
};
};
</script>
<style>
.red{
width:400px;
border:10pxsolid#333;
background:red;
padding:20px;
color:yellow;
}
.yellow{
width:500px;
border:5pxsolid#333;
background:yellow;
padding:10px;
color:red;
}
</style>
</head>
<body>
<inputid=”btn1″ type=”button” value=”-” />
<inputid=”btn2″ type=”button” value=”+” />
<inputid=”btn3″ type=”button” value=”红” />
<inputid=”btn4″ type=”button” value=”黄” />
<pid=”p1″ style=”font-size:16px;”>10月28日晚,中央纪委监察部官网发布消息,贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串”打虎”行动中第十一位落马的副省部级以上高官。</p>
</body>
</html>

(3).相对路径问题
所有的相对路径不能作为判断来进行比较,只有绝对路径才可以
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>web前端开发初级入门</title>
<script>
window.onload = function () {
varoImg=document.getElementById(‘img1’);
oImg.onclick=function(){
// alert( oImg.src );
// img/1.jpg
// file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg
// if( oImg.src == ‘img/1.jpg’ ){
// 不能做为判断条件:
// }
// 下边的可以作为判断条件,绝对路径
if (oImg.src==’file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg’) {
oImg.src=’img/2.jpg’;
}
};
};
</script>
</head>
<body>
<imgid=”img1″ src=”http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%A7%91%E6%AF%94&hs=0&pn=3&spn=0&di=188292305660&pi=0&rn=1&tn=baiduimagedetail&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=4184262183%2C1600730765&os=2167617017%2C4076196338&simid=0%2C0&adpicid=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=11&oriquery=%E7%A7%91%E6%AF%94&objurl=http%3A%2F%2Fk.sinaimg.cn%2Fn%2Fsports%2Ftransform%2F20161003%2FJxWd-fxwkzym7597498.jpg%2Fw570116.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bx3dvq_z%26e3Bv54AzdH3FtgfpwssAzdH3F1psqq_z%26e3Brir%3Fgt1%3Ddaab9d%0Bfv6trp%0D%3F0lamb0_z%26e3Bip4s&gsm=0″
width=”400″ />
</body>
</html>

(4).float的兼容性
oDiv.style.float = ‘right’;

oDiv.style.styleFloat = 'right';        // IE
oDiv.style.cssFloat = 'left';           // 非IE

IE(styleFloat)
非IE(cssFloat)

(5).简易的聊天界面的实现
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>0基础入门web前端开发</title>
<style>
#div1{
width:240px;
height:200px;
border:1pxsolid#333;
background:#f1f1f1;
padding:10px;
}
</style>
<script>
window.onload = function () {
varoDiv=document.getElementById(‘div1’);
varoStrong=document.getElementById(‘strong1’);
varoText=document.getElementById(‘text1’);
varoBtn=document.getElementById(‘btn1’);
oBtn.onclick=function(){
// 原来的内容,你得给我留着,然后再加上新内容
// a = a + b
// a += b
// 添加:+= 这里如果只是加那每次就会覆盖上一个写的内容
// oDiv.innerHTML = oDiv.innerHTML + oText.value + ”;
oDiv.innerHTML+=oStrong.innerHTML+oText.value +”;
oText.value =”;//让文本输入框的内容清空
};
};
</script>
</head>
<body>
<divid=”div1″></div>
<strongid=”strong1″>张三:</strong>
<inputid=”text1″ type=”text” />
<inputid=”btn1″ type=”button” value=”提交” />
</body>
</html>

(6).简易的图片切换
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>3个月能够入门前端开发吗</title>
</head>
<body>
<imgid=”img1″ src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240mq9kjwlpe55i4neo.jpg” width=”600″ />
<script>
varoImg=document.getElementById(‘img1’);
//次变量相当于一个开关,进行控制图片的切换
varonOff=true;// 布尔值:true 1 false 0
oImg.onclick=function(){
// if( oImg.src == ‘
‘ ){
// 有条件,就用现成的,如果没有,创造条件也得做事
if (onOff) {
oImg.src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240efjof6iu6gocxdfi.jpg”;
onOff=false;
}else{
oImg.src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240mq9kjwlpe55i4neo.jpg”;
onOff=true;
}
};
</script>
</body>
</html>

(7).理解js中的数组和常用的数组方法
数组常用的几种方法
push:向数组的末尾增加一项 返回值是数组的新长度
unshift:向数组开头增加一项 返回值是数组的新长度
pop:删除数组的末尾项 返回值是删除的数组项
shift:删除数组开头项 返回被删除的开头项目
splice:删除数组中的任意项 返回值是被删除的数组项
slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项

拼接:
concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组
join:把数组中的每一项 按照指定的分隔符拼接成字符串

排序:
reverse:倒序数组 返回值倒序数组 原有数组改变
sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序

兼容性不好:
indexOf:返回获取项在数组中的索引
lastIndexOf:返回获取项在数组中出现的最后一次索引
html 代码

var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var ary1 = [1, 5, 7, 4];
var ary2 = [2, 3, 4, 5, 7, 3, 4, 5];
var a = ary.splice(2, 3, 5); //第一个参数是数组的位置,第二个参数是删除多少个,第三个参数是要往2的位置添加一项 //删除数组中的任意项 可引申为push,unshift,pop,shift,slice最为常用
var b = ary.splice(2, 1); //删除2位置的一项
/*var a=”test”;
var b=[123]; 供forEach测试使用*/
var c = ary.push(1); //在数组的末尾增加一项
var d = ary.unshift(3); //在数组的开头增加一项
var e = ary.pop(); //在数组的末尾删除一项
var f = ary.shift(); //在数组的开头删除一项
var g = ary.slice(2, 5); //截取的意思,截取2-5不包含最后一项
var h = ary.concat(ary1, ary2).concat(1, 2, 2, 2, 2, [456654]); //如果没有参数 或者参数为()空则为赋值数组
var i = ary.join(‘+’); //将数组中的每一项用指定的分隔符拼接成一个新的字符串
var j = ary.reverse(); //倒序排序 原有数组改变
var k = ary1.sort(function (a, b) {
returnb-a;
});
var l = ary2.indexOf(4); //返回获取项在数组中出现的索引
var m = ary2.lastIndexOf(4); //返回获取项在数组中出现的最后一次索引
var n = ary2.indexOf(9); //若获取项不存在则返回-1

(8).用数字储存数据的方式实现,四个图片切换,点击图片切换
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>前端开发入门</title>
<script>
window.onload = function () {
varoImg=document.getElementById(‘img1’);
vararr= [‘http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240g49q4dd44yxosvb6.jpg’,
‘http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240efjof6iu6gocxdfi.jpg’,
“http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240mq9kjwlpe55i4neo.jpg”
];
varnum=0;
oImg.onclick=function(){
//点击图片时索引增加.
num++;
//等索引等于最后一张图片时,让其等于0,从第一张开始
if (num==arr.length) {
num=0;
}
// alert( arr[num] );
oImg.src=arr[num];
};
};
</script>
</head>
<body>
<imgid=”img1″ src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240g49q4dd44yxosvb6.jpg” width=”400″ height=”400″
/>
</body>
</html>

三.for循环的应用
(1).嵌套循环
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>前端开发初学者应该怎样入门</title>
</head>
<body>
<script type=”text/javascript”>
for (vari=1;i<6;i++) {
//第几行就会打印出几个*
for (varj=1;j<i;j++) {
document.writeln(“*”);
}
document.write(“<br/>”)
}
</script>
</body>
</html>

(2).九九乘法表
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>web前端开发html代码</title>
</head>
<body>
<script type=”text/javascript”>
//外层循环,循环10行
for (vari=1;i<10;i++) {
//内层循环是生成每行的内容
for(varj=1;j<=i;j++){
c=j*i;
document.write(“&nbsp;”+c+”=”+j+”*”+i)
}
document.write(“</br>”)
}
</script>
</body>
</html>

(3).for循环小实例
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>前端开发代码大全</title>
<style>
div{
width:50px;
height:50px;
background:red;
position:absolute;
top:0;
left:0;
font-size:30px;
text-align:center;
line-height:50px;
color:#fff;
}
</style>
<script>
window.onload = function () {
//获取到文档中所有的div元素
varaDiv=document.getElementsByTagName(‘div’);
//循环生成11个div盒子
for (vari=0;i<11;i++) {
document.body.innerHTML += ‘<div>’ + i + ‘</div>’;
}
//并对每一个div定位,位置定的不同,
for (vari=0;i<aDiv.length;i++) {
aDiv[i].style.left =10+i*50+’px’;
aDiv[i].style.top =10+i*50+’px’;
}
};
</script>
</head>
<body>
</body>
</html>

(3).循环生成一组新闻
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>如何最快成为一名前端开发人员</title>
<script>
window.onload = function () {
varoBtn=document.getElementById(‘btn1’);
varoUl=document.getElementById(‘list’);
vararr= [
‘山西省委附近多次爆炸 官方称尚不确定是恐怖袭击’,
‘甘肃张掖明令禁止转基因 书记:无力辨别只能禁止’,
‘多地制定雾霾预案限行限排被批治标不治本’,
‘韩媒抱怨中国雾霾侵袭韩国 称其为”黑色灾难” ‘,
‘伊朗革命卫队高官在叙利亚当”志愿者”被杀(图)’
];
varonOff=true;
oBtn.onclick=function(){
if (onOff) {
//循环生成新闻内容
for (vari=0;i<arr.length;i++) {
//+=每次再次基础上进行添加
oUl.innerHTML+='<li>’+arr[i] +'</li>’;
}
}
//防止多次点击生成重复的新闻
onOff=false;
};
};
</script>
</head>
<body>
<inputid=”btn1″ type=”button” value=”自动生成5条新闻” />
<ulid=”list” style=”border:1px solid red;”></ul>
</body>
</html>

四.自定义属性和索引
(1).自定义属性
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>零基础开始学web前端开发</title>
<script>
/*
HTML 标签属性、
自定义属性
*/
window.onload = function () {
varaBtn=document.getElementsByTagName(‘input’);
// aBtn[0].abc = 123; // 自定义属性
// alert( aBtn[0].abc );
// aBtn[0].abc = 456;
// JS 可以为任何HTML元素添加任意个 自定义属性
//对每一个input都添加了自己定义的属性abc和xyz
for (vari=0;i<aBtn.length;i++) {
aBtn[i].abc=123;
aBtn[i].xyz=true;
}
};
</script>
</head>
<body>
<inputtype=”button” value=”按钮1″ />
<inputtype=”button” value=”按钮2″ />
<inputtype=”button” value=”按钮3″ />
</body>
</html>

(2).自定义属性的应用
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>前端开发前沿技术</title>
<style>
li{
list-style:none;
width:114px;
height:140px;
background:url(http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240g49q4dd44yxosvb6.jpg);
float:left;
margin-right:20px;
}
</style>
<script>
window.onload = function () {
varaLi=document.getElementsByTagName(‘li’);
// var onOff = true; // 只能控制一组!
for (vari=0;i<aLi.length;i++) {
//对每一个li都设置了自定义属性
//应用前边学习的开关知识
aLi[i].onOff=true;
//对每一个li都添加上了.click事件..,,,,,
aLi[i].onclick=function(){
// alert( this.style.background );
// 背景不能判断
// color red #f00
// 相对路径
//此时的this指的是,点击的元素..
if (this.onOff) {
this.style.background =
‘url(http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240efjof6iu6gocxdfi.jpg)’;
this.onOff=false;
}else{
this.style.background =
‘url(http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240g49q4dd44yxosvb6.jpg)’;
this.onOff=true;
}
};
}
};
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

(3).自定义索引值得应用
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>web前端开发必备技术</title>
<script>
window.onload = function () {
varaBtn=document.getElementsByTagName(‘input’);
varaP=document.getElementsByTagName(‘p’);
// 想建立“匹配”“对应”关系,就用索引值
vararr= [‘AAA’,’BBB’,’CCC’];
for (vari=0;i<aBtn.length;i++) {
aBtn[i].index =i;// 自定义属性(索引值)
aBtn[i].onclick=function(){
// alert( arr[ this.index ] );
//this指的是点击的当前按钮
this.value =arr[this.index];
//这里可以直接使用自定的属性,,,,,,,,
aP[this.index].innerHTML=arr[this.index];
};
}
};
</script>
</head>
<body>
<inputtype=”button” value=”btn1″ />
<inputtype=”button” value=”btn2″ />
<inputtype=”button” value=”btn3″ /> a b c
</body>
</html>

(4).利用for循环和索引值来实现图片切换
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>前端开发面试知识点</title>
<style>
ul{
padding:0;
margin:0;
}
li{
list-style:none;
}
body{
background:#333;
}
#pic{
width:400px;
height:500px;
position:relative;
margin:0auto;
background:url(img/loader_ico.gif)no-repeatcenter#fff;
}
#picimg{
width:400px;
height:500px;
}
#picul{
width:40px;
position:absolute;
top:0;
right:-50px;
}
#picli{
width:40px;
height:40px;
margin-bottom:4px;
background:#666;
}
#pic.active{
background:#FC3;
}
#picspan{
top:0;
}
#picp{
bottom:0;
margin:0;
}
#picp,
#picspan{
position:absolute;
left:0;
width:400px;
height:30px;
line-height:30px;
text-align:center;
color:#fff;
background:#000;
}
</style>
<script>
window.onload = function () {
varoDiv=document.getElementById(‘pic’);
varoImg=oDiv.getElementsByTagName(‘img’)[0];
varoSpan=oDiv.getElementsByTagName(‘span’)[0];
varoP=oDiv.getElementsByTagName(‘p’)[0];
varoUl=oDiv.getElementsByTagName(‘ul’)[0];
varaLi=oUl.getElementsByTagName(‘li’);
// var arrUrl = [ ‘img/1.png’, ‘img/2.png’, ‘img/3.png’, ‘img/4.png’ ];
vararrUrl= [‘http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240g49q4dd44yxosvb6.jpg’,
‘http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240efjof6iu6gocxdfi.jpg’,
“http://cdn.attach.w3cfuns.com/notes/pics/201608/09/162240mq9kjwlpe55i4neo.jpg”
];
vararrText= [‘图片一’,’图片二’,’图片三’];
varnum=0;
varoldLi=null;
for (vari=0;i<arrUrl.length;i++) {
oUl.innerHTML+='<li></li>’;
}
oldLi=aLi[num];
// 初始化
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+’ / ‘+arrUrl.length;
oP.innerHTML=arrText[num];
aLi[num].className =’active’;
for (vari=0;i<aLi.length;i++) {
aLi[i].index =i;// 索引值
aLi[i].onclick=function(){
oImg.src=arrUrl[this.index];
oP.innerHTML=arrText[this.index];
oSpan.innerHTML=1+this.index +’ / ‘+arrText.length;
/*
<li class=”active”></li>
<li></li>
<li></li>
<li></li>
*/
// 思路一:全部清空,当前添加
for (vari=0;i<aLi.length;i++) {
aLi[i].className =”;
}
this.className =’active’;
};
}
};
</script>
</head>
<body>
<divid=”pic”>
<imgsrc=”” />
<span>数量正在加载中……</span>
文字说明正在加载中……
<ul></ul>
</div>
</body>
</html>

(5).综合案例,for嵌套,加上索引值实现防qq菜单
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>js前端开发入门</title>
<style>
ul,
h2{
padding:0;
margin:0;
}
li{
list-style:none;
}
#list{
width:240px;
border:1pxsolid#333;
margin:0auto;
}
#list.lis{}
#listh2{
height:30px;
line-height:30px;
text-indent:20px;
background:url(img/ico1.gif)no-repeat5pxcenter#6FF;
color:#000;
}
#list.active{
background:url(img/ico2.gif)no-repeat5pxcenter#FF9;
color:#000;
}
#listul{
display:none;
}
#listulli{
line-height:24px;
border-bottom:1pxsolid#333;
text-indent:24px;
}
#listul.hover{
background:#6FF;
}
</style>
<script>
window.onload = function () {
varoUl=document.getElementById(‘list’);
varaH2=oUl.getElementsByTagName(‘h2’);
varaUl=oUl.getElementsByTagName(‘ul’);
varaLi=null;
vararrLi= [];
//循环点击事件
for (vari=0;i<aH2.length;i++) {
//自定义索引
aH2[i].index =i;
//添加点击事件
aH2[i].onclick=function(){
//为了关闭已经打开的菜单
for (vari=0;i<aH2.length;i++) {
if (i!=this.index) {
aUl[i].style.display =’none’;
aH2[i].className =”;
}
}
//被点击元素是否有类名,
if (this.className ==”) {
aUl[this.index].style.display =’block’;
this.className =’active’;
}else{
aUl[this.index].style.display =’none’;
this.className =”;
}
};
}
//循环
for (vari=0;i<aUl.length;i++) {
//获取到每个 class为lis下的li,
aLi=aUl[i].getElementsByTagName(‘li’);
for (varj=0;j<aLi.length;j++) {
//把这些li放到数组里
arrLi.push(aLi[j]);
}
}
//循环 class为lis下的所有li添加点击事件,
for (vari=0;i<arrLi.length;i++) {
arrLi[i].onclick=function(){
for (vari=0;i<arrLi.length;i++) {
//先把其他的清空
if (arrLi[i] !=this) {
arrLi[i].className =”;
}
}
//在位点击的元素添加效果,
if (this.className ==”) {
this.className =’hover’;
}else{
//点击第二下,把效果去掉了
this.className =”;
}
};
}
};
</script>
</head>
<body>
<ulid=”list”>
<liclass=”lis”>
<h2>我的好友</h2>
<ul>
<li>张三</li>
<li>张三</li>
<li>张三</li>
<li>张三</li>
</ul>
</li>
<liclass=”lis”>
<h2>企业好友</h2>
<ul>
<li>李四</li>
<li>李四</li>
<li>李四</li>
<li>李四</li>
<li>李四</li>
</ul>
</li>
<liclass=”lis”>
<h2>黑名单</h2>
<ul>
<li>张小三</li>
<li>李小四</li>
</ul>
</li>
</ul>
</body>
</html>

五.数据类型和数据转换
(1).数据类型
html 代码

alert(typeof 1); // 返回字符串”number”
alert(typeof “1”); // 返回字符串”string”
alert(typeof true); // 返回字符串”boolean”
alert(typeof {}); // 返回字符串”object”
alert(typeof []); // 返回字符串”object “
alert(typeof
function(){});// 返回字符串”function”
alert(typeof null); // 返回字符串”object”
alert(typeof undefined); // 返回字符串”undefined”

(2).类型转换
JS 数据类型转换 方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换。
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。
转载网上:
html 代码

JS 数据类型转换 方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not
a Number)。 在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的
测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。 例如,如果要把字符串 “1234blue “转换成整数,那么parseInt()将返回1234,因为当它检测到字符b时,就会停止检测过程。字符串中包含的数字字面量会被正确转换为数字,因此
字符串 “0xA “会被正确转换为数字10。不过,字符串 “22.5 “将被转换成22,因为对于整数来说,小数点是无效字符。一些示例如下: parseInt(“1234blue”); //returns 1234 parseInt(“0xA”);
//returns 10 parseInt(“22.5”); //returns 22 parseInt(“blue”); //returns NaN parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,所以要解析十六进制的值,需如下调用parseInt()方法:
parseInt(“AF”, 16); //returns 175 当然,对二进制、八进制,甚至十进制(默认模式),都可以这样调用parseInt()方法: parseInt(“10”, 2); //returns 2 parseInt(“10”,
8); //returns 8 parseInt(“10”, 10); //returns 10 如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如: parseInt(“010”); //returns 8
parseInt(“010”, 8); //returns 8 parseInt(“010”, 10); //returns 10 在这段代码中,两行代码都把字符串 “010 “解析成了一个数字。第一行代码把这个字符串看作八进制的值,解析它的方式与第二行代码(声明基数为8)相同。最后一行代码声明基数为10,所以iNum3最后等于10。
parseFloat()方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字 符之前的字符串转换成数字。不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点,第二个小数点将被看作无效的,
parseFloat()方法会把这个小数点之前的字符串转换成数字。这意味着字符串 “22.34.5 “将被解析成22.34。 使用parseFloat()方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,而不能用八进制形式或十六进制形式。该
方法会忽略前导0,所以八进制数0908将被解析为908。对于十六进制数0xA,该方法将返回NaN,因为在浮点数中,x不是有效字符。此外,parseFloat()也没有基模式。 下面是使用parseFloat()方法的示例: parseFloat(“1234blue”);
//returns 1234.0 parseFloat(“0xA”); //returns NaN parseFloat(“22.5”); //returns 22.5 parseFloat(“22.34.5”); //returns 22.34
parseFloat(“0908”); //returns 908 parseFloat(“blue”); //returns NaN 2. 强制类型转换 还可使用强制类型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下: Boolean(value)——把给定的值转换成Boolean型; Number(value)——把给定的值转换成数字(可以是整数或浮点数); String(value)——把给定的值转换成字符串。
用这三个函数之一转换值,将创建一个新值,存放由原始值直接转换成的值。这会造成意想不到的后果。 当要转换的值是至少有一个字符的字符串、非0数字或对象(下一节将讨论这一点)时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。
可以用下面的代码段测试Boolean型的强制类型转换。 Boolean(“”); //false – empty string Boolean(“hi”); //true – non-empty string Boolean(100); //true
– non-zero number Boolean(null); //false – null Boolean(0); //false – zero Boolean(new Object()); //true – object Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的是整个值,而不是部分值。还记
得吗,parseInt()和parseFloat()方法只转换第一个无效字符之前的字符串,因此 “4.5.6 “将被转换为 “4.5 “。用Number()进行强制类型转换, “4.5.6 “将返回NaN,因为整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number()将判断是调用parseInt()方法还是调用
parseFloat()方法。下表说明了对不同的值调用Number()方法会发生的情况: 用  法 结  果 Number(false) 0 Number(true) 1 Number(undefined) NaN Number(null)
0 Number( “5.5 “) 5.5 Number( “56 “) 56 Number( “5.6.7 “) NaN Number(new Object()) NaN Number(100) 100 最后一种强制类型转换方法String()是最简单的,因为它可把任何值转换成字符串。要执行这种强制类型转换,只需要调用作为参数传递进来的值的
toString()方法,即把1转换成 “1 “,把true转换成 “true “,把false转换成 “false “,依此类推。强制转换成字符串和调用toString()方法的唯一不同之处在于,对null或undefined值强制类型转换可以生成字符串而不引
发错误: var s1 = String(null); //”null” var oNull = null; var s2 = oNull.toString(); //won’t work, causes an error 3. 利用js变量弱类型转换
举个小例子,一看,就会明白了。
<script>
varstr=’012.345 ‘;
varx=str-0;
x=x*1;
</script>

(3).获取函数内的值
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>web前端开发 工具</title>
<script>
// 想要获取函数内的值:
//定义一个全局变量
varstr=”;
functionfn1(){
vara=’大鸡腿~’;
str=a;
}
fn1();
// alert( str );
// 然后就可以获取到函数内的值
</script>
</head>
<body>
</body>
</html>

六.运算符、流程控制
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>零基础学前端开发</title>
<script>
// && 与、|| 或、! 否
// alert( 12<90 && 230<80 ); // false
vara=120<90&&20;
// alert( a ); // false
// alert( 120<90 || 230<80 );
varb=120<90||20>200;
// alert( b ); // 20
varc=!!true;
// alert( c );
vard=!200;
alert(d);//false
</script>
</head>
<body>
</body>
</html>

(2).checkbox反选
html 代码

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>前端开发很有用的网站</title>
<script>
window.onload = function () {
varaInp=document.getElementsByTagName(‘input’);
aInp[0].onclick=function(){
for (vari=1;i<aInp.length;i++) {
aInp[i].checked =!aInp[i].checked;
}
};
};
</script>
</head>
<body>
<inputtype=”button” value=”反选” />
<ul>
<li>
<inputtype=”checkbox” checked />
</li>
<li>
<inputtype=”checkbox” />
</li>
<li>
<inputtype=”checkbox” checked />
</li>
<li>
<inputtype=”checkbox” />
</li>
<li>
<inputtype=”checkbox” />
</li>
</ul>
</body>
</html>
web前端开发技术复习|前端初级开发工程师要求|初级web前端开发工程师|前端开发者
https://www
» 本文来自:前端开发者 » 《Web前端开发技术复习javascript初级》
» 本文链接地址:https://www.rokub.com/3378.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!