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

400-811-9990
当前位置:首页  >  行业资讯  >  正文
分享到:

郑州Web前端学习入门之常用的JS工具函数介绍

时间:2019-07-15 11:09     来源:千锋教育 作者:Yolanda

  JS是前端三要素之一,很多企业招聘过程中都会重点考察求职者对JS的掌握程度,掌握好JS就意味着你拥有更多获得高薪的机会。在接下来的郑州Web前端学习中,小编就给大家分享一下常用的JS工具函数以及使用方法。

  选取DOM元素的方法

  (注意:原生JS选取DOM元素比使用jQuery类库选取要快很多)

  通过ID选取元素:document.getElementById('myid');

  通过CLASS选取元素:document.getElementsByClassName('myclass')[0];

  通过标签选取元素:document.getElementsByTagName('mydiv')[0];

  通过NAME属性选取元素(常用于表单):document.getElementsByName('myname')[0];

  JS修改CSS样式

  document.getElementById('myid').style.display = 'none';

  JS修改CLASS属性

  document.getElementById('myid').className = 'active';

  如果有多个CLASS属性,即用空格隔开////////

  document.getElementById('myid').className = 'active div-1';

  移除该元素上的所有CLASS

  document.getElementById('myid').className = ''

  注意:使用classList会优于使用className

  document.getElementById('myid').classList.item(0);//item为类名的索引

  document.getElementById('myid').classList.length;//只读属性

  document.getElementById('myid').classList.add('newClass');//添加class

  document.getElementById('myid').classList.remove('newClass');//移除class

  document.getElementById('myid').classList.toggle('newClass');//切换,有则移除,没有则添加

  document.getElementById('myid').classList.contains('newClass');//判断是否存在该class

图片3

  JS修改文本

  document.getElementById('myid').innerHTML = '123';

  数组去重的方法

  Array.prototype.unique = function(){

  var tem = {}, //新建一个空对象,给数组中没出现过的数添加一个属性

  arr = [], //去重后的数组

  len = this.length; //要进行去重数组的长度

  for(var i=0;i

  if(!temp[this[i]]){ // 判断数组中的数作为属性名在temp里有没有属性值

  temp[this[i]]="abc";//如果没有属性值,则说明没出现过给他一个属性值

  arr.push(this[i]);//同时把这个数添加到去重后的数组里

  }

  }

  return arr; //最后返回这个数组,这是hash算法

  }

  删除数组中存在重复的元素

  function getUnique(someArray) {

  tempArray = someArray.slice(0); //复制数组到临时数组

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

  for (var j = i + 1; j < tempArray.length;) {

  if (tempArray[j] == tempArray[i])

  //后面的元素若和待比较的相同,则删除并计数;

  //删除后,后面的元素会自动提前,所以指针j不移动

  {

  tempArray.splice(j, 1);

  }

  else {

  j++;

  }

  //不同,则指针移动

  }

  }

  return tempArray;

  }

  判断某个值是否在数组中

  Array.prototype.in_array = function (e) {

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

  if (this[i] == e)

  return true;

  }

  return false;

  }

  判断某个值在数组中的位置

  Array.prototype.indexOf = function (e) {

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

  if (this[i] == e)

  return i;

  }

  return -1;

  }

  跨浏览器绑定事件

  function addEventSamp(obj, evt, fn) {

  if (!oTarget) { return; }

  if (obj.addEventListener) {

  obj.addEventListener(evt, fn, false);

  } else if (obj.attachEvent) {

  obj.attachEvent('on' + evt, fn);

  } else {

  oTarget["on" + sEvtType] = fn;

  }

  }

  跨浏览器删除事件

  function delEvt(obj, evt, fn) {

  if (!obj) { return; }

  if (obj.addEventListener) {

  obj.addEventListener(evt, fn, false);

  } else if (oTarget.attachEvent) {

  obj.attachEvent("on" + evt, fn);

  } else {

  obj["on" + evt] = fn;

  }

  }

  如果你想了解更多郑州Web前端学习教程资料,可以关注“千锋郑州校区”微信公众号,定期发布技术热点和教程分析,帮助你更快入行Web前端。

相关文章

QQ技术交流群

千锋郑州HTML5学习群
605781677

加入群聊

热门视频

开班信息

  • JavaEE培训就业班--------------------------------

    10.21抢座

  • HTML5大前端就业班--------------------------------

    10.21抢座

  • JavaEE培训就业班--------------------------------

    09.23抢座

  • Python培训就业班--------------------------------

    09.23抢座

  • HTML5大前端就业班--------------------------------

    09.23抢座

  • UI设计培训就业班--------------------------------

    09.16抢座

  • Python培训就业班--------------------------------

    09.09抢座

  • UI设计培训就业班--------------------------------

    09.09抢座

  • JavaEE培训就业班--------------------------------

    08.19抢座

  • HTML5大前端就业班--------------------------------

    08.19抢座

  • 北京总部地址:北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 深圳校区地址:深圳市宝安区宝安大道5010号西部硅谷B座A区6层A605/B座C区1层108
    咨询电话:0755-23015275/23015546-801/86660670
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 郑州二七区校区地址:郑州市二七区航海中路60号海为科技园C区10层
    郑州高新区校区地址:郑州市高新区金梭路与银杏路交叉口教育科技产业园南门D座4层
    咨询电话:0371-55191750/18610973027
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:020-87088521
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)16楼
    咨询电话:18628039301/18280029283/13028173481/18613201237
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    杭州龙驰校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层
    咨询电话:400-811-9990 0571-86893632/0571-86094032
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 哈尔滨校区地址:哈尔滨市松北区世泽路689号科技创新城4号楼11楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 南京校区地址:南京市建邺区应天大街780号弘辉产业园1栋2层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 太原校区地址:太原市小店区长治路230号能源互联网大厦6层
    咨询电话:400-811-9990 16603513433
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 沈阳校区地址:辽宁省沈阳市浑南区世纪路16号东大软件园B园B1座A201
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 合肥校区地址:合肥市包河区徽州大道396号东方广场B座12A
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 千锋教育服务号

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

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

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