千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  经常被误用的JavaScript的元素、方法和属性

经常被误用的JavaScript的元素、方法和属性

时间:2018-01-22 15:30:51     来源:千锋视频教程 作者:李老师

  关于这个问题,那我就说说JavaScript部分吧,希望能给正在阅读的你一点点收获

  1、 当remove()方法遇到for循环

  在dom操作中,我们常常使用 remove() 函数来删除页面中的某个元素,因为页面中的元素在页面中都会有一个下标,那么remove()方法在for循环中会有问题

  比如我们要实现这个问题 :删除页面中下标为2的li,并且将其余的li设置蓝色的背景色

  在做这个效果之前,我们需要准备一些元素,首先应该有5个li,如下图所示:

  然后我觉得第三个li多余了,不想要了,那我就要将第三个li删除,其余的li添加蓝色背景色,于是……请看下面的代码

  var oUl = document.getElementById("box");

  var list = oUl.children;

  var count = 5;

  for( var i = 0 ; i < list.length ; i++ ){

  if( i == 2 ){

  list[i].remove();

  }else{

  list[i].style.backgroundColor = "skyblue";

  }

  }

  上面代码的运行结果是这个样子滴,你会发现 第三个li确实是被删掉啦,哇塞,真的实现了呢,不过你在仔细一看,咦,第四个li的颜色哪里去了?貌似第四个li没有遍历到呢?

  前面我提到过,每一个li元素在页面中都有一个下标,那么这5个li的下标分别是0 ,1 ,2 ,3 ,4 , 所以当循环找到第三个li,也就是下标为2的li时,通过remove()方法将其删掉,当删除第三个li后,第四个li的下标在页面中由原来的3变成了2,也就是说第四个li占了第三个li的位置,所以下标也会随之改变,那么此时i的下标已经由原来的2变成了3,所以跳过了第四个li,于是乎我们的结果就是第四个li没有背景颜色…原理就是这个样子滴,是不是很绕

  绕了这么一个大圈,那么上面的这个问题我们如何解决呢?其实很简单,看下面的代码:

  var oUl = document.getElementById("box");

  var list = oUl.children;

  var count = 5;

  for( var i = 0 ; i < list.length ; i++ ){

  if( i == 2 ){

  list[i].remove(); 删除该li后 紧接着设置下一个li的颜色

  list[i].style.backgroundColor = "skyblue";

  }else{

  list[i].style.backgroundColor = "skyblue";

  }

  }

  搞定完成~~~

  2、 使用new Date(2017,12,3)创建自定义时间对象

  new Date(2017,12,3) 不加引号时,结果是 2018年1月3号

  这里的第二个参数是指第几个月,比如你这里的 12 就是第12个月,因为月份是从0开始的,这明显已到了下一年的第一个月。

  new Date(“2017,12,3”) 加引号时,结果是 2017年12月3号

  如果参数加引号,就相当于格式化时间格式。

  3、 关于JavaScript数组的length属性

  我们通常是通过length属性获取数组的长度 , 那么length属性也可以设置数组的长度,这样就可以很快速的改变数组的长度

  比如 : 将数组数据清空,我们可以这么干

  arr.length = 0

  4、 请看下面一段代码:

  var list = document.getElementsByTagName("li");

  for( var i = 0 ; i < list.length ; i++ ){

  list[i].onclick = function(){

  alert(i); 输出结果是 ?

  }

  }

  通过循环,为每一个li添加单击事件,当单击某个li时,会输出什么?

  很多人会误认为会输出li在页面中的下标,但结果却是无论你点击哪一个li,都会输出 list.length 这个值 , 因为页面加载后用户还没有点击,for循环已经执行完毕,解释完毕.

  关于JavaScript,今天先聊到这,累了请杯茶,再送您一句话:

  革命尚未成功,同志还需努力,加油吧

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱